d3

d3 tests

by migerh

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart">
</div>

CSS

.chart {
  width: 400px;
  height: 500px;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JavaScript

function update(data) {
	let x = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, 400]);
    
  let chart = d3.select(".chart")
    .selectAll("div")
      .data(data);
      
  chart.attr('class', 'update')
    .transition()
  	.style("width", d => x(d) + "px")
    .text(d => d);
  
  chart.enter()
  	.append("div")
      .text(d => d)
    	.style("width", "0px")
    .transition()
      .style("width", d => x(d) + "px");
      
  chart.exit()
  	.transition()
    .style("width", "0px")
    .remove();
}
    
function render() {
  let length = Math.random() * 10;
  let data = [];
  for (let i = 0; i < length; ++i) {
  	data.push(Math.floor(Math.random() * 50));
  }
  console.log(data);
  update(data);

	setTimeout(render, 1000);
}
render();