JSFiddle - React, Tailwind, and code Playground

by alex bollbach

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<svg>  </svg>

CSS

rect {
  fill: red;
}
svg {
  width: 500px;
  height: 500px;
}

JavaScript

var data = [1,2,3];
for (i = 0; i < 400; i++) {
if (i % 6 == 0) {continue;}
data.push(i);
}
var svg = d3.select('svg').selectAll('rect').data(data);
var rects = svg.enter().append('rect');


var x = d3.scale.linear();
var max = d3.max(data, function(d,i){return d});
  x.range([0, 500]);
  x.domain([0, max]);
var xAmount = function(d,i) { return x(d);};
var yAmount = function(d,i) { return x(d);};

rects.attr('width', 1)
.attr('height', yAmount)
.attr('x',xAmount)
.attr('y', 1);