JSFiddle - React, Tailwind, and code Playground

by Shang-De You

JavaScript

var rand = d3.random.normal(170,10)

var dataSet = []

for(var i = 0; i<100; i++){
	dataSet.push(rand())
}

//console.log(dataSet)


var binNum = 10
var rangeMin = 130
var rangeMax = 210

var histogram = d3.layout.histogram()
	.range([rangeMin, rangeMax])
  .bins(binNum)
  .frequency(true)
  
var histogramData = histogram(dataSet)
console.log(histogramData)


var xAxisWidth = 450
var xTicks = histogramData.map(function(d){
	return d.x
})

var xScale = d3.scale.ordinal()
	.domain(xTicks)
  .rangeRoundBands([0, xAxisWidth], 0.1)
  
var padding = {
	top: 30,
  right: 30,
  bottom: 30,
  left: 30
}

var width = 600
var height = 400
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)

var xAxis = d3.svg.axis()
	.scale(xScale)
  .orient("bottom")
  .tickFormat(d3.format(".0f"))

svg.append("g")
	.attr("class", "axis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis)
  
var yAxisWidth = 450
var yScale = d3.scale.linear()
	.domain([d3.min(histogramData, function(d){
  	return d.y
  }),
  	d3.max(histogramData, function(d){
    	return d.y
    })
  ])
  .range([5, yAxisWidth])
  
var gRect = svg.append("g")
	.attr("transform", "translate(" + padding.left + "," + (-padding.bottom) + ")")

gRect.selectAll("rect")
	.data(histogramData)
  .enter()
  .append("rect")
  .attr("class", "rect")
  .attr("x", function(d,i){
  	return xScale(d.x)
  })
  .attr("y", function(d,i){
  	return height - yScale(d.y)
  })
  .attr("width", function(d,i){
  	return xScale.rangeBand()
  })
  .attr("height", function(d){
  	return yScale(d.y)
  })