JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<head>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
	<div id="test-chart"></div>
	<script>
	
	var data = [
				{"number":1, "value":8},
				{"number":2, "value":16},
				{"number":3, "value":32},
				{"number":4, "value":64},
				{"number":5, "value":100},
				{"number":6, "value":20},
				{"number":7, "value":20}];
	var w = 645;
	var h = 300;
	var x = d3.scale.linear()
  	.domain([0, d3.max(data, function(d) { return d.value; })])
  	.range([0, w]);
	var y = d3.scale.ordinal()
  	.domain(d3.range(data.length))
  	.rangeBands([0, h], 0.1);
	
	var color = d3.scale.ordinal()
	    		.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
	
	var svg = d3.select("#test-chart")
  	.append("svg")
    .attr("width", w)
    .attr("height", h)
  	.append("g")
    .attr("transform", "translate(20,0)");

	var bars = svg.selectAll(".bar")
    .data(data)
  	.enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(" + 0 + "," + y(i+1) + ")"; });


	bars.append("rect")
  	.attr("fill", function(d, i) { return color(i); })
  	.attr("width", function(d) { return x(d.value); })
  	.attr("height", y.rangeBand());

  	bars.append("text")
	  .attr("x", function(d) { return x(d.value); })
	  .attr("y", 0 + y.rangeBand() / 2)
	  .attr("dx", -18)
	  .attr("dy", ".35em")
	  .attr("text-anchor", "end")
	  .text(function(d) { return d.value; });


	</script>
	
</body>