thulse/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from thulse's block: [Unlisted] Practice Bar Chart

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content= "width=device-width">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <title> Top Internet Countries Visualization</title>
	<style>
    .tick text{
      fill: #8E8883;
      font-size: 12pt;
    	font-family: sans-serif}
    .axis-label{
      fill: black;
      font-size: 30pt;
      font-family:sans-serif;
    }
  </style>
</head>
<body>
  <svg width="960" height= "500"></svg>
  <script>

    const yValue = d=> d.country;
    const yLabel = 'Country';
    const xValue = d=> d.netUsers;
    const xLabel = 'Internet Users';

    const	margin = {
      left: 140,
      right: 80,
      top: 20,
      bottom: 70
    };

    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;


    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');


    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',-140)
//      .attr('transform', `rotate(-90)`)
//      .style('text-anchor','middle')
//      .text(yLabel);

    const yScale = d3.scaleBand()
    	.paddingInner(0.24)
    	.paddingOuter(0.2);
    const xScale = d3.scaleLinear();

    const xTicks = 10;
    const xAxis = d3.axisBottom()
        .scale(xScale)
    		.ticks(xTicks)
    		.tickFormat(d3.format('.0s'))
    		.tickSize(-innerHeight);

    const yAxis = d3.axisLeft()
        .scale(yScale)
    		.tickPadding(15)
    		.tickSize(-innerWidth);


    const row = d=>{
      const netUsersWithCommas = d['InternetUsers'];
      return{
        country: d['Country'],
        netUsers: +netUsersWithCommas.replace(/,/g,'')
      };

    };
    //const top5 = data=>data.slice(0,5);

    d3.csv('topinternetcountries.csv', row, data => {
     xScale;

      yScale
      	.domain(data.map(yValue))
      	.range([innerHeight,0])

      ;

     xScale
          .domain([0, d3.max(data, xValue)])
          .range([0, innerWidth])
          .nice(xTicks);

      //colorScale.domain(data.map(colorValue).reverse());


      g.selectAll('rect').data(data)
      	.enter().append('rect')
      		.attr('x',0)
      		.attr('y', d => yScale(yValue(d)))
      		.attr('width', d => xScale(xValue(d)))
      		.attr('height', d => yScale.bandwidth())
      		.attr('fill', "steelblue")
      		//.attr('fill-opacity', 1.0)
      ;


      xAxisG.call(xAxis)
      xAxisG.selectAll('.tick line').remove();
      yAxisG.call(yAxis);

    });

  </script>
</body>
</html>

## topinternetcountries.csv

          
            #
            Country
            Population
            InternetUsers
            Internet
            Growth
            Facebook

            
              1
              China
              1388232693.00
              738539792.00
              53.20%
              3182.40%
              1800000.00

            
              2
              India
              1342512706.00
              462124989.00
              34.40%
              9142.50%
              241000000.00

            
              3
              United States
              326474013.00
              286942362.00
              87.90%
              200.90%
              240000000.00

            
              4
              Brazil
              211243220.00
              139111185.00
              65.90%
              2682.20%
              139000000.00

            
              5
              Indonesia
              263510146.00
              132700000.00
              50.40%
              6535.00%
              126000000.00

            
              6
              Japan
              126045211.00
              118453595.00
              94.00%
              151.60%
              26000000.00

            
              7
              Russia
              143375006.00
              109552842.00
              76.40%
              3434.00%
              12000000.00

            
              8
              Nigeria
              191835936.00
              91598757.00
              47.70%
              45699.40%
              16000000.00

            
              9
              Mexico
              130222815.00
              85000000.00
              65.30%
              3033.80%
              85000000.00

            
              10
              Bangladesh
              164827718.00
              73347000.00
              44.50%
              73247.00%
              21000000.00

            
              11
              Germany
              80636124.00
              72290285.00
              89.60%
              201.20%
              31000000.00

            
              12
              Vietnam
              95414640.00
              64000000.00
              67.10%
              31900.00%
              64000000.00

            
              13
              United Kingdom
              65511098.00
              62091419.00
              94.80%
              303.20%
              44000000.00

            
              14
              Philippines
              103796832.00
              57607242.00
              55.50%
              2780.40%
              69000000.00

            
              15
              Thailand
              68297547.00
              57000000.00
              83.50%
              2378.30%
              57000000.00

            
              16
              Iran
              80945718.00
              56700000.00
              70.00%
              22580.00%
              17200000.00

            
              17
              France
              64938716.00
              56367330.00
              86.80%
              563.10%
              33000000.00

            
              18
              Turkey
              80417526.00
              56000000.00
              69.60%
              2700.00%
              56000000.00

            
              19
              Italy
              59797978.00
              51836798.00
              86.70%
              292.70%
              30000000.00

            
              20
              Korea, South
              50704971.00
              47013649.00
              92.70%
              146.90%
              17000000.00
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content= "width=device-width">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<title> Top Internet Countries Visualization</title>
	<style>
	.tick text{
	fill: #8E8883;
	font-size: 12pt;
	font-family: sans-serif}
	.axis-label{
	fill: black;
	font-size: 30pt;
	font-family:sans-serif;
	}
	</style>
	</head>
	<body>
	<svg width="960" height= "500"></svg>
	<script>

	const yValue = d=> d.country;
	const yLabel = 'Country';
	const xValue = d=> d.netUsers;
	const xLabel = 'Internet Users';

	const margin = {
	left: 140,
	right: 80,
	top: 20,
	bottom: 70
	};

	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;


	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');


	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',-140)
	// .attr('transform', `rotate(-90)`)
	// .style('text-anchor','middle')
	// .text(yLabel);

	const yScale = d3.scaleBand()
	.paddingInner(0.24)
	.paddingOuter(0.2);
	const xScale = d3.scaleLinear();

	const xTicks = 10;
	const xAxis = d3.axisBottom()
	.scale(xScale)
	.ticks(xTicks)
	.tickFormat(d3.format('.0s'))
	.tickSize(-innerHeight);

	const yAxis = d3.axisLeft()
	.scale(yScale)
	.tickPadding(15)
	.tickSize(-innerWidth);




	const row = d=>{
	const netUsersWithCommas = d['InternetUsers'];
	return{
	country: d['Country'],
	netUsers: +netUsersWithCommas.replace(/,/g,'')
	};

	};
	//const top5 = data=>data.slice(0,5);

	d3.csv('topinternetcountries.csv', row, data => {
	xScale;

	yScale
	.domain(data.map(yValue))
	.range([innerHeight,0])

	;

	xScale
	.domain([0, d3.max(data, xValue)])
	.range([0, innerWidth])
	.nice(xTicks);

	//colorScale.domain(data.map(colorValue).reverse());



	g.selectAll('rect').data(data)
	.enter().append('rect')
	.attr('x',0)
	.attr('y', d => yScale(yValue(d)))
	.attr('width', d => xScale(xValue(d)))
	.attr('height', d => yScale.bandwidth())
	.attr('fill', "steelblue")
	//.attr('fill-opacity', 1.0)
	;


	xAxisG.call(xAxis)
	xAxisG.selectAll('.tick line').remove();
	yAxisG.call(yAxis);

	});

	</script>
	</body>
	</html>
#	Country	Population	InternetUsers	Internet	Growth	Facebook
1	China	1388232693.00	738539792.00	53.20%	3182.40%	1800000.00
2	India	1342512706.00	462124989.00	34.40%	9142.50%	241000000.00
3	United States	326474013.00	286942362.00	87.90%	200.90%	240000000.00
4	Brazil	211243220.00	139111185.00	65.90%	2682.20%	139000000.00
5	Indonesia	263510146.00	132700000.00	50.40%	6535.00%	126000000.00
6	Japan	126045211.00	118453595.00	94.00%	151.60%	26000000.00
7	Russia	143375006.00	109552842.00	76.40%	3434.00%	12000000.00
8	Nigeria	191835936.00	91598757.00	47.70%	45699.40%	16000000.00
9	Mexico	130222815.00	85000000.00	65.30%	3033.80%	85000000.00
10	Bangladesh	164827718.00	73347000.00	44.50%	73247.00%	21000000.00
11	Germany	80636124.00	72290285.00	89.60%	201.20%	31000000.00
12	Vietnam	95414640.00	64000000.00	67.10%	31900.00%	64000000.00
13	United Kingdom	65511098.00	62091419.00	94.80%	303.20%	44000000.00
14	Philippines	103796832.00	57607242.00	55.50%	2780.40%	69000000.00
15	Thailand	68297547.00	57000000.00	83.50%	2378.30%	57000000.00
16	Iran	80945718.00	56700000.00	70.00%	22580.00%	17200000.00
17	France	64938716.00	56367330.00	86.80%	563.10%	33000000.00
18	Turkey	80417526.00	56000000.00	69.60%	2700.00%	56000000.00
19	Italy	59797978.00	51836798.00	86.70%	292.70%	30000000.00
20	Korea, South	50704971.00	47013649.00	92.70%	146.90%	17000000.00