JSFiddle - React, Tailwind, and code Playground

by Brandon

JavaScript

var width = 500,
        height = 500,
        margin = 50,
        x = d3.scale.linear() // <-A
            .domain([0, 10])
            .range([margin, width - margin]),
        y = d3.scale.linear() // <-B
            .domain([0, 10])
            .range([height - margin, margin]);
        
    var data = [ // <-C
        [
            {x: 0, y: 5},{x: 1, y: 9},{x: 2, y: 7},
            {x: 3, y: 5},{x: 4, y: 3},{x: 6, y: 4},
            {x: 7, y: 2},{x: 8, y: 3},{x: 9, y: 2}
        ],
        
        d3.range(10).map(function(i){
            return {x: i, y: Math.sin(i) + 5};
        })
    ];
    
    var line = d3.svg.line() // <-D
            .x(function(d){return x(d.x);})
            .y(function(d){return y(d.y);});
        
    var svg = d3.select("body").append("svg");
    
    svg.attr("height", height)
        .attr("width", width);
        
     svg.selectAll("path")
            .data(data)
        .enter()
            .append("path") // <-E
            .attr("class", "line")            
            .attr("d", function(d){return line(d);}); // <-F
            
    renderAxes(svg);
        
    function renderAxes(svg){ // <-G
        var xAxis = d3.svg.axis()
                .scale(x.range([0, quadrantWidth()]))
                .orient("bottom");            
                
        var yAxis = d3.svg.axis()
                .scale(y.range([quadrantHeight(), 0]))
                .orient("left");
        
        svg.append("g")        
            .attr("class", "axis")
            .attr("transform", function(){
                return "translate(" + xStart() 
                    + "," + yStart() + ")";
            })
            .call(xAxis);
            
        svg.append("g")        
            .attr("class", "axis")
            .attr("transform", function(){
                return "translate(" + xStart() 
                    + "," + yEnd() + ")";
            })
            .call(yAxis);
    }
        
    function xStart(){
        return...