j450h1/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #Original Visualization

This visualization comes from Canada's Liberal Party Website. The message is:
Between 1981 and 2011, Canada’s Real GDP grew by 115%. At the same time the real median income of Canadian families only grew by 15%.
However, Canada's Real GDP Chart's scale is exaggerated as it appears to be 150% growth vs the 15% median income growth. You can see that the Real GDP arrow goes up to the 3rd line (each line is approximately 45-50% since you can fit 3 of those smaller 15% arrows in it (15*3 = 45).

  
## index.html
<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
  <script type="text/javascript">
/* Write JavaScript here */
    var svg = dimple.newSvg("body", 800, 500);
    var data = [{
        "1981-2011": "Canada's Real GDP",
        "Percentage Increase": 115
    }, {
        "1981-2011": "Household Income",
        "Percentage Increase": 15
    }];
    var chart = new dimple.chart(svg, data);
    var x = chart.addCategoryAxis("x", "1981-2011");
    var y = chart.addMeasureAxis("y", "Percentage Increase");
    var s = chart.addSeries("1981-2011", dimple.plot.bar);
    //Canada's colour
    chart.assignColor("Canada's Real GDP", "#d71920");
    //Same colour used in original bar plot
    chart.assignColor("Household Income", "#57585a");
    //yaxis.fontSize('auto');
    chart.draw();
		//Canada's GDP Label
  	svg.append("text")
                .attr("x", chart._xPixels() + 160)
                .attr("y", chart._yPixels() + 200)
                .style("text-anchor", "middle")
                .style("font-family", "sans-serif")
                .style("font-size", "150%")
    		.style("fill", "white")
                .text("115 % ")
    //Household Income GDP Label
  	svg.append("text")
                .attr("x", chart._xPixels() + 480)
                .attr("y", chart._yPixels() + 385)
                .style("text-anchor", "middle")
                .style("font-family", "sans-serif")
                .style("font-size", "150%")
    		.style("fill","white")
                .text("15 % ")
  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
	</head>
	<body>
	<script type="text/javascript">
	/* Write JavaScript here */
	var svg = dimple.newSvg("body", 800, 500);
	var data = [{
	"1981-2011": "Canada's Real GDP",
	"Percentage Increase": 115
	}, {
	"1981-2011": "Household Income",
	"Percentage Increase": 15
	}];
	var chart = new dimple.chart(svg, data);
	var x = chart.addCategoryAxis("x", "1981-2011");
	var y = chart.addMeasureAxis("y", "Percentage Increase");
	var s = chart.addSeries("1981-2011", dimple.plot.bar);
	//Canada's colour
	chart.assignColor("Canada's Real GDP", "#d71920");
	//Same colour used in original bar plot
	chart.assignColor("Household Income", "#57585a");
	//yaxis.fontSize('auto');
	chart.draw();
	//Canada's GDP Label
	svg.append("text")
	.attr("x", chart._xPixels() + 160)
	.attr("y", chart._yPixels() + 200)
	.style("text-anchor", "middle")
	.style("font-family", "sans-serif")
	.style("font-size", "150%")
	.style("fill", "white")
	.text("115 % ")
	//Household Income GDP Label
	svg.append("text")
	.attr("x", chart._xPixels() + 480)
	.attr("y", chart._yPixels() + 385)
	.style("text-anchor", "middle")
	.style("font-family", "sans-serif")
	.style("font-size", "150%")
	.style("fill","white")
	.text("15 % ")
	</script>
	</body>