JSFiddle - React, Tailwind, and code Playground

by ilazarte

HTML

<body>
</body>

JavaScript

// a potentially unoptimized line chart with d3

var tooltip = d3.select("body")
    .append("div")
    .style("background-color", "#ffffff")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;

var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

var valueline = d3.svg.line()
    .x(function (d) {
        return x(d.x);
    })
    .y(function (d) {
        return y(d.y);
    });

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.top + ")");

// Get the data
function generateData() {
    var data = [];
    for (var i = 0; i < 10000; i++) {
        let item = {x: i, y: Math.random()};
        data.push(item);
    }
    return data;
}

var data = generateData();

// Scale the range of the data
x.domain(d3.extent(data, function (d) {
    return d.x;
}));

y.domain([0, d3.max(data, function (d) {
    return d.y;
})]);

svg.append("path") // Add the valueline path.
    .attr("d", valueline(data));

svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

function drawCircles(svg) {
    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr({
            cx: function (d) {
                return x(d.x);
            },
            cy: function (d) {
               ...