markarios/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.tsv

          
            age
            population

            
              <5
              2704659

            
              5-13
              4499890

            
              14-17
              2159981

            
              18-24
              3853788

            
              25-44
              14106543

            
              45-64
              8819342

            
              ≥65
              612463

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
 <script src="https://d3js.org/d3.v4.0.0-alpha.4.min.js"></script>
</head>

<h1> FAIL: Despite trying to load d3.v4, the browser is still using 3.5.5</h1>
<p> Let's try making a pie chart with D3.V4 and at the same time understand what's going behind the scenes. But first lets develop our data visualization vocabulary. </p>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Annulus2.svg/420px-Annulus2.svg.png" width = 20% height = 20%></img>
<canvas width = "960" height = "500"></canvas>

<body>
  <script>
//    Let's get the canvas object interface
   var canvas = document.querySelector("canvas"),
       context = canvas.getContext("2d")

//    Let's define some visual attributes needed for a circle and make sure our circle is centered.

   var width = canvas.width,
       height = canvas.height,
       radius = Math.min(width, height) / 2;

    context.translate(width / 2, height / 2);

// Now let's get some colors from http://colorbrewer2.org/ and since we're good designers we're going to choose a qualitive color scheme.

   var colors = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69'];

// Now let's define a mapping for our pie slices.

    var arc = d3.arc()
    	.outerRadius(radius - 10)
    	.innerRadius(0)
    	.context(context);

//     And since we're good designers we need to setup a map for the pie slice labels

    var labelArc = d3.arc()
    	.outerRadius(radius - 40)
   		.innerRadius(radius - 40)
   		.context(context)

 //     But this is great but we need angles to define pie slices. For that we'll use d3.pie. But the language here is a bit misleading. Is this really a pie? Nope, you pass it data and returns angles. Maybe it should have been called pieAngles? In any case let's use it. But there's a catch here. We need to tell this function how to access the data. We do this with something that is an accessor function.

    var pie = d3.pie()
    	.sort(null)
    	.value(function(d){ return d.populations; });

    var draw = function(error, data){
      if(error) throw error;

      console.log("hello console");

//       Let's get our angles
      var thetas = pie(data);

//       And for each data point we need to do something, namely draw our slices. And recall since we're using the canvas object we need to use the canvas interface to draw

      thetas.forEach( function(d, i){
        context.beginPath();
        arc(d);
        context.fillStyle = colors[i];
        context.fill();
      })

//       But it also may be nice to add a stroke to visually seperate each slice

      context.beginPath();
      thetas.forEach(arc);
      context.strokeStyle = "White";
      context.stroke();

//       We should alse give our text some labels some color

      context.textAlign = "center";
      context.textBaseline = "middle";
      context.fillStyle = "White";

      thetas.forEach(function(d){
        var c = labelArc.centroid(d);
        context.fillText(d.data.age, c[0], c[1]);
      })


    }

    var parseData = function(d){
      d.population = +d.population;
      return d}


    // Now let's get our data.

    d3.requestTsv("data.tsv", parseData(data), draw(error,data));


  </script>
</body>
	age	population
	<5	2704659
	5-13	4499890
	14-17	2159981
	18-24	3853788
	25-44	14106543
	45-64	8819342
	≥65	612463
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.0.0-alpha.4.min.js"></script>
	</head>

	<h1> FAIL: Despite trying to load d3.v4, the browser is still using 3.5.5</h1>
	<p> Let's try making a pie chart with D3.V4 and at the same time understand what's going behind the scenes. But first lets develop our data visualization vocabulary. </p>

	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Annulus2.svg/420px-Annulus2.svg.png" width = 20% height = 20%></img>
	<canvas width = "960" height = "500"></canvas>

	<body>
	<script>
	// Let's get the canvas object interface
	var canvas = document.querySelector("canvas"),
	context = canvas.getContext("2d")

	// Let's define some visual attributes needed for a circle and make sure our circle is centered.

	var width = canvas.width,
	height = canvas.height,
	radius = Math.min(width, height) / 2;

	context.translate(width / 2, height / 2);

	// Now let's get some colors from http://colorbrewer2.org/ and since we're good designers we're going to choose a qualitive color scheme.

	var colors = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69'];

	// Now let's define a mapping for our pie slices.

	var arc = d3.arc()
	.outerRadius(radius - 10)
	.innerRadius(0)
	.context(context);

	// And since we're good designers we need to setup a map for the pie slice labels

	var labelArc = d3.arc()
	.outerRadius(radius - 40)
	.innerRadius(radius - 40)
	.context(context)

	// But this is great but we need angles to define pie slices. For that we'll use d3.pie. But the language here is a bit misleading. Is this really a pie? Nope, you pass it data and returns angles. Maybe it should have been called pieAngles? In any case let's use it. But there's a catch here. We need to tell this function how to access the data. We do this with something that is an accessor function.

	var pie = d3.pie()
	.sort(null)
	.value(function(d){ return d.populations; });

	var draw = function(error, data){
	if(error) throw error;

	console.log("hello console");

	// Let's get our angles
	var thetas = pie(data);

	// And for each data point we need to do something, namely draw our slices. And recall since we're using the canvas object we need to use the canvas interface to draw

	thetas.forEach( function(d, i){
	context.beginPath();
	arc(d);
	context.fillStyle = colors[i];
	context.fill();
	})

	// But it also may be nice to add a stroke to visually seperate each slice

	context.beginPath();
	thetas.forEach(arc);
	context.strokeStyle = "White";
	context.stroke();

	// We should alse give our text some labels some color

	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = "White";

	thetas.forEach(function(d){
	var c = labelArc.centroid(d);
	context.fillText(d.data.age, c[0], c[1]);
	})


	}

	var parseData = function(d){
	d.population = +d.population;
	return d}


	// Now let's get our data.

	d3.requestTsv("data.tsv", parseData(data), draw(error,data));



	</script>
	</body>