JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<!DOCTYPE html>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
        var margin = {
            top: -5,
            right: -5,
            bottom: -5,
            left: -5
        },
        width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", zoomed);

        var drag = d3.behavior.drag()
            .origin(function(d) {
            return d;
        })
            .on("dragstart", dragstarted)
            .on("drag", dragged)
            .on("dragend", dragended);

        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
            .call(zoom);

        var rect = svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all");

        var container = svg.append("g");

        container.append("g")
            .attr("class", "x axis")
            .selectAll("line")
            .data(d3.range(0, width, 10))
            .enter().append("line")
            .attr("x1", function(d) {
            return d;
        })
            .attr("y1", 0)
            .attr("x2", function(d) {
            return d;
        })
            .attr("y2", height);

        container.append("g")
            .attr("class", "y axis")
            .selectAll("line")
            .data(d3.range(0, height, 10))
            .enter().append("line")
            .attr("x1", 0)
            .attr("y1", function(d) {
            return d;
        })
            .attr("x2", width)
            .attr("y2", function(d) {
            return d;
        });

        d3.tsv("dots.tsv", dottype,...

CSS

.dot circle {
    fill: lightsteelblue;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.dot circle.dragging {
    fill: red;
    stroke: brown;
}
.axis line {
    fill: none;
    stroke: #ddd;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
}