stianSjoli/index.html

## index.html
<!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>
	<!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>