JSFiddle - React, Tailwind, and code Playground

by gleezer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.js"></script>
<div id="stage"></div>

Babel + JSX

const stockData = [{
  stock: 'ABN',
  price: 55
}, {
  stock: 'Barclay\'s',
  price: 90
}, {
  stock: 'HSBC',
  price: 88
}, {
  stock: 'Bank of China',
  price: 67
}, {
  stock: 'Bank of America',
  price: 44.3
}, {
  stock: 'Unicredit',
  price: 31.22
}, {
  stock: 'Credit Suisse',
  price: 67.45
}, {
  stock: 'Banco do Espirito Santo',
  price: 77.21
}, {
  stock: 'Banesto',
  price: 53.07
}, {
  stock: 'Itau',
  price: 61.21
}, {
  stock: 'Credit Agricole',
  price: 85.59
}, {
  stock: 'Bradesco',
  price: 34.15
}, {
  stock: 'CIBC',
  price: 59.09
}, ];

const colorScale = d3
  .scaleLinear()
  .domain([
    d3.min(stockData, d => d.price),
    d3.max(stockData, d => d.price)
  ])
  .range([
  	'#63a6d6', // <= the lightest shade we want
    '#124488'  // <= the darkest shade we want
  ]); 

const xScale = d3
  .scaleLinear()
  .domain([0, d3.max(stockData, d => d.price)])
  .range([0, 300])

let render = (elem, data) => (
  elem
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .style('height', `20px`)
  .style('width', 0)
  .style('background', d => colorScale(d.price))
  .transition()
  .duration(700)
  .style('width', d => `${xScale(d.price)}px`)
)

const stage = d3.select('#stage');

render(stage, stockData);