JSFiddle - React, Tailwind, and code Playground

by devgru

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

JavaScript

var data = [
  { 'a': 1, 'b': 2 },
  { 'a': 42, 'b': 7 },
  { 'a': 15, 'b': 3 },
  { 'a': 32, 'b': 8 },
  { 'a': 26, 'b': 9 },
  { 'a': 18, 'b': 5 }
]

var margin = {top: 20, right: 10, bottom: 20, left: 10}
var fullWidth = 500
var fullHeight = 500
var width = fullWidth - margin.left - margin.right
var height = fullHeight - margin.top - margin.bottom

var x = d3.scale.linear()
	.domain([0, 5])
	.range([0, 300])
var y = d3.scale.linear()
	.domain([0, 50])
	.range([300, 0])
var color = d3.scale.linear()
	.domain([0, 10])
	.range(['#500', '#F00'])

d3.select('body')
  .append('svg')
  .attr('width', fullWidth)
  .attr('height', fullHeight)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  .selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', 5)
  .attr('cx', (d, i) => x(i))
  .attr('cy', (d, i) => y(d.a))
  .attr('fill', (d, i) => color(d.b))