JSFiddle - React, Tailwind, and code Playground

by Yuval Bar-On

HTML

<div id="chart"></div>

CSS

#chart {
    width: 400px;
    height: 300px;
}

JavaScript

function CreateGraph(name, div_id, data, color) {
    var div = d3.select(div_id);
    var w = parseInt(div.style("width"), 10),
        h = parseInt(div.style("height"), 10),
        margin = {
            top: 30,
            right: 30,
            bottom: 30,
            left: 30
        },
        radius = 5;

    var svg = div.append("svg")
        .attr({
        width: w,
        height: h
    });

    var xScale = d3.scale.linear()
        .domain([0, d3.max(data, function (d) {
        return d.x;
    }) + 10])
        .range([margin.left, w - margin.right]);

    var yScale = d3.scale.linear()
        .domain([0, d3.max(data, function (d) {
        return d.y;
    })])
        .range([h - margin.bottom, margin.top]);


    // Create Axis 
    var xAxis = d3.svg.axis().scale(xScale).orient("top");
    var xAxisGroup = svg.append("g").attr({
        "class": "axis",
        transform: "translate(" + [0, margin.top] + ")"
    }).call(xAxis);

    var yAxis = d3.svg.axis().scale(yScale).orient("left");
    var yAxisGroup = svg.append("g").attr({
        "class": "axis",
        transform: "translate(" + [margin.left, 0] + ")"
    }).call(yAxis);





    // Add a path
    var lineFunction = d3.svg.line()
        .x(function (d) {
        return xScale(d.x);
    })
        .y(function (d) {
        return yScale(d.y);
    })
        .interpolate("linear");


    var path = svg.append("path").attr({
        d: lineFunction(data),
        stroke: color,
            "stroke-width": 3,
        fill: "white",
            "class": name
    });

    var totalLength = path.node().getTotalLength();

    path.attr({
        "stroke-dasharray": totalLength + " " + totalLength,
            "stroke-dashoffset": totalLength
    })
        .transition()
        .duration(2000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

    // Add the circles
    var circleInitialAttrs = {
        cx: function (d) {
            return xScale(d.x);
        },
        cy:...