Last active
October 20, 2020 14:44
-
-
Save widged/a7c94665f28ed963ae214dd8800e864a to your computer and use it in GitHub Desktop.
Histogram of probabilities
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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