JSFiddle - React, Tailwind, and code Playground

by Travis Nguyen

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>



</body>

CSS

body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 0.95em;
	text-align: center;
}
#chart{
	background-color: #F5F2EB;
	border: 1px solid #CCC;
}
.bar{
	fill: purple;
	shape-rendering: crispEdges;
}
.bar-label{
	fill: #000;
	text-anchor: middle;
	font-size: 18px;
}
.axis path,
.axis line{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.gridline path,
.gridline line{
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
}

JavaScript

var data = [
{ "area": "Đồng bằng sông Hồng", "age1": 9.62, "age2": 1.45, "age3":20 },
{ "area": "Trung du và miền núi phía Bắc", "age1": 2.95, "age2": 20, "age3":20},
{ "area": "Bắc Trung Bộ và duyên hải miền Trung", "age1": 8.26, "age2": 20, "age3":20},
{ "area": "Tây Nguyên", "age1": 2.47, "age2": 20, "age3":20 },
{ "area": "Đông Nam Bộ", "age1": 8.02, "age2": 20, "age3":20},
{ "area": "Đồng bằng sông Cửu Long", "age1": 8.19, "age2": 20, "age3":20}];

var w = data.length * 100;
var h = 600;
var barHeight = 30;
var margin = {
	top: 100,
	bottom: 200,
	left: 150,
	right: 100
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var formatAsPercentage = d3.format(".1%");

var x = d3.scaleBand()
	.domain(data.map(function(entry){
		return entry.area;
	}))
	.range([0, width]);


var y = d3.scaleLinear()
	.domain([0, d3.max(data, function(d){
			return d.age1;
		})])
	.range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

var ordinalColorScale =  d3.scaleOrdinal(d3.schemeCategory10);

var yGridlines =  d3.axisLeft(y)
					.tickSize(-width,0,0)
					.tickFormat("");

var svg = d3.select("body").append("svg")
			.attr("id", "chart")
			.attr("width", w)
			.attr("height", h);

var chart = svg.append("g")
			.classed("display", true)
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


chart.append("g")
			.call(yGridlines)
			.classed("gridline", true)
			.attr("transform", "translate(0,0)");

chart.selectAll(".bar")
		.data(data)
		.enter()
			.append("rect")
			.classed("bar", true)
            .attr("x", function(d,i) {
				return x(d.area) + 1;
			})
			.attr("y", function(d,i) {
				return y(d.age1);
			})
			.attr("height", function(d) {
				return height - y(d.age1);
			})
			.attr("width", function(d){
				return x.bandwidth() - 1;
			})
			.style("fill", function(d,i){
				return...