JSFiddle - React, Tailwind, and code Playground

by DohanKwon

HTML

<span id="weight_date"></span>
<div id="weight"></div>

CSS

#weight_date {
	font: 12px sans-serif;
	color: #FFF;
	background-color: #468BF0;
}

#weight {
	font: 10px sans-serif;
	background-color: #468BF0;
	width: 320px;
	height: 194px;
}

JavaScript

(function(window) {
	"use strict";

	var margin = {top: 120, right: 0, bottom: 20, left: 0},
		width = 350,
		height = 200;

	var bmicategory = [
		{ name: "Low Weight", value: 18.5, color: "#7DD5BD" },
		{ name: "Normal", value: 23.0, color: "#90DD6B" },
		{ name: "Overweight", value: 25.0, color: "#D8EA7C" },
		{ name: "Obesity", value: 30.0, color: "#F8BD35" },
		{ name: "Danger!", value: 100, color: "#F54547" },
	];
	
	var curbmi = 0;		
	var svg = null, info = null;;
	
	var chartWeight = 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)
			.style("fill", "none")
			.style("stroke", "#FFF")
			.style("stroke-width", "2px");
			
		// POINT GRAPH
		var points = svg.selectAll(".point")
			.data(data)
			.enter().append("circle")
			.attr("class", "point")
			.attr("r",...