JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js"></script>
    <body>
    <script>
         
    </script>
</body>

JavaScript

var canvasWidth = 750;
var canvasHeight = 600;
var data = [{"ttext":"Architect","t_count":"1"},
{"ttext":"Entertainment","t_count":"2"},
{"ttext":"Food","t_count":"2"},
{"ttext":"Gujarati","t_count":"1"},
{"ttext":"Laundry","t_count":"1"},
{"ttext":"Milk","t_count":"2"},
{"ttext":"Rajasthani","t_count":"1"}];

// Setup scales

  var widthScale = d3.scaleLinear()
  .domain([0, 3])
  .range([0, canvasWidth]);

  var colorScale = d3.scaleLinear()
  .domain([0, 10])
  .range(["red", "blue"]);

  var canvas = d3.select("body")
  .append("svg")
  .attr("width", canvasWidth)
  .attr("height", canvasHeight)

  canvas.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width", function(d) { 
    return widthScale(d.t_count); })
    .attr("height", 30)
    .attr("y", function(d, i) { return i * 50; })
    .attr("fill", "blue")

  canvas.selectAll("text")
    .data(data)
    .enter()
    .append("text")
    .attr("fill", "black")
    .attr("y", function(d, i) { return (i * 50 + 22); })
    .text(function(d) { return d.ttext; })