JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<textarea id="txtName" name="txt-Name" placeholder="Search for something.."></textarea>
<button>Try it</button>

JavaScript

var parseDate = d3.timeParse("%m/%d/%Y");

var doc = URL.createObjectURL(new Blob([
  `date	number	creator		doc
6/16/2000	3	molly	3	rat
2/25/2002	4	may	2	cat
12/05/2004	3	molly	4	fish
07/06/2006	1	milly	1	dog
09/07/2003	4	may	4	fish
12/10/2001	4	may	3	rat
6/15/2005	2	maggie	3	rat
06/09/2004	1	milly	4	fish
10/05/2005	1	milly	3	rat
10/07/2003	4	may	1	dog
1/19/2009	4	may	2	cat
10/30/2007	1	milly	4	fish
8/13/2009	4	may	2	cat
9/30/2004	3	molly	1	dog
1/17/2006	4	may	3	rat
12/18/2009	3	molly	1	dog
11/02/2007	2	maggie	3	rat
4/17/2007	1	milly	4	fish`
]));

d3.tsv(doc)
  .row(function(d) {
    return {
      creator: d.creator,
      date: parseDate(d.date),
      number: Number(d.number),
      doc: d.doc
    };
  })
  .get(function(error, data) {
    var height = 300;
    var width = 500;
    
        margin = {
      top: 40,
      right: 50,
      bottom: 0,
      left: 50
    };

    var minDate = new Date(2000, 1, 1);
    var maxDate = new Date(2011, 1, 1);

    var y = d3.scalePoint()
      .domain(['may', 'milly', 'maggie', 'molly'])
      .range([height - margin.top, 0])
      .padding(0.2);

    var x = d3.scaleTime()
      .domain([minDate, maxDate])
      .range([0, width]);

    var yAxis = d3.axisLeft(y);
    var xAxis = d3.axisBottom(x);

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



    var redBox = svg.append("rect")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .attr("y", 0)
      .attr("width", width)
      .attr("height", height)
      .attr("fill", "orange");

    var chartGroup = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var circles = svg.selectAll("circle")
      .data(data)
      .enter().append("circle")
      //.filter(function(d) {return d.doc = "milly";})
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .attr("cx", function(d) {
        return x(d.date);
      })
     ...