Created
October 21, 2018 14:30
-
-
Save stianSjoli/4b18461b1454e353c8702f87c6fadfa9 to your computer and use it in GitHub Desktop.
visualisering av 100 terningkast
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| </head> | |
| <body> | |
| </body> | |
| <style> | |
| .axis { | |
| font-size:14px | |
| } | |
| </style> | |
| <script> | |
| var height = 500; | |
| var width = 800; | |
| var padding = 100; | |
| var maxThrows = 100; | |
| function throwDice(){ | |
| var min = 1; | |
| var max= 7; | |
| return Math.floor(Math.random() * (max - min) + min); | |
| } | |
| var data = []; | |
| for(var i= 0; i < maxThrows; i++) { | |
| data.push(throwDice()); | |
| }; | |
| var xScale = d3.scaleLinear() | |
| .domain([1,maxThrows]) | |
| .nice() | |
| .range([padding,width - padding]) | |
| var yScale = d3.scaleLinear() | |
| .domain([6,0]) | |
| .range([padding, height-padding]) | |
| var xAxis = d3.axisBottom(xScale) | |
| var yAxis = d3.axisLeft(yScale) | |
| .ticks(6) | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width) | |
| var xAxisG = svg.append("g") | |
| .attr("transform", "translate(0" + "," + (height -padding + 2) + ")") | |
| .call(xAxis) | |
| xAxisG.append("text") | |
| .attr("x", width - 65) | |
| .attr("y", 0) | |
| .text("antall kast") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "14px") | |
| .attr("fill", "black"); | |
| var yAxisG = svg.append("g") | |
| .attr("transform", "translate(100,0)") | |
| .call(yAxis) | |
| yAxisG.append("text") | |
| .attr("x", 10) | |
| .attr("y", 85) | |
| .text("Verdi") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "14px") | |
| .attr("fill", "black"); | |
| var bars = svg.selectAll(".bar") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("transform", "translate(0,0)") | |
| .classed("bar", true); | |
| bars.append("rect") | |
| .attr("x", function(d, i){ | |
| return 2 + xScale(i); | |
| }) | |
| .attr("y", function(d){ | |
| return yScale(d); | |
| }) | |
| .attr("height", function(d){ | |
| return (height -padding) - yScale(d); | |
| }) | |
| .attr("width", function(d){ | |
| return 4; | |
| }) | |
| .attr("stroke", "black") | |
| .attr("stroke-width", 0.3) | |
| .attr("fill", function(d){ | |
| return "#F1A94E"; | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment