JSFiddle - React, Tailwind, and code Playground

by DohanKwon

HTML

<div id="weight" style="width:350px;height:200px;"></div>

CSS

#weight {
    background-color: #468BF0;
    font: 10px sans-serif;
}
.background {
    fill: rgba(0, 0, 0, 0);
}
.line {
    fill: none;
    stroke: #FFF;
    stroke-width: 2px;
}
.point {
    fill: #468BF0;
    stroke: #FFF;
    stroke-width: 2px;
}
.point.selected {
    fill: #D80105;
}
.info {
    font: 16px sans-serif;
    color: #FFF;
}
.weight {
    font: 50px sans-serif;
    font-weight: bold;
}
.unit {
    font: 18px sans-serif;
}
.category {
    font: 18px sans-serif;
    color: black;
}
.bmi {
    font: 13px sans-serif;
}

JavaScript

(function(window) {
    "use strict";
    
    var margin = {top: 120, right: 0, bottom: 20, left: 0},
        width = 350,
        height = 200;
    
    var svg = null, info = null;;
    
    var lineChart = function(opt) {
        width = opt.width - margin.left - margin.right,
            height = opt.height - margin.top - margin.bottom;
        //console.log("width: " + width + ", height: " + height);
        
        var data = makeInfos(opt.data);
        
        svg = d3.select(opt.id).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 + ")");
        
        info = svg.append("foreignObject")
        .attr("width", width)
        .attr("height", margin.top)
        .attr("transform", "translate(0,-" + margin.top + ")")
        .append("xhtml:body");
        
        //console.log("x domain: ", data.map(function(d) { return d.date; }));
        var x = d3.scale.ordinal()
        .domain(data.map(function(d) { return d.date; }))
        .rangeBands([0, width]);
        
        //console.log("y domain: ", d3.extent(data, function(d) { return d.weight; }));	
        var y = d3.scale.linear()
        .domain(d3.extent(data, function(d) { return d.weight; }))
        .range([height, 0]);
        
        // LINE GRAPH
        var line = d3.svg.line()
        .x(function(d) { return x(d.date) + x.rangeBand() / 2; })
        .y(function(d) { return y(d.weight); });
        
        svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
        
        // POINT GRAPH
        var points = svg.selectAll(".point")
        .data(data)
        .enter().append("circle")
        .attr("class", "point")
        .attr("r", 3)
        .attr("cx", function(d) { return x(d.date) + x.rangeBand() / 2; })
        .attr("cy", function(d) { return y(d.weight);...