JSFiddle - React, Tailwind, and code Playground

by deanb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="graphContainer"></div>

CSS

#graphContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 10px;
    right: 10px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis path {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

JavaScript

var getData = function (count) {
    var data = [];
    for (var i = 1; i <= count; i++) {
        var item = {
            'id': 'Item: ' + i,
            'x': +(i * 10),
            'y': +(i * 10),
        };
        data.push(item);
    }
    return data;
};

var data = getData(5);

var idValue = function (d) { return d['id']; };
var margin = { top: 20, right: 10, bottom: 30, left: 60 };

var width = $('#graphContainer').width() - margin.left - margin.right;
var height = $('#graphContainer').height() - margin.top - margin.bottom;

var xTicks = [0, 10, 20, 100];
var xRangeDelta = (width) / (xTicks.length - 1);
var xValue = function (d) { return d['x']; };

var  x = d3.scale.linear()
    .domain([0, 10, 20, 100])  
    .range(d3.range(xTicks.length)
    .map(function (d) { return d * xRangeDelta; }))
    .nice(xTicks.length);
var xMap = function (d) { return x(xValue(d)); }; 
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(xTicks);

var yDomain = function () { return [d3.min(data, yValue) - 1, d3.max(data, yValue) + 1]; };
var yValue = function (d) { return d['y']; }; 
var y = d3.scale.linear()
    .domain(yDomain())
    .range([height, 0])
    .nice(10); 
var yMap = function (d) { return y(yValue(d)); }; 
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

 var onZoom = function () {
                if (d3.event.scale == 1) {  //panning
                    
                } else {   //zooming
                    // don't scale points and lines
                    graph.selectAll(".point")
                        .attr("r", 10 / d3.event.scale)
                        .attr("stroke-width", 1 / d3.event.scale);
                }
     
     // update range in zoom event - leave the domain as is
    x.range(d3.range(xTicks.length)
        .map(function (d) { return (d * xRangeDelta) * d3.event.scale +             d3.event.translate[0]; }))
 
    graph.selectAll(".point")
        .attr("transform", function (d) { return...