| license: mit |
Built with blockbuilder.org
The dataset is about the Internet user number of different regions of world from 1990 to 2015. By mouse hovering, the corresponding year and Internet user number will show up interactively.
The dataset is from Our World in Data
This visualization was:
(1) forked from Curran Kelleher's block: Stylized Scatter Plot with Color Legend
(2) forked from Q-Zhao's block: Internet user change by region
(3) forked from Will's block: D3 Mouse Events
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
| <title>Internet user change by region</title> | |
| <style> | |
| body { | |
| margin: 0px; | |
| } | |
| .domain { | |
| display: none; | |
| } | |
| .tick line { | |
| stroke: #C0C0BB; | |
| } | |
| .tick text, .legendCells text { | |
| fill: #8E8883; | |
| font-size: 10pt; | |
| font-family: sans-serif; | |
| } | |
| .axis-label, .legend-label { | |
| fill: #635F5D; | |
| font-size: 20pt; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| const xValue = d => d['Year']; | |
| const xLabel = 'Year'; | |
| const yValue = d => d['Internet Users by World Region']; | |
| const yLabel = 'Internet Users (millions)'; | |
| const colorValue = d => d['Entity']; | |
| const colorLabel = 'Countries'; | |
| const margin = { left: 120, right: 300, top: 20, bottom: 120 }; | |
| const svg = d3.select('svg'); | |
| const width = svg.attr('width'); | |
| const height = svg.attr('height'); | |
| const innerWidth = width - margin.left - margin.right; | |
| const innerHeight = height - margin.top - margin.bottom; | |
| var radius = 5; | |
| const g = svg.append('g') | |
| .attr('transform', `translate(${margin.left},${margin.top})`); | |
| const xAxisG = g.append('g') | |
| .attr('transform', `translate(0, ${innerHeight})`); | |
| const yAxisG = g.append('g'); | |
| const colorLegendG = g.append('g') | |
| .attr('transform', `translate(${innerWidth + 60}, 150)`); | |
| xAxisG.append('text') | |
| .attr('class', 'axis-label') | |
| .attr('x', innerWidth / 2) | |
| .attr('y', 60) | |
| .text(xLabel); | |
| yAxisG.append('text') | |
| .attr('class', 'axis-label') | |
| .attr('x', -innerHeight / 2) | |
| .attr('y', -60) | |
| .attr('transform', `rotate(-90)`) | |
| .style('text-anchor', 'middle') | |
| .text(yLabel); | |
| colorLegendG.append('text') | |
| .attr('class', 'legend-label') | |
| .attr('x', -30) | |
| .attr('y', -40) | |
| .text(colorLabel); | |
| const xScale = d3.scaleLinear(); | |
| const yScale = d3.scaleLinear(); | |
| const colorScale = d3.scaleOrdinal() | |
| .range(d3.schemeCategory10); | |
| const xAxis = d3.axisBottom() | |
| .scale(xScale) | |
| .tickPadding(15) | |
| .tickSize(-innerHeight) | |
| .tickFormat(d3.format("d")); | |
| const yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| .ticks(8) | |
| .tickPadding(15) | |
| .tickSize(-innerWidth) | |
| .tickFormat(d3.format("d")); | |
| const colorLegend = d3.legendColor() | |
| .scale(colorScale) | |
| .shape('circle') | |
| const row = d => { | |
| d['Year'] = +d['Year']; | |
| d['Internet Users by World Region'] = +d['Internet Users by World Region']/1000000; | |
| return d; | |
| }; | |
| d3.csv('internet-users-by-world-region.csv', row, data => { | |
| xScale | |
| .domain(d3.extent(data, xValue)) | |
| .range([0, innerWidth]) | |
| .nice(); | |
| yScale | |
| .domain(d3.extent(data, yValue)) | |
| .range([innerHeight, 0]) | |
| .nice(); | |
| g.selectAll('circle').data(data) | |
| .enter() | |
| .append('circle') | |
| .attr('cx', d => xScale(xValue(d))) | |
| .attr('cy', d => yScale(yValue(d))) | |
| .attr('fill', d => colorScale(colorValue(d))) | |
| .attr('fill-opacity', 0.8) | |
| .attr('r', radius) | |
| .on("mouseover", handleMouseOver) | |
| .on("mouseout",handleMouseOut); | |
| xAxisG.call(xAxis); | |
| yAxisG.call(yAxis); | |
| colorLegendG.call(colorLegend) | |
| .selectAll('.cell text') | |
| .attr('dy', '0.1em'); | |
| }); | |
| function handleMouseOver(d, i){ | |
| d3.select(this).attrs({ | |
| r: radius * 2 | |
| }); | |
| // Specify where to put label of text | |
| g.append("text").attrs({ | |
| id: "id" + | |
| d['Year'] + | |
| "-" + | |
| Math.round(d['Internet Users by World Region']) + | |
| "-" + | |
| i, | |
| x: function() { return xScale(d['Year']) - 300; }, | |
| y: function() { return yScale(d['Internet Users by World Region']) - 15; }, | |
| fill: colorScale(colorValue(d)) | |
| }) | |
| .text(function() { | |
| return ["(" + d['Entity'] + '; Year ' + d['Year'] + '; Users ' + Math.round(d['Internet Users by World Region']) + " millions)"]; | |
| }); | |
| } | |
| function handleMouseOut(d, i) { | |
| d3.select(this).attrs({ | |
| r: radius | |
| }); | |
| d3.select("#id" + | |
| d['Year'] + | |
| "-" + | |
| Math.round(d['Internet Users by World Region']) + | |
| "-" + | |
| i) | |
| .remove(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
| Entity | Code | Year | Internet Users by World Region | |
|---|---|---|---|---|
| East Asia & Pacific | 1990 | 132691.59 | ||
| East Asia & Pacific | 1993 | 1501300.6 | ||
| East Asia & Pacific | 1994 | 2250131.3 | ||
| East Asia & Pacific | 1995 | 4065725.3 | ||
| East Asia & Pacific | 1996 | 9121098 | ||
| East Asia & Pacific | 1997 | 21433646 | ||
| East Asia & Pacific | 1998 | 37775384 | ||
| East Asia & Pacific | 1999 | 69031400 | ||
| East Asia & Pacific | 2000 | 114411096 | ||
| East Asia & Pacific | 2001 | 149704016 | ||
| East Asia & Pacific | 2002 | 187232864 | ||
| East Asia & Pacific | 2003 | 221344672 | ||
| East Asia & Pacific | 2004 | 266393472 | ||
| East Asia & Pacific | 2005 | 312472896 | ||
| East Asia & Pacific | 2006 | 356616928 | ||
| East Asia & Pacific | 2007 | 448706208 | ||
| East Asia & Pacific | 2008 | 549420416 | ||
| East Asia & Pacific | 2009 | 646374720 | ||
| East Asia & Pacific | 2010 | 754627776 | ||
| East Asia & Pacific | 2011 | 829140032 | ||
| East Asia & Pacific | 2012 | 910465856 | ||
| East Asia & Pacific | 2013 | 994101440 | ||
| East Asia & Pacific | 2014 | 1058220032 | ||
| East Asia & Pacific | 2015 | 1135598208 | ||
| Europe & Central Asia | 1990 | 405516.66 | ||
| Europe & Central Asia | 1992 | 2230605.8 | ||
| Europe & Central Asia | 1993 | 2709031.3 | ||
| Europe & Central Asia | 1994 | 4826030.5 | ||
| Europe & Central Asia | 1995 | 8764860 | ||
| Europe & Central Asia | 1996 | 15796067 | ||
| Europe & Central Asia | 1997 | 28855642 | ||
| Europe & Central Asia | 1998 | 46741868 | ||
| Europe & Central Asia | 1999 | 79586128 | ||
| Europe & Central Asia | 2000 | 113651216 | ||
| Europe & Central Asia | 2001 | 141667168 | ||
| Europe & Central Asia | 2002 | 199505616 | ||
| Europe & Central Asia | 2003 | 246049616 | ||
| Europe & Central Asia | 2004 | 281550304 | ||
| Europe & Central Asia | 2005 | 307425376 | ||
| Europe & Central Asia | 2006 | 333382080 | ||
| Europe & Central Asia | 2007 | 383639584 | ||
| Europe & Central Asia | 2008 | 417656992 | ||
| Europe & Central Asia | 2009 | 447800928 | ||
| Europe & Central Asia | 2010 | 498933824 | ||
| Europe & Central Asia | 2011 | 525517184 | ||
| Europe & Central Asia | 2012 | 568226496 | ||
| Europe & Central Asia | 2013 | 597322112 | ||
| Europe & Central Asia | 2014 | 628357376 | ||
| Europe & Central Asia | 2015 | 651396608 | ||
| Latin America & Caribbean | 1992 | 63254.625 | ||
| Latin America & Caribbean | 1993 | 140654.11 | ||
| Latin America & Caribbean | 1994 | 239488.78 | ||
| Latin America & Caribbean | 1995 | 535404.94 | ||
| Latin America & Caribbean | 1996 | 1526337.3 | ||
| Latin America & Caribbean | 1997 | 3062660 | ||
| Latin America & Caribbean | 1998 | 6275913 | ||
| Latin America & Caribbean | 1999 | 10636173 | ||
| Latin America & Caribbean | 2000 | 20529908 | ||
| Latin America & Caribbean | 2001 | 30145118 | ||
| Latin America & Caribbean | 2002 | 48072228 | ||
| Latin America & Caribbean | 2003 | 61881540 | ||
| Latin America & Caribbean | 2004 | 80010728 | ||
| Latin America & Caribbean | 2005 | 93593520 | ||
| Latin America & Caribbean | 2006 | 118301200 | ||
| Latin America & Caribbean | 2007 | 136830656 | ||
| Latin America & Caribbean | 2008 | 154885088 | ||
| Latin America & Caribbean | 2009 | 183600208 | ||
| Latin America & Caribbean | 2010 | 207803088 | ||
| Latin America & Caribbean | 2011 | 238327424 | ||
| Latin America & Caribbean | 2012 | 264581888 | ||
| Latin America & Caribbean | 2013 | 286630816 | ||
| Latin America & Caribbean | 2014 | 305474304 | ||
| Latin America & Caribbean | 2015 | 344699296 | ||
| Middle East & North Africa | 1990 | 4989.8101 | ||
| Middle East & North Africa | 1995 | 105850.01 | ||
| Middle East & North Africa | 1996 | 245630.16 | ||
| Middle East & North Africa | 1997 | 676369.25 | ||
| Middle East & North Africa | 1998 | 1476618.6 | ||
| Middle East & North Africa | 1999 | 2840093.3 | ||
| Middle East & North Africa | 2000 | 5335063.5 | ||
| Middle East & North Africa | 2001 | 6669439 | ||
| Middle East & North Africa | 2002 | 12293885 | ||
| Middle East & North Africa | 2003 | 17099494 | ||
| Middle East & North Africa | 2004 | 28379684 | ||
| Middle East & North Africa | 2005 | 33809724 | ||
| Middle East & North Africa | 2006 | 41735356 | ||
| Middle East & North Africa | 2007 | 54381972 | ||
| Middle East & North Africa | 2008 | 69223744 | ||
| Middle East & North Africa | 2009 | 81528168 | ||
| Middle East & North Africa | 2010 | 95786264 | ||
| Middle East & North Africa | 2011 | 108924224 | ||
| Middle East & North Africa | 2012 | 125402784 | ||
| Middle East & North Africa | 2013 | 141691952 | ||
| Middle East & North Africa | 2014 | 165313744 | ||
| Middle East & North Africa | 2015 | 185348464 | ||
| North America | 1990 | 2061729.8 | ||
| North America | 1991 | 3107251.3 | ||
| North America | 1992 | 4688757 | ||
| North America | 1993 | 6251414 | ||
| North America | 1994 | 13497925 | ||
| North America | 1995 | 25834064 | ||
| North America | 1996 | 46273300 | ||
| North America | 1997 | 63492716 | ||
| North America | 1998 | 90580024 | ||
| North America | 1999 | 111092336 | ||
| North America | 2000 | 137339792 | ||
| North America | 2001 | 158568848 | ||
| North America | 2002 | 188422048 | ||
| North America | 2003 | 199351360 | ||
| North America | 2004 | 210753088 | ||
| North America | 2005 | 224042144 | ||
| North America | 2006 | 229295552 | ||
| North America | 2007 | 250048544 | ||
| North America | 2008 | 250578896 | ||
| North America | 2009 | 244851552 | ||
| North America | 2010 | 249116528 | ||
| North America | 2011 | 245896880 | ||
| North America | 2012 | 263516048 | ||
| North America | 2013 | 256106192 | ||
| North America | 2014 | 263777120 | ||
| North America | 2015 | 271351008 | ||
| South Asia | 1992 | 1289.1177 | ||
| South Asia | 1993 | 2580.4053 | ||
| South Asia | 1994 | 13306.033 | ||
| South Asia | 1995 | 282905.75 | ||
| South Asia | 1996 | 523995.63 | ||
| South Asia | 1997 | 786485.75 | ||
| South Asia | 1998 | 1562359.3 | ||
| South Asia | 1999 | 3079257.5 | ||
| South Asia | 2000 | 6568352 | ||
| South Asia | 2001 | 9364691 | ||
| South Asia | 2002 | 21009870 | ||
| South Asia | 2003 | 26939710 | ||
| South Asia | 2004 | 32468616 | ||
| South Asia | 2005 | 38477012 | ||
| South Asia | 2006 | 45792896 | ||
| South Asia | 2007 | 61932816 | ||
| South Asia | 2008 | 69880656 | ||
| South Asia | 2009 | 82794544 | ||
| South Asia | 2010 | 117372184 | ||
| South Asia | 2011 | 155163472 | ||
| South Asia | 2012 | 192828384 | ||
| South Asia | 2013 | 233430464 | ||
| South Asia | 2014 | 331627840 | ||
| South Asia | 2015 | 412109408 | ||
| Sub-Saharan Africa | 1996 | 412235.94 | ||
| Sub-Saharan Africa | 1997 | 793491.19 | ||
| Sub-Saharan Africa | 1998 | 1480821.5 | ||
| Sub-Saharan Africa | 1999 | 2338062.3 | ||
| Sub-Saharan Africa | 2000 | 3346164.3 | ||
| Sub-Saharan Africa | 2001 | 4404465.5 | ||
| Sub-Saharan Africa | 2002 | 5836959 | ||
| Sub-Saharan Africa | 2003 | 8017975.5 | ||
| Sub-Saharan Africa | 2004 | 11179489 | ||
| Sub-Saharan Africa | 2005 | 15588604 | ||
| Sub-Saharan Africa | 2006 | 22919702 | ||
| Sub-Saharan Africa | 2007 | 29542962 | ||
| Sub-Saharan Africa | 2008 | 46463908 | ||
| Sub-Saharan Africa | 2009 | 58850300 | ||
| Sub-Saharan Africa | 2010 | 85416360 | ||
| Sub-Saharan Africa | 2011 | 108736208 | ||
| Sub-Saharan Africa | 2012 | 134855712 | ||
| Sub-Saharan Africa | 2013 | 162368064 | ||
| Sub-Saharan Africa | 2014 | 190740752 | ||
| Sub-Saharan Africa | 2015 | 224100224 |
