srinivashavanur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Problem Statement:

Part 1 - d3
Use d3 to create charts that demonstrate the following channel types and channels:
magnitude as position on a common scale
magnitude as area
identity as color hue
identity as spatial region
This may be done in separate charts or some of these may be combined, as long as the separability property is maintained.
You may use whatever data you wish (and may use different data for each chart).  Be sure to indicate the data source (preferably with a URL).
You may base your d3 charts off of examples, but you must indicate the URL of the example and make appropriate changes.
Part 2 - R or Tableau
Re-create your d3 charts in Part 1 with either R or Tableau.  Your choice.

Name: Srinivas Havanur
Assignment: CS 725 - VI4 submission
Course: Information Visualization
Semester: Spring 2016

Built with blockbuilder.org
Data is obtained from the medicare website cms.gov
(https://www.cms.gov/Research-Statistics-Data-and-Systems/Statistics-Trends-and-Reports/Medicare-Provider-Charge-Data/Physician-and-Other-Supplier2012.html)
Since the dataset is huge. I have made use of portion of the dataset to represent it in the graph.
Discriminability is achieved in the following way for each of the graphs.


From the first graph, individual items or scatter points can be identified just by looking at it. From this graph, one can identify position of a point on a common scale.
However, it is difficult to distinguish to which category every point belongs to which is clearly addressed in the second graph.


From the second graph, one can easily distinguish the scatter points belonging to every category using suitable color codes.
Eg: Correlation between average submitted charge amount and average medicare payment amount is calculated using scatter plot.
From the graph, we can identify the points belonging to every state with a color code.


From the third graph, one can easily identify the data based on area and category because in the second graph even though we have distinguished it by
sizes, sometimes its hard to identify as the size of certain scatter points are close to each other. Hence the bubble chart is suitable.
Eg: Average submitted charge amount of every state is identified based on the size and suitable color code as shown.


Following are the graphs generated using Tableau


## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#title {position:absolute;top:12px;left:0px;width:500px;text-align:center;}
  svg { width:100%; height: 100% }
  svg1 { width:100%; height: 100% }
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.div_style1 {
      border: 2px solid grey;
      width: 1050px;
      height: 600px;
}
.div_style2 {
      border: 2px solid grey;
      width: 1050px;
      height: 650px;

}
  .axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
.dot {
  stroke: #000;
}

</style>
  </head>

<body>
  <div id="div1" class="div_style1">
    <ul>
      <li><p>Magnitude as position on common scale</p></li>
    </ul>
    </div>
<div id="div2" class="div_style2">
   <ul>
      <li><p>Magnitude as position on common scale</p></li>
      <li><p>Identity as color hue</p></li>
     <li><p>Magnitude as Area</p></li>
   </ul>
  </div>
  <div id="div3" class="div_style2">
  <ul>
      <li><p>Identity as Spatial region</p></li>
      <li><p>Identity as color hue</p></li>
     <li><p>Magnitude as Area</p></li>
   </ul>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

  <script>


  var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  d3.select(self.frameElement).style("height", "1900px");

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var svg = d3.select("#div1").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.tsv("medicarefiltered.tsv", function(error, data) {
  if (error) throw error;


  data.forEach(function(d) {
    d.average_submitted_chrg_amt = +d.average_submitted_chrg_amt;
    d.average_Medicare_payment_amt = +d.average_Medicare_payment_amt;
  });

  x.domain(d3.extent(data, function(d) { return d.average_Medicare_payment_amt; })).nice();
  y.domain(d3.extent(data, function(d) { return d.average_submitted_chrg_amt; })).nice();

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Average Medicare Payment Amt");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Average Submitted Charge Amt")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
  		.attr("r",5.5)
  		//.attr("r", function (d) { return d.average_submitted_chrg_amt*0.008; })
      .attr("cx", function(d) { return x(d.average_Medicare_payment_amt); })
      .attr("cy", function(d) { return y(d.average_submitted_chrg_amt); })
      .style("fill", "blue");


});


    var svg3 = d3.select("#div2").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.tsv("medicarefiltered.tsv", function(error, data) {
  if (error) throw error;


  data.forEach(function(d) {
    d.average_submitted_chrg_amt = +d.average_submitted_chrg_amt;
    d.average_Medicare_payment_amt = +d.average_Medicare_payment_amt;
  });

  x.domain(d3.extent(data, function(d) { return d.average_Medicare_payment_amt; })).nice();
  y.domain(d3.extent(data, function(d) { return d.average_submitted_chrg_amt; })).nice();

  svg3.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Average Medicare Payment Amt");

  svg3.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Average Submitted Charge Amt")

  svg3.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
  		//.attr("r",3.5)
  		.attr("r", function (d) { return d.average_submitted_chrg_amt*0.008; })
      .attr("cx", function(d) { return x(d.average_Medicare_payment_amt); })
      .attr("cy", function(d) { return y(d.average_submitted_chrg_amt); })
      .style("fill", function(d) { return color(d.nppes_provider_state); });

  var legend1 = svg3.selectAll(".legend1")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(60," + i * 20 + ")"; });

  legend1.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend1.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".25em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });


});

 var diameter = 500, //max size of the bubbles
    colors    = d3.scale.category20(); //color category

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg1 = d3.select("#div3")
    .append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.tsv("medicareavg.tsv", function(error, data){

    //convert numerical values from strings to numbers
    data = data.map(function(d){ d.value = +d["average_submitted_chrg_amt"]; return d; });

    //bubbles needs very specific format, convert data to this.
    var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });

    //setup the chart
    var bubbles = svg1.append("g")
        .attr("transform", "translate(0,0)")
        .selectAll(".bubble")
        .data(nodes)
        .enter();

    //create the bubbles
    bubbles.append("circle")
        .attr("r", function(d){ return d.r; })
        .attr("cx", function(d){ return d.x; })
        .attr("cy", function(d){ return d.y; })
        .style("fill", function(d) { return colors(d.nppes_provider_state); });

    //format the text for each bubble
    bubbles.append("text")
        .attr("x", function(d){ return d.x; })
        .attr("y", function(d){ return d.y + 5; })
        .attr("text-anchor", "middle")
        .text(function(d){ return d["average_submitted_chrg_amt"]; })
        .style({
            "fill":"white",
            "font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
            "font-size": "12px"
        });
   var legend = svg1.selectAll(".legend")
      .data(colors.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(60," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", colors);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".25em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });


})

</script>

## medicareavg.tsv

          
            nppes_provider_state
            average_submitted_chrg_amt

            
              AZ
              548

            
              CA
              959

            
              CO
              612

            
              FL
              2200

            
              LA
              566

            
              MO
              487

            
              NY
              1132

            
              OH
              538

            
              PA
              510

            
              TX
              694

## medicarefiltered.tsv

          
            nppes_provider_state
            average_Medicare_allowed_amt
            stdev_Medicare_allowed_amt
            average_submitted_chrg_amt
            stdev_submitted_chrg_amt
            average_Medicare_payment_amt
            stdev_Medicare_payment_amt

            
              CA
              220.4646814
              9.960179363
              404.4960539
              145.9302253
              174.3754902
              14.91535861

            
              CA
              208.3394444
              72.07258341
              467.7298413
              199.7881963
              165.3300794
              57.43833282

            
              MO
              140.5
              0
              482.75
              15.75
              112.4
              0

            
              MO
              162.74
              0
              487.0816327
              1.382643648
              124.7636735
              22.61241046

            
              PA
              121.49
              0
              510
              0
              97.19
              0

            
              OH
              142.7021429
              10.92321655
              538.5642857
              53.77423184
              114.1607143
              8.738083693

            
              AZ
              194.7236364
              1.244787479
              548.6363636
              11.49919149
              155.7754546
              0.997554862

            
              LA
              233.9396875
              32.07206266
              566
              0
              179.1759375
              36.33726272

            
              CA
              260.85
              0
              584.05
              43.31624984
              208.03025
              4.05768745

            
              FL
              150.7775
              2.232586784
              599.625
              125.6805847
              99.220625
              39.62349594

            
              CA
              256.7460526
              81.85319236
              609.6591093
              580.444991
              202.9303441
              66.36734116

            
              CO
              161.71
              0
              612.5
              9.682458366
              129.37
              0

            
              NY
              141.03
              0
              641
              0
              110.6712195
              13.59008107

            
              TX
              28.2555
              25.53638394
              694
              0
              22.6065
              20.42585182

            
              TX
              24.19
              0
              750
              0
              19.35
              0

            
              CA
              370.09
              0
              757.3333333
              238.5306875
              296.07
              0

            
              TX
              148.7152941
              8.621176471
              772.1176471
              60.57167107
              118.9741177
              6.896470588

            
              CA
              480.0947826
              42.40186408
              794.566087
              301.5148646
              378.3343478
              41.60176876

            
              CA
              331.2690196
              82.27076395
              845.6021569
              468.1271211
              260.9113726
              71.55027645

            
              CA
              429.5750685
              183.1575394
              855.8800498
              2223.036562
              337.5467871
              219.6257234

            
              CA
              98.4556
              89.10448954
              959.8992
              16.77718497
              78.7616
              71.28475521

            
              FL
              140.96
              0
              1000
              0
              112.77
              0

            
              NY
              246.83
              0
              1132
              0
              188.0571429
              42.05085551

            
              FL
              460.82
              0
              1500
              0
              368.66
              0

            
              FL
              45.34
              0
              1600
              0
              36.27
              0

            
              FL
              180.38
              0
              2200
              0
              144.3
              0
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#title {position:absolute;top:12px;left:0px;width:500px;text-align:center;}
	svg { width:100%; height: 100% }
	svg1 { width:100%; height: 100% }
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.div_style1 {
	border: 2px solid grey;
	width: 1050px;
	height: 600px;
	}
	.div_style2 {
	border: 2px solid grey;
	width: 1050px;
	height: 650px;

	}
	.axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	.dot {
	stroke: #000;
	}

	</style>
	</head>

	<body>
	<div id="div1" class="div_style1">
	<ul>
	<li><p>Magnitude as position on common scale</p></li>
	</ul>
	</div>
	<div id="div2" class="div_style2">
	<ul>
	<li><p>Magnitude as position on common scale</p></li>
	<li><p>Identity as color hue</p></li>
	<li><p>Magnitude as Area</p></li>
	</ul>
	</div>
	<div id="div3" class="div_style2">
	<ul>
	<li><p>Identity as Spatial region</p></li>
	<li><p>Identity as color hue</p></li>
	<li><p>Magnitude as Area</p></li>
	</ul>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<script>





	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 900 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	d3.select(self.frameElement).style("height", "1900px");

	var x = d3.scale.linear()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var svg = d3.select("#div1").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.tsv("medicarefiltered.tsv", function(error, data) {
	if (error) throw error;



	data.forEach(function(d) {
	d.average_submitted_chrg_amt = +d.average_submitted_chrg_amt;
	d.average_Medicare_payment_amt = +d.average_Medicare_payment_amt;
	});

	x.domain(d3.extent(data, function(d) { return d.average_Medicare_payment_amt; })).nice();
	y.domain(d3.extent(data, function(d) { return d.average_submitted_chrg_amt; })).nice();

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Average Medicare Payment Amt");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Average Submitted Charge Amt")

	svg.selectAll(".dot")
	.data(data)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r",5.5)
	//.attr("r", function (d) { return d.average_submitted_chrg_amt*0.008; })
	.attr("cx", function(d) { return x(d.average_Medicare_payment_amt); })
	.attr("cy", function(d) { return y(d.average_submitted_chrg_amt); })
	.style("fill", "blue");




	});


	var svg3 = d3.select("#div2").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.tsv("medicarefiltered.tsv", function(error, data) {
	if (error) throw error;



	data.forEach(function(d) {
	d.average_submitted_chrg_amt = +d.average_submitted_chrg_amt;
	d.average_Medicare_payment_amt = +d.average_Medicare_payment_amt;
	});

	x.domain(d3.extent(data, function(d) { return d.average_Medicare_payment_amt; })).nice();
	y.domain(d3.extent(data, function(d) { return d.average_submitted_chrg_amt; })).nice();

	svg3.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Average Medicare Payment Amt");

	svg3.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Average Submitted Charge Amt")

	svg3.selectAll(".dot")
	.data(data)
	.enter().append("circle")
	.attr("class", "dot")
	//.attr("r",3.5)
	.attr("r", function (d) { return d.average_submitted_chrg_amt*0.008; })
	.attr("cx", function(d) { return x(d.average_Medicare_payment_amt); })
	.attr("cy", function(d) { return y(d.average_submitted_chrg_amt); })
	.style("fill", function(d) { return color(d.nppes_provider_state); });

	var legend1 = svg3.selectAll(".legend1")
	.data(color.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(60," + i * 20 + ")"; });

	legend1.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend1.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".25em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });


	});

	var diameter = 500, //max size of the bubbles
	colors = d3.scale.category20(); //color category

	var bubble = d3.layout.pack()
	.sort(null)
	.size([diameter, diameter])
	.padding(1.5);

	var svg1 = d3.select("#div3")
	.append("svg")
	.attr("width", diameter)
	.attr("height", diameter)
	.attr("class", "bubble");

	d3.tsv("medicareavg.tsv", function(error, data){

	//convert numerical values from strings to numbers
	data = data.map(function(d){ d.value = +d["average_submitted_chrg_amt"]; return d; });

	//bubbles needs very specific format, convert data to this.
	var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });

	//setup the chart
	var bubbles = svg1.append("g")
	.attr("transform", "translate(0,0)")
	.selectAll(".bubble")
	.data(nodes)
	.enter();

	//create the bubbles
	bubbles.append("circle")
	.attr("r", function(d){ return d.r; })
	.attr("cx", function(d){ return d.x; })
	.attr("cy", function(d){ return d.y; })
	.style("fill", function(d) { return colors(d.nppes_provider_state); });

	//format the text for each bubble
	bubbles.append("text")
	.attr("x", function(d){ return d.x; })
	.attr("y", function(d){ return d.y + 5; })
	.attr("text-anchor", "middle")
	.text(function(d){ return d["average_submitted_chrg_amt"]; })
	.style({
	"fill":"white",
	"font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
	"font-size": "12px"
	});
	var legend = svg1.selectAll(".legend")
	.data(colors.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(60," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", colors);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".25em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });


	})

	</script>
	nppes_provider_state	average_submitted_chrg_amt
	AZ	548
	CA	959
	CO	612
	FL	2200
	LA	566
	MO	487
	NY	1132
	OH	538
	PA	510
	TX	694
nppes_provider_state	average_Medicare_allowed_amt	stdev_Medicare_allowed_amt	average_submitted_chrg_amt	stdev_submitted_chrg_amt	average_Medicare_payment_amt	stdev_Medicare_payment_amt
CA	220.4646814	9.960179363	404.4960539	145.9302253	174.3754902	14.91535861
CA	208.3394444	72.07258341	467.7298413	199.7881963	165.3300794	57.43833282
MO	140.5	0	482.75	15.75	112.4	0
MO	162.74	0	487.0816327	1.382643648	124.7636735	22.61241046
PA	121.49	0	510	0	97.19	0
OH	142.7021429	10.92321655	538.5642857	53.77423184	114.1607143	8.738083693
AZ	194.7236364	1.244787479	548.6363636	11.49919149	155.7754546	0.997554862
LA	233.9396875	32.07206266	566	0	179.1759375	36.33726272
CA	260.85	0	584.05	43.31624984	208.03025	4.05768745
FL	150.7775	2.232586784	599.625	125.6805847	99.220625	39.62349594
CA	256.7460526	81.85319236	609.6591093	580.444991	202.9303441	66.36734116
CO	161.71	0	612.5	9.682458366	129.37	0
NY	141.03	0	641	0	110.6712195	13.59008107
TX	28.2555	25.53638394	694	0	22.6065	20.42585182
TX	24.19	0	750	0	19.35	0
CA	370.09	0	757.3333333	238.5306875	296.07	0
TX	148.7152941	8.621176471	772.1176471	60.57167107	118.9741177	6.896470588
CA	480.0947826	42.40186408	794.566087	301.5148646	378.3343478	41.60176876
CA	331.2690196	82.27076395	845.6021569	468.1271211	260.9113726	71.55027645
CA	429.5750685	183.1575394	855.8800498	2223.036562	337.5467871	219.6257234
CA	98.4556	89.10448954	959.8992	16.77718497	78.7616	71.28475521
FL	140.96	0	1000	0	112.77	0
NY	246.83	0	1132	0	188.0571429	42.05085551
FL	460.82	0	1500	0	368.66	0
FL	45.34	0	1600	0	36.27	0
FL	180.38	0	2200	0	144.3	0