CMPD-dot-line-graph

_.md

[ Launch: CMPD-dot-line-graph ] 10801205 by hartzis

arvden.csv

arvden2.json

[{"City": "ARVADA", "Specialty": "Clinical Laboratory", "Payments": "824174.81"}, {"City": "ARVADA", "Specialty": "General Practice", "Payments": "252393.31"}, {"City": "ARVADA", "Specialty": "Ophthalmology", "Payments": "181036.41"}, {"City": "ARVADA", "Specialty": "Nephrology", "Payments": "155601.03"}, {"City": "ARVADA", "Specialty": "Nephrology", "Payments": "121818.62"}, {"City": "ARVADA", "Specialty": "Ophthalmology", "Payments": "120488.65"}, {"City": "ARVADA", "Specialty": "Nephrology", "Payments": "109210.66"}, {"City": "ARVADA", "Specialty": "Internal Medicine", "Payments": "103173.26"}, {"City": "ARVADA", "Specialty": "Family Practice", "Payments": "100428.50"}, {"City": "ARVADA", "Specialty": "Nephrology", "Payments": "89565.11"}]

config.json

{"description":"CMPD-dot-line-graph","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"arvden.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"arvden2.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/kS3JDCc.png"}

inlet.js

var cityData = tributary.arvden
var cityData2 = tributary.arvden2

console.log(cityData2);

var sumPayments = d3.sum(cityData, function(d) {return +d.Payments;});


var svg = d3.select('svg');

var xscale = d3.scale.ordinal()
	.domain(d3.range(cityData.length))
	.rangeBands([0,577], 1);
	
var yscale = d3.scale.linear()
	.domain([0,1])
	.range([300,0])

var colorScale = d3.scale.linear()
	.domain([0,1])
	.range([105,225])

var curves = d3.svg.line()
	.x(function(d, i){return xscale(i)})
	.y(function(d, i){return yscale(+d.Payments / sumPayments)})


var dataPts = svg.selectAll('circle')
	.data(cityData)
dataPts
	.enter()
	.append('circle')
	.attr({cy: function(d, i) {return yscale(+d.Payments / sumPayments)},
           cx: function(d, i){return xscale(i)},
           r: 15
      })
	.style('fill', function(d, i)
           {
             var col = 'rgb(125,100,'+(colorScale(i/cityData.length)).toFixed(0)+')';
             return col})

var textLabels = svg.selectAll('.labels')
	.data(cityData)
textLabels
	.enter()
	.append('text')
	.attr('class', 'labels')
	.attr('transform', function(d, i){
      var y = yscale(+d.Payments / sumPayments) -20;
      var x = xscale(i) + 8;
      return "translate("+[x,y]+")rotate(-90)";
      })
	.text(function(d, i){return d.City})
	.style('fill', function(d, i)
           {
             var col = 'rgb(125,100,'+(colorScale(i/cityData.length)).toFixed(0)+')';
             return col})

var textLabels = svg.selectAll('.labels-percent')
	.data(cityData)
textLabels
	.enter()
	.append('text')
	.attr('class', 'labels-percent')
	.attr('transform', function(d, i){
      var y = yscale(+d.Payments / sumPayments) -(d.City.length*17);
      var x = xscale(i) - 13;
      return "translate("+[x,y]+")rotate(-0)";
      })
	.text(function(d, i){return ((+d.Payments/sumPayments)*100).toFixed(1)+"%"})
	.style('fill', function(d, i)
           {
             var col = 'rgb(125,100,'+(colorScale(i/cityData.length)).toFixed(0)+')';
             return col})

var sumInfo = svg.selectAll('.sum-info')
	.data([sumPayments])
sumInfo
	.enter()
	.append('text')
	.attr('class', 'sum-info')
.attr({x: 51,
       y: 361})
.text("Sum of all Payments: $"+sumPayments)

var mainPath = svg.selectAll('path')
	.data([cityData])
mainPath
	.enter()
	.append('path')
mainPath
    .attr("d", curves(cityData))
	

style.css

path {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  pointer-events: none;
}

.labels {
    pointer-events: none;
}

.labels-percent {
    pointer-events: none;
  	font-size: 12px;
}