VI4

Chart 1) The first chart shows Internet users growth from 1995 till 2015. This chart is using line mark to show the bars with magnitude channel type and position on the same scale channel. Items are seperated by margins which makes them easily discriminable.

Chapter 2) The second chart shows a world population percentage for internet users in three time intervals. This chart is using magnitude as area(percentage of the area of the circle) and identity as color hue for each time interval which also maintains discriminability.

Chapter 3) The third chapter shows number of complaints received by different submission choices in different years. This chart is using line mark. It is an example of identity as spatial region, because each category is seperated by a vertical line to show number of complaints in different years. It is also using color hue to highlight different years. The number of complaints are easily discriminable by submission categories and for each category, they are sub-divided to years.

Tableau Charts:

R image

Dataset used:

http://www.internetworldstats.com/emarketing.htm
http://catalog.data.gov/dataset/consumer-complaint-database

<html>
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
    <style>
		.bar {
		  fill: steelblue;
		}

.axis text {
		  font: 9px sans-serif;
		}

.axis path,
		.axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}

.x.axis path {
		  display: none;
		}
		
		.arc text {
		  font: 10px sans-serif;
		  text-anchor: middle;
		}

.arc path {
		  stroke: #fff;
		}
		
		.legend {
			font-size: 12px;
		}
		.legend rect {
			stroke-width: 2;
		}
	</style>
  </head>
  <body>
    <div class="chart1">
      
    </div>
    <div class="chart2">
      
    </div>
    
    <script>
		var margin = {top: 20, right: 30, bottom: 80, left: 40},
			width = 960 - margin.left - margin.right,
			height = 400 - margin.top - margin.bottom;
			
		var x = d3.scale.ordinal()
			.rangeRoundBands([0, width], .2);

var y = d3.scale.linear()
			.range([height, 0]);
			
		var xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom");

var yAxis = d3.svg.axis()
			.scale(y)
			.orient("left")
			.tickFormat(d3.format("d"));
			
		var svg = d3.select(".chart1")
			.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height",  height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		
		d3.csv("InternetUsers.csv", type, function(error, data) {
			x.domain(data.map(function(d) { return d.date; }));
			y.domain([0, d3.max(data, function(d) { return d.noOfUsers; })]);
			 
			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(-65)");

svg.append("g")
			  .attr("class", "y axis")
			  .call(yAxis)
			.append("text")
			  .attr("transform", "rotate(-90)")
			  .attr("y", 6)
			  .attr("dy", ".71em")
			  .style("text-anchor", "end")
			  .text("No of Internet Users");
			
			svg.selectAll(".bar")
				.data(data)
				.enter().append("rect")
				.attr("class", "bar")
				.attr("x", function(d) { return x(d.date); })
				.attr("y", function(d) { return y(d.noOfUsers); })
				.attr("height", function(d) { return height - y(d.noOfUsers); })
				.attr("width", x.rangeBand());
		});
		
		function type(d) {
		  d.noOfUsers = +d.noOfUsers; // coerce to number
		  d.worldPercentage = +d.worldPercentage;
		  return d;
		}
		
		var radius = Math.min(width, height) / 2;
		
		var color = d3.scale.ordinal()
			.range(["orange", "blue", "red"]);
		
		var svg2 = d3.select(".chart2")
			.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height",  height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
			
		var arc = d3.svg.arc()
			.outerRadius(radius - 5)
			.innerRadius(75);
			
		var labelArc = d3.svg.arc()
			.outerRadius(radius - 40)
			.innerRadius(radius - 40);
			
		var pie = d3.layout.pie()
			.sort(null)
			.value(function(d) {
				return d.worldPercentage; 
			});
		
		d3.csv("InternetUsers.csv", type, function(error, data) {
			if (error) throw error;
			var pieData = [{date : '< 2000', worldPercentage: 0}, 
						{date : '2000-2009', worldPercentage: 0}, 
						{date: '2010-2015', worldPercentage: 0}];
			data.forEach(function(d, i) {
				var myYear = d.date.slice(d.date.length -5 ,d.date.length);
				if(myYear < 2000) {
					pieData[0].worldPercentage = d.worldPercentage;
				} else if (myYear >= 2000 && myYear < 2010) {
					pieData[1].worldPercentage = d.worldPercentage;
				} else {
					pieData[2].worldPercentage = d.worldPercentage;
				}
			});
			
			var g = svg2.selectAll(".arc")
				.data(pie(pieData))
				.enter().append("g")
				.attr("class", "arc");
			
			g.append("path")
				.attr("d", arc)
				.style("fill", function(d) { return color(d.data.date); });
			
			// g.append("text")
			// 	.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
			// 	.attr("dy", ".35em")
			// 	.text(function(d) { return d.data.worldPercentage + '%'; });
			var legendRectSize = 18;
			var legendSpacing = 4;
			
			var legend = svg2.selectAll('.legend')
			  .data(color.domain())
			  .enter()
			  .append('g')
			  .attr('class', 'legend')
			  .attr('transform', function(d, i) {
				var height = legendRectSize + legendSpacing;
				var offset =  height * color.domain().length / 2;
				var horz = -2 * legendRectSize;
				var vert = i * height - offset;
				return 'translate(' + horz + ',' + vert + ')';
			  });
			  
			legend.append('rect')
				  .attr('width', legendRectSize)
				  .attr('height', legendRectSize)
				  .style('fill', color)
				  .style('stroke', color);
				  
			legend.append('text')
			  .attr('x', legendRectSize + legendSpacing)
			  .attr('y', legendRectSize - legendSpacing)
			  .text(function(d) { return d; });
		
		});
	
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js