JSFiddle - React, Tailwind, and code Playground

CSS

.circle {
		    fill: red;
		}
		.dot {
		    fill: grey;
		    stroke: grey;
		}
		.axis path, .axis line {
		    fill: none;
		    stroke: #aaa;
		    shape-rendering: crispEdges;
		}
		.axis text {
		    font-family: sans-serif;
		    font-size: 11px;
		}

JavaScript

var dataSet = [{hour: "01",yval: "188",foo: "0", goo:"0", bar:"0"}, 
               {hour: "02",yval: "63",foo: "33", goo:"0", bar:"1"}, 
               {hour: "14",yval: "241",foo: "0", goo:"2", bar:"0"}, 
               {hour: "15",yval: "241",foo: "27", goo:"0", bar:"0"}, 
               {hour: "19",yval: "241",foo: "0", goo:"0", bar:"0"},
               {hour: "22",yval: "318",foo: "12", goo:"0", bar:"1"},
               {hour: "08",yval: "118",foo: "2", goo:"0", bar:"1"},
               {hour: "22",yval: "48",foo: "0", goo:"2", bar:"0"},
               {hour: "21",yval: "31",foo: "1", goo:"0", bar:"1"},
               {hour: "12",yval: "38",foo: "0", goo:"2", bar:"0"},
               {hour: "16",yval: "138",foo: "36", goo:"0", bar:"0"},
               {hour: "05",yval: "344",foo: "0", goo:"1", bar:"1"},
               {hour: "08",yval: "218",foo: "39", goo:"0", bar:"1"},
               {hour: "03",yval: "18",foo: "41", goo:"0", bar:"0"},
               {hour: "18",yval: "98",foo: "23", goo:"0", bar:"0"},
               {hour: "18",yval: "98",foo: "0", goo:"2", bar:"1"},
              ];

		var w = 500,
		    h = 500,
		    top_pad = 20,
		    left_pad = 100;

		var x = d3.scale.linear()
		    .domain([-1, 23])
		    .range([left_pad, w - left_pad]),
		    y = d3.scale.linear()
		        .domain([0, 350])
		        .range([h - top_pad, top_pad]);


		var svg = d3.select("body")
		    .append("svg:svg")
		    .attr("width", w + left_pad)
		    .attr("height", h + top_pad);
        
        var symbolTypes = ["circle","triangle-down"];

		svg.selectAll("circle")
		    .data(dataSet)
		    .enter().append("circle")
		    .attr("class", "dot")
		    .attr("cx", function (d) {
		    return x(d.hour) + (Math.random() * 12 - 6)
//           .style("fill", function (d) { return colors[d.type]; })
            ;})
//     colors = ["blue", "red"],color        
        
		//Math.random for a crude jitter hack
		.attr("cy", function (d) {
		    return y(d.yval);
		})
		  ...