JSFiddle - React, Tailwind, and code Playground

by dsummersl

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Scale Graph</title>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
    </head>
    <body>
        <div id="demoContainer">
            <div id="option">
                <input id="updateButton" type="button" value="Update" onclick="updateData()"/>
            </div>
            <div id="mainGraph">
            </div>
        </div>  
    </body>
</html>

JavaScript

// Step 2

function randomData() {
    return d3.range(10).map(function(i) {
        return {
            x: i / 9,
            y: Math.random()
        };
    });
}

// Step 3
var data = randomData();
var newMaxY = d3.max(data, function(d) {
    return d.y;
});

// Step 4

function reDomain(maxValue) {
    var dy = Math.pow(10, Math.round(Math.log(maxValue) / Math.log(10)) - 1);
    return Math.ceil(maxValue / dy) * dy;
}

var newCeilY = reDomain(newMaxY);

//alert(reDomain(1/11));
// Step 5
var w = 450,
    h = 450,
    p = 50,
    x = d3.scale.linear().domain([0, 1]).range([0, w]),
    y = d3.scale.linear().domain([0, newCeilY]).range([h, 0]);

var chart = d3.select("#mainGraph").append("svg:svg").attr("width", w + p * 2).attr("height", h + p * 2);

var vis = chart.append("svg:g").attr("transform", "translate(" + p + "," + p + ")");

// Step 6
var xrule = vis.selectAll("g.x").data(x.ticks(10)).enter().append("svg:g").attr("class", "x");

xrule.append("svg:line").style("stroke", "#ccc").style("shape-rendering", "crispEdges").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", h);

xrule.append("svg:text").attr("x", x).attr("y", h + 3).attr("dy", ".71em").attr("text-anchor", "middle").text(x.tickFormat(10));

var yrule = vis.selectAll("g.y").data(y.ticks(10)).enter().append("svg:g").attr("class", "y");

yrule.append("svg:line").attr("class", "yLine").style("stroke", "#ccc").style("shape-rendering", "crispEdges").attr("x1", 0).attr("x2", w).attr("y1", y).attr("y2", y);

yrule.append("svg:text").attr("class", "yText").attr("x", -3).attr("y", y).attr("dy", ".35em").attr("text-anchor", "end").text(y.tickFormat(10));

// Step 7
var node = vis.selectAll("path.dot").data(data).enter().append("svg:path").attr("class", "dot").style("fill", "white").style("stroke-width", "1.5px").attr("stroke", "#9acd32").attr("transform", function(d) {
    return "translate(" + x(d.x) + "," + y(d.y) + ")";
}).attr("d", d3.svg.symbol()).on("mouseover", function(d, i) {
   ...