PaladhiDinesh/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Dinesh Kumar Paladhi; CS 725:Information Visualization; Spring 2016; Computer Science; Old Dominion University
Data source used for all the graphs:-
http://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=ACS_14_5YR_DP05&src=pt
Examples Referred :-
Mike Bostock (http://bl.ocks.org/mbostock/4063269) and Mike Bostock (https://bl.ocks.org/mbostock/3885211)
Explanation


Graph deals with the change in population statistics among various races in North America. The data runs through years from 2007 to 2014.
This chart is a stacked area chart and it satisfies the following properties.
1)Magnitude as position on a common scale
	a.Channel type :- Magnitude channel
	b.Channel :- Position on a common scale
	c.Marks :- Area 
	
2)Identity as color hue 
	a.Channel type :- Identity channel
	b.Channel :- Color Hue
	c.Marks :- Area 
	
3)Magnitude as area
	a.Channel type :- Magnitude channel
	b.Channel :- Area
	c.Marks :- Area

Discriminability property is maintained here as the races can be differentiated with colors and over the years on x-axis the population rate is changing and area covered is different for different races.
2.
This graph deals with the comparison of literacy rate with population among various races and sub races in North America.
The chart is a scatter plot which is modified as per my requirements. The properties that this char exhibits is :-
1)Identity as Spatial Region
	a.Channel type :- Identity channel
	b.Channel :- Spatial Region
	c.Marks :- points 

2)Identity as Color hue
	a.Channel type :- Identity channel
	b.Channel :- Color
	c.Marks :- points 

Discriminability property is maintained here because all the races can be identified using color and all the sub races can be identified using size of the bubble.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <title> D3 and Tableau </title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <style>
      body {
        font-family: 'Open sans',verdana,arial,sans-serif;
        font-size: 10pt
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <script>

		var my_div = d3.select('body')
											.append('div')
      										.style('height', '460px')
      										.style('overflow-x', 'hidden')
      										.style('overflow-y', 'scroll')
    var div_Stackarea = my_div
                			.append('div')
                        .attr('class', 'chart')

      var divBubble = my_div
                			.append('div')
                        .attr('class', 'chart')


      d3.csv("pop_year.csv",
        function(d) {
        	row = {
            x : d3.time.format("%Y").parse(d.Year),
            y : {
              White : +d.White,
              Black : +d.Black,
              American: +d.American,
              Asian : +d.Asian,
              Native : +d.Native
            }
          }

         var total = 0
          d3.keys(row.y).forEach(function(key) {
            total += row.y[key]
          })

          d3.keys(row.y).forEach(function(key) {
            row.y[key] = row.y[key]/total
          })

          return row
        },
        function(error, data) {
        	var labelX = 'Year';
      		var labelY = 'Race';

       		var svg = div_Stackarea
                      .append('svg')
                      .attr('class', 'chart')
                      .attr("width", width + margin + margin)
                      .attr("height", height + margin + margin)
                      .append("g")
                      .attr("transform", "translate(" + margin + "," + margin + ")");


        	//Code for X-Axis
        	var x = d3.time.scale()
          				.domain(d3.extent(data, function(d) { return d.x; }))
          				.range([0,width]);
      		var xAxis = d3.svg.axis().scale(x);

          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
              .text(labelX)
              .attr("x", width - 500)
              .attr("y", margin - 40)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
        	  var percentage = d3.format(".0%");
        	//Code for Y Axis
        	var y = d3.scale.linear().range([height, 0]);
      		var yAxis = d3.svg.axis().scale(y)
          						.orient("left")
          						.tickFormat(percentage);

          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
              .text(labelY)
              .attr("transform", "rotate(-90)")
              .attr("x", 10)
              .attr("y", -margin)
              .attr("dy", ".71em")
              .style("text-anchor", "end");

        	//Code for Stacked Area Chart
        	var stack_color = d3.scale.category10()
                      .domain(d3.keys(data[0].y))

          var stack_area = d3.svg.area()
          						.x(function(d) { return x(d.date); })
          						.y0(function(d) { return y(d.y0); })
          						.y1(function(d) { return y(d.y0 + d.y); });

          var pathData = stack_color.domain().map(function(name) {
                        return {
                          name : name,
                          values: data.map(function(d) {
                            return {
                              date: d.x, y: d.y[name]
                            }
                          })
                        }
                      })

          var stackData = d3.layout.stack()
          						.values(function(d) {
            						return d.values
          						})(pathData)

          var container = svg.selectAll(".data")
          	.data(stackData).enter()
          	.append("g")
          	.attr("class", "data");

        	container.append("path")
            .attr("class", "stack_area")
            .attr("d", function(d) { return stack_area(d.values); })
            .style("fill", function(d) { return stack_color(d.name); });

        	container.append("text")
            .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
            .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
            .attr("x", -6)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; })
          	.style("text-anchor", "end");
        }
      );


      //Code for Bubble Chart

      var width = 800;
      var height = 550;
      var margin = 70;

      var Race = {}
      d3.csv("race.csv",
        function(d) {
          return {
            x: +d["Population"],
            y: +d["Literacy Rate"],
            size: d["Race"],
            label: d["Sub Race"],
            c: d["Race"]
          }
        },
        function(error, data) {
        	data.forEach(function(d) {
            Race[d["size"]] = 0
          })
          Race = d3.keys(Race).sort();
        	data.forEach(function(d) {
            d["size"] = Race.indexOf(d["size"]) +1
          })

          var labelX = 'Population';
      		var labelY = 'Literacy Rate';

          var x = d3.scale.linear().domain([
                    10000,
                    d3.max(data, function (d) { return d.x; })
                  ]).range([10, width]);
          var y = d3.scale.linear().domain([
                    5,
                    d3.max(data, function (d) { return d.y; })
                  ]).range([height,-10])
          var svg = divBubble
                      .append('svg')
                      .attr('class', 'chart')
                      .attr("width", width + margin + margin)
                      .attr("height", height + margin + margin)
                      .append("g")
                      .attr("transform", "translate(" + margin + "," + margin + ")");
          // X Axis
          var xAxis = d3.svg.axis().scale(x);
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
              .text(labelX)
              .attr("x", width + 10)
              .attr("y", margin - 30)
              .attr("dy", ".71em")
              .style("text-anchor", "middle");
          // Y Axis
          var yAxis = d3.svg.axis().scale(y).orient("right");
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
              .text(labelY)
              .attr("transform", "rotate(-90)")
              .attr("x",0)
              .attr("y", -margin)
              .attr("dy", ".71em")
              .style("text-anchor", "middle");
          // Bubbles
          var scale = d3.scale.sqrt().domain([
                        d3.min(data, function (d) { return d.size; }),
                        d3.max(data, function (d) { return d.size; })
                      ]).range([4, 70]);
          var color = d3.scale.category20();
          svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
              .attr("cx", function (d) { return x(d.x); })
              .attr("cy", function (d) { return y(d.y); })
              .attr("r", function (d) { return scale(d.size); })
              .attr("text", function (d) { return d.label })
              .style("fill", function (d) { return color(d.c); })
              .attr("opacity", 15)
          svg.selectAll("circle")
            .each(function(d, i) {
              circle = d3.select(this)
              svg.append("text")
                .text(circle.attr("text"))
                .attr("dx", +circle.attr("cx") - (+circle.attr("r")/3))
                .attr("dy", +circle.attr("cy") + 5);
            })
        }
      );
    </script>
  </body>
</html>

## pop_year.csv

          
            Year
            White
            Black
            American
            Asian
            Native

            
              2014
              3553265
              3929319
              2932248
              3347229
              1548449

            
              2013
              3853265
              3629319
              2832248
              3729319
              1423784

            
              2012
              3663265
              3729319
              2232248
              3529319
              1548449

            
              2011
              3553265
              3529319
              2532248
              3453265
              2192151

            
              2010
              3453265
              3229319
              2732248
              3253265
              1548449

            
              2009
              3253265
              382319
              2432248
              3053265
              1748449

            
              2008
              3053265
              3029319
              2732248
              1553265
              1548449

            
              2007
              1553265
              2929319
              2932248
              3347229
              1948449

## race.csv

          
            Number
            Race
            Sub Race
            Population
            Literacy Rate

            
              1
              White
              White
              3553265
              72.4

            
              2
              Black
              Black
              3929319
              50

            
              3
              American_Indian
              American_Indian
              2932248
              83

            
              4
              Asian
              Asian_Indian
              2932248
              89

            
              5
              Asian
              Chinese
              3347229
              54

            
              6
              Asian
              Filipino
              2555923
              34

            
              7
              Asian
              Japanese
              1763325
              33

            
              8
              Asian
              Korean
              1423784
              76

            
              9
              Asian
              Vietnamese
              1548449
              90

            
              10
              Asian
              Other_Asian [1]
              2192151
              75

            
              11
              Native_Hawaiian
              Native_Hawaiian
              2356146
              45

            
              12
              Native_Hawaiian
              Guamanian_or_Chamorro
              3188310
              78

            
              13
              Native Hawaiian
              Samoan
              409637
              55

            
              14
              Native Hawaiian
              Other Pacific Islander [2]
              885920
              68

            
              15
              Some Other Race
              Some Other Race
              2892151
              65
	<!DOCTYPE html>
	<html>
	<head>
	<title> D3 and Tableau </title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	body {
	font-family: 'Open sans',verdana,arial,sans-serif;
	font-size: 10pt
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>
	</head>
	<body>
	<script>

	var my_div = d3.select('body')
	.append('div')
	.style('height', '460px')
	.style('overflow-x', 'hidden')
	.style('overflow-y', 'scroll')
	var div_Stackarea = my_div
	.append('div')
	.attr('class', 'chart')

	var divBubble = my_div
	.append('div')
	.attr('class', 'chart')


	d3.csv("pop_year.csv",
	function(d) {
	row = {
	x : d3.time.format("%Y").parse(d.Year),
	y : {
	White : +d.White,
	Black : +d.Black,
	American: +d.American,
	Asian : +d.Asian,
	Native : +d.Native
	}
	}

	var total = 0
	d3.keys(row.y).forEach(function(key) {
	total += row.y[key]
	})

	d3.keys(row.y).forEach(function(key) {
	row.y[key] = row.y[key]/total
	})

	return row
	},
	function(error, data) {
	var labelX = 'Year';
	var labelY = 'Race';

	var svg = div_Stackarea
	.append('svg')
	.attr('class', 'chart')
	.attr("width", width + margin + margin)
	.attr("height", height + margin + margin)
	.append("g")
	.attr("transform", "translate(" + margin + "," + margin + ")");


	//Code for X-Axis
	var x = d3.time.scale()
	.domain(d3.extent(data, function(d) { return d.x; }))
	.range([0,width]);
	var xAxis = d3.svg.axis().scale(x);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.text(labelX)
	.attr("x", width - 500)
	.attr("y", margin - 40)
	.attr("dy", ".71em")
	.style("text-anchor", "end");
	var percentage = d3.format(".0%");
	//Code for Y Axis
	var y = d3.scale.linear().range([height, 0]);
	var yAxis = d3.svg.axis().scale(y)
	.orient("left")
	.tickFormat(percentage);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.text(labelY)
	.attr("transform", "rotate(-90)")
	.attr("x", 10)
	.attr("y", -margin)
	.attr("dy", ".71em")
	.style("text-anchor", "end");

	//Code for Stacked Area Chart
	var stack_color = d3.scale.category10()
	.domain(d3.keys(data[0].y))

	var stack_area = d3.svg.area()
	.x(function(d) { return x(d.date); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); });

	var pathData = stack_color.domain().map(function(name) {
	return {
	name : name,
	values: data.map(function(d) {
	return {
	date: d.x, y: d.y[name]
	}
	})
	}
	})

	var stackData = d3.layout.stack()
	.values(function(d) {
	return d.values
	})(pathData)

	var container = svg.selectAll(".data")
	.data(stackData).enter()
	.append("g")
	.attr("class", "data");

	container.append("path")
	.attr("class", "stack_area")
	.attr("d", function(d) { return stack_area(d.values); })
	.style("fill", function(d) { return stack_color(d.name); });

	container.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
	.attr("x", -6)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; })
	.style("text-anchor", "end");
	}
	);


	//Code for Bubble Chart

	var width = 800;
	var height = 550;
	var margin = 70;

	var Race = {}
	d3.csv("race.csv",
	function(d) {
	return {
	x: +d["Population"],
	y: +d["Literacy Rate"],
	size: d["Race"],
	label: d["Sub Race"],
	c: d["Race"]
	}
	},
	function(error, data) {
	data.forEach(function(d) {
	Race[d["size"]] = 0
	})
	Race = d3.keys(Race).sort();
	data.forEach(function(d) {
	d["size"] = Race.indexOf(d["size"]) +1
	})

	var labelX = 'Population';
	var labelY = 'Literacy Rate';

	var x = d3.scale.linear().domain([
	10000,
	d3.max(data, function (d) { return d.x; })
	]).range([10, width]);
	var y = d3.scale.linear().domain([
	5,
	d3.max(data, function (d) { return d.y; })
	]).range([height,-10])
	var svg = divBubble
	.append('svg')
	.attr('class', 'chart')
	.attr("width", width + margin + margin)
	.attr("height", height + margin + margin)
	.append("g")
	.attr("transform", "translate(" + margin + "," + margin + ")");
	// X Axis
	var xAxis = d3.svg.axis().scale(x);
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.text(labelX)
	.attr("x", width + 10)
	.attr("y", margin - 30)
	.attr("dy", ".71em")
	.style("text-anchor", "middle");
	// Y Axis
	var yAxis = d3.svg.axis().scale(y).orient("right");
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.text(labelY)
	.attr("transform", "rotate(-90)")
	.attr("x",0)
	.attr("y", -margin)
	.attr("dy", ".71em")
	.style("text-anchor", "middle");
	// Bubbles
	var scale = d3.scale.sqrt().domain([
	d3.min(data, function (d) { return d.size; }),
	d3.max(data, function (d) { return d.size; })
	]).range([4, 70]);
	var color = d3.scale.category20();
	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function (d) { return x(d.x); })
	.attr("cy", function (d) { return y(d.y); })
	.attr("r", function (d) { return scale(d.size); })
	.attr("text", function (d) { return d.label })
	.style("fill", function (d) { return color(d.c); })
	.attr("opacity", 15)
	svg.selectAll("circle")
	.each(function(d, i) {
	circle = d3.select(this)
	svg.append("text")
	.text(circle.attr("text"))
	.attr("dx", +circle.attr("cx") - (+circle.attr("r")/3))
	.attr("dy", +circle.attr("cy") + 5);
	})
	}
	);
	</script>
	</body>
	</html>
Year	White	Black	American	Asian	Native
2014	3553265	3929319	2932248	3347229	1548449
2013	3853265	3629319	2832248	3729319	1423784
2012	3663265	3729319	2232248	3529319	1548449
2011	3553265	3529319	2532248	3453265	2192151
2010	3453265	3229319	2732248	3253265	1548449
2009	3253265	382319	2432248	3053265	1748449
2008	3053265	3029319	2732248	1553265	1548449
2007	1553265	2929319	2932248	3347229	1948449
Number	Race	Sub Race	Population	Literacy Rate
1	White	White	3553265	72.4
2	Black	Black	3929319	50
3	American_Indian	American_Indian	2932248	83
4	Asian	Asian_Indian	2932248	89
5	Asian	Chinese	3347229	54
6	Asian	Filipino	2555923	34
7	Asian	Japanese	1763325	33
8	Asian	Korean	1423784	76
9	Asian	Vietnamese	1548449	90
10	Asian	Other_Asian [1]	2192151	75
11	Native_Hawaiian	Native_Hawaiian	2356146	45
12	Native_Hawaiian	Guamanian_or_Chamorro	3188310	78
13	Native Hawaiian	Samoan	409637	55
14	Native Hawaiian	Other Pacific Islander [2]	885920	68
15	Some Other Race	Some Other Race	2892151	65