Skip to content

Instantly share code, notes, and snippets.

@widged
Last active October 20, 2020 14:44
Show Gist options
  • Save widged/a7c94665f28ed963ae214dd8800e864a to your computer and use it in GitHub Desktop.
Save widged/a7c94665f28ed963ae214dd8800e864a to your computer and use it in GitHub Desktop.
Histogram of probabilities
<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
let arrayOfNRand = (n, max) => { return Array(n).fill(0).map(d => Math.round(Math.random() * max)) }
const data = arrayOfNRand(1000, 20).map((s) => { return s === 0 ? 0 :
(arrayOfNRand(s, 1).reduce((acc,d) => { return acc + d}, 0) / s); }).filter(d => d !== 0)
// get the data
// X axis: scale and draw:
var x = d3.scaleLinear()
.domain([0, 1]) // can use this instead of 1000 to have the max of data: d3.max(data, function(d) { return +d })
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// set the parameters for the histogram
var histogram = d3.histogram()
.value(function(d) { return d; }) // I need to give the vector of value
.domain(x.domain()) // then the domain of the graphic
.thresholds(x.ticks(8)); // then the numbers of bins
// And apply this function to data to get the bins
var bins = histogram(data);
// Y axis: scale and draw:
var y = d3.scaleLinear()
.range([height, 0]);
y.domain([0, d3.max(bins, function(d) { return d.length; })]); // d3.hist has to be called before the Y axis obviously
svg.append("g")
.call(d3.axisLeft(y));
// append the bar rectangles to the svg element
svg.selectAll("rect")
.data(bins)
.enter()
.append("rect")
.attr("x", 1)
.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
.attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
.attr("height", function(d) { return height - y(d.length); })
.style("fill", "#69b3a2")
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment