puzzler10/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of a simple bar chart. Most beginners to d3 will build one of these charts at some point.
See http://www.puzzlr.org/?p=25 for the thought process behind this graph.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<style>
body {
 font: 16px sans-serif;
font-weight: bold;
}

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: purple;
}

.axis {
  font: 10px sans-serif;
}

.axis path, /* path refers to a line */
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


.x.axis path {
  display: none;
}
.title {
	font: 20px sans-serif;
	font-weight: bold;
}


/* tooltip CSS */

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
</head>
<body>
<script>
var margin = {
	top: 30,
	left: 65,
	right: 20,
	bottom: 50
}
height = 400 - margin.top - margin.bottom
width = 600 - margin.left - margin.right

var svg = d3.select("body").append("svg")
			.attr("height", height + margin.top + margin.bottom)
			.attr("width", width + margin.left + margin.right)
			.append("g") //investigate the effects of removing this
   			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//xAxis
var xScale = d3.scale.ordinal()
		.rangeRoundBands([width,0], .1);

var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom");

var yScale = d3.scale.linear()
		.range([height,0])

var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left")
		//we use Tickformat to round our high numbers accordingly
		.tickFormat(function(d) {
			if ( (d/100000000) >= 1 ) {
				d = d/1000000000
			}
			return d;
		});
var tip = d3.tip()
		.attr("class","d3-tip")
		.html(function (d) {
			return "<strong>% of World Pop:</strong> <span style='color:red'>" + d.Penetration + "</span>";
		});

svg.call(tip);

d3.csv("internet_users.csv",type,  function(data) {
	xScale.domain(data.map(function(d) {return d.Year;}));
	yScale.domain([0, d3.max(data, function(d) { return +d["Internet Users"]; } )]);

	//xAxis
	svg.append("g")
		.attr("class","x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis)
		.selectAll("text")
			.style("text-anchor", "end")
			.attr("dx", "-.8em")
			.attr("dy", ".15em")
			.attr("transform", "rotate(-35)");
	//yAxis
	svg.append("g")
		.attr("class","y axis")
		.call(yAxis);

	//x axis label
	svg.append("text")
		.attr("x", width/2)
		.attr("y", height + margin.bottom)
		.text("Year");

	//y axis label
	svg.append("text")
        .attr("transform", "rotate(-90)")
		//NOTE - we actually rotate our reference point by 90 degrees
		//http://www.d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html gives more detail
	.attr("y", 0 - margin.left)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Number of Users (billions)");

	//title
	svg.append("g")
	.attr("class","title")
	.append("text")
	.attr("x", width/2)
	.attr("y", (margin.top / 2))
	.attr("text-anchor", "middle")
	.text("Internet users over time")

	svg.selectAll(".bar")
	.data(data)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", function(d) {return xScale(d.Year);})
	.attr("y", function(d) {return yScale(d["Internet Users"]); })
	.attr("width",xScale.rangeBand())
	.attr("height", function (d) {return height - yScale(d["Internet Users"]);  })
	//show and hide tooltip
	.on("mouseover", tip.show)
	.on("mouseout", tip.hide) ;
});
function type(d) {
		d.Penetration = d.Penetration;
		return d;
	}
</script>
</body>
</html>

## internet_users.csv

          
            Year
            Internet Users
            Penetration
            World
Population
            Non-Users
(Internetless)
            1Y User
Change
            1Y User 
Change
            World Pop.
Change

            
              2016
              3424971237
              46.10%
              7432663275
              4007692038
              7.50%
              238975082
              1.13%

            
              2015
              3185996155
              43.40%
              7349472099
              4163475944
              7.80%
              229610586
              1.15%

            
              2014
              2956385569
              40.70%
              7265785946
              4309400377
              8.40%
              227957462
              1.17%

            
              2013
              2728428107
              38%
              7181715139
              4453287032
              9.40%
              233691859
              1.19%

            
              2012
              2494736248
              35.10%
              7097500453
              4602764205
              11.80%
              262778889
              1.20%

            
              2011
              2231957359
              31.80%
              7013427052
              4781469693
              10.30%
              208754385
              1.21%

            
              2010
              2023202974
              29.20%
              6929725043
              4906522069
              14.50%
              256799160
              1.22%

            
              2009
              1766403814
              25.80%
              6846479521
              5080075707
              12.10%
              191336294
              1.22%

            
              2008
              1575067520
              23.30%
              6763732879
              5188665359
              14.70%
              201840532
              1.23%

            
              2007
              1373226988
              20.60%
              6681607320
              5308380332
              18.10%
              210310170
              1.23%

            
              2006
              1162916818
              17.60%
              6600220247
              5437303429
              12.90%
              132815529
              1.24%

            
              2005
              1030101289
              15.80%
              6519635850
              5489534561
              12.80%
              116773518
              1.24%

            
              2004
              913327771
              14.20%
              6439842408
              5526514637
              16.90%
              131891788
              1.24%

            
              2003
              781435983
              12.30%
              6360764684
              5579328701
              17.50%
              116370969
              1.25%

            
              2002
              665065014
              10.60%
              6282301767
              5617236753
              32.40%
              162772769
              1.26%

            
              2001
              502292245
              8.10%
              6204310739
              5702018494
              21.10%
              87497288
              1.27%

            
              2000
              414794957
              6.80%
              6126622121
              5711827164
              47.30%
              133257305
              1.28%

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<style>
	body {
	font: 16px sans-serif;
	font-weight: bold;
	}

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: purple;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis path, /* path refers to a line */
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}


	.x.axis path {
	display: none;
	}
	.title {
	font: 20px sans-serif;
	font-weight: bold;
	}


	/* tooltip CSS */

	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}
	</style>
	</head>
	<body>
	<script>
	var margin = {
	top: 30,
	left: 65,
	right: 20,
	bottom: 50
	}
	height = 400 - margin.top - margin.bottom
	width = 600 - margin.left - margin.right

	var svg = d3.select("body").append("svg")
	.attr("height", height + margin.top + margin.bottom)
	.attr("width", width + margin.left + margin.right)
	.append("g") //investigate the effects of removing this
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	//xAxis
	var xScale = d3.scale.ordinal()
	.rangeRoundBands([width,0], .1);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	var yScale = d3.scale.linear()
	.range([height,0])

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	//we use Tickformat to round our high numbers accordingly
	.tickFormat(function(d) {
	if ( (d/100000000) >= 1 ) {
	d = d/1000000000
	}
	return d;
	});
	var tip = d3.tip()
	.attr("class","d3-tip")
	.html(function (d) {
	return "<strong>% of World Pop:</strong> <span style='color:red'>" + d.Penetration + "</span>";
	});

	svg.call(tip);

	d3.csv("internet_users.csv",type, function(data) {
	xScale.domain(data.map(function(d) {return d.Year;}));
	yScale.domain([0, d3.max(data, function(d) { return +d["Internet Users"]; } )]);

	//xAxis
	svg.append("g")
	.attr("class","x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.style("text-anchor", "end")
	.attr("dx", "-.8em")
	.attr("dy", ".15em")
	.attr("transform", "rotate(-35)");
	//yAxis
	svg.append("g")
	.attr("class","y axis")
	.call(yAxis);

	//x axis label
	svg.append("text")
	.attr("x", width/2)
	.attr("y", height + margin.bottom)
	.text("Year");

	//y axis label
	svg.append("text")
	.attr("transform", "rotate(-90)")
	//NOTE - we actually rotate our reference point by 90 degrees
	//http://www.d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html gives more detail
	.attr("y", 0 - margin.left)
	.attr("x",0 - (height / 2))
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("Number of Users (billions)");

	//title
	svg.append("g")
	.attr("class","title")
	.append("text")
	.attr("x", width/2)
	.attr("y", (margin.top / 2))
	.attr("text-anchor", "middle")
	.text("Internet users over time")

	svg.selectAll(".bar")
	.data(data)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", function(d) {return xScale(d.Year);})
	.attr("y", function(d) {return yScale(d["Internet Users"]); })
	.attr("width",xScale.rangeBand())
	.attr("height", function (d) {return height - yScale(d["Internet Users"]); })
	//show and hide tooltip
	.on("mouseover", tip.show)
	.on("mouseout", tip.hide) ;
	});
	function type(d) {
	d.Penetration = d.Penetration;
	return d;
	}
	</script>
	</body>
	</html>
Year	Internet Users	Penetration	World Population	Non-Users (Internetless)	1Y User Change	1Y User Change	World Pop. Change
2016	3424971237	46.10%	7432663275	4007692038	7.50%	238975082	1.13%
2015	3185996155	43.40%	7349472099	4163475944	7.80%	229610586	1.15%
2014	2956385569	40.70%	7265785946	4309400377	8.40%	227957462	1.17%
2013	2728428107	38%	7181715139	4453287032	9.40%	233691859	1.19%
2012	2494736248	35.10%	7097500453	4602764205	11.80%	262778889	1.20%
2011	2231957359	31.80%	7013427052	4781469693	10.30%	208754385	1.21%
2010	2023202974	29.20%	6929725043	4906522069	14.50%	256799160	1.22%
2009	1766403814	25.80%	6846479521	5080075707	12.10%	191336294	1.22%
2008	1575067520	23.30%	6763732879	5188665359	14.70%	201840532	1.23%
2007	1373226988	20.60%	6681607320	5308380332	18.10%	210310170	1.23%
2006	1162916818	17.60%	6600220247	5437303429	12.90%	132815529	1.24%
2005	1030101289	15.80%	6519635850	5489534561	12.80%	116773518	1.24%
2004	913327771	14.20%	6439842408	5526514637	16.90%	131891788	1.24%
2003	781435983	12.30%	6360764684	5579328701	17.50%	116370969	1.25%
2002	665065014	10.60%	6282301767	5617236753	32.40%	162772769	1.26%
2001	502292245	8.10%	6204310739	5702018494	21.10%	87497288	1.27%
2000	414794957	6.80%	6126622121	5711827164	47.30%	133257305	1.28%