<!DOCTYPE html>
<meta charset="utf-8">
<title>Comet Chart</title>
<link rel="stylesheet" href="cometChart.css">
<header>
</header>
<p>Lightweight version of Comet Chart</p>
<div id="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="cometChartFunctions.js"></script>
<script src="cometChart.js"></script>
body {
font-family: sans-serif;
}
.segments polygon {
shape-rendering: geometricPrecision;
}
.axis path,
.axis line {
fill: none;
stroke: #727272;
shape-rendering: crispEdges;
stroke-width: .2;
}
.axis text {
font-size: 11px;
fill: #727272;
}// define variables
var margin = {
top: 50,
right: 100,
bottom: 50,
left: 100
},
width = 500,
height = 400;
var formatAsNumber = d3.format(",.0f")
var filterName = 'state', segmentName = 'birthweight';
// introduce svg element
var svg = d3.select("#chart")
.append("svg")
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.style("margin.right", -margin.right + "px");
var segments = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("class", "segments");
// call and use data
d3.csv("output2.csv", function(error, data) {
if (error) return console.error('error');
// filter by state, if desired
/* data = data.filter(function(d) {
return d[filterName] == 'Ohio';
});
*/
// set scales
scales = applyData(data);
// add the comets
drawComets(segments, data);
// adding x axis, and y axis
addAxis(segments, scales.size, 'bottom');
addAxis(segments, scales.value, 'left')
});
// graph elements
function addAxis(element, scale, location) {
var axis = d3.svg.axis().scale(scale).orient(location)
.ticks(15, ",.1s")
.tickSize(3, 0);
element.append("g").attr("class", "axis")
.attr("transform", placeAxis(location))
.call(axis);
};
function placeAxis(location){
if(location == 'bottom'){
return "translate("+ margin.left+"," + (height) + ")";
} else if (location == 'left'){
return "translate(" + margin.left + ",0)";
}
}
function applyData(data){
// initialize counter variables
var maxValue = 0, maxWeight = 0, diff = 0, sizeSum = [0,0], comboSum = [0,0];
// use data to define max value, weight, weight diffs, and sum size and combo
data.forEach(function(d) {
d.weightDiff = +d.endweight - +d.startweight;
if (Math.abs(d.weightDiff) > diff) {
diff = Math.abs(d.weightDiff)
};
maxValue = Math.max(maxValue, +d.startvalue, +d.endvalue);
maxWeight = Math.max(maxWeight, +d.startweight, +d.endweight);
// calculate for aggregate
sizeSum = [sizeSum[0] + +d.startweight,
sizeSum[1] + +d.endweight];
comboSum = [comboSum[0] + +d.startweight * +d.startvalue,
comboSum[1] + +d.endweight * +d.endvalue];
})
// calculate and append aggregate data
// assumes same number of segments for start & end
// assumes no missing values
var aggregate = {startvalue: comboSum[0] / sizeSum[0],
endvalue: comboSum[1] / sizeSum[1],
startweight: sizeSum[0] / data.length,
endweight: sizeSum[1] / data.length,
};
aggregate[segmentName] = 'aggregate';
data.push(aggregate);
// sets x and y scale to determine size of visible boxes
var sizeScale = d3.scale.log().clamp(true)
.domain([100, maxWeight])
.range([0, width]);
var valueScale = d3.scale.log().clamp(true)
.domain([maxValue, .9])
.range([0, height]);
// color scale, based on data diffs
var colorScale = d3.scale.linear()
.domain([-diff, 0, diff])
.range(['orange', 'grey', 'blue'])
return {size: sizeScale, value: valueScale, color: colorScale}
};
// data to polygons
function valuesToPoints(startweight, endweight, startvalue, endvalue, halfWidth) {
points = [[startweight, startvalue]];
var a = startweight - endweight;
var b = startvalue - endvalue;
var dist = Math.sqrt(a * a + b * b);
var newPoint1 = [halfWidth / dist * b + endweight, - halfWidth / dist * a + endvalue];
var newPoint2 = [- halfWidth / dist * b + endweight, halfWidth / dist * a + endvalue];
points.push(newPoint1, newPoint2);
return points.join(" ")
};
// function to draw comets
function drawComets(element, data){
element.selectAll("polygon")
.data(data)
.enter()
.append("polygon")
.attr("points", function(d) {
return valuesToPoints(scales.size(+d.startweight),
scales.size(+d.endweight),
scales.value(+d.startvalue),
scales.value(+d.endvalue),
3);
})
.attr("fill", function(d) {
if(d[segmentName] == 'aggregate'){
//
return 'black';
} else {
return scales.color(d.weightDiff)
};
})
.append("title")
.text(function(d) {
return d[filterName] +
', ' + segmentName +
d[segmentName] +
', value: ' +
d.startvalue + ', ' +
d.endvalue +
' weights ' +
d.startweight + ' ' +
d.endweight;
});
};state,birthweight,startvalue,endvalue,startweight,endweight
Ohio,2500 - 2999 grams,5.53,4.88,101227,109151
Ohio,1500 - 1999 grams,29.19,26.96,9078,9904
Ohio,1000 - 1499 grams,67.39,59.15,4526,5038
Ohio,4000+ grams,1.96,1.24,65199,46140
Ohio,500 - 999 grams,336.39,287.95,3377,3445
Ohio,2000 - 2499 grams,13.69,11.62,28782,30884
Ohio,3000 - 3499 grams,3.02,2.45,219696,222982
Ohio,499 grams or less,921.9,901.15,1114,1305
Ohio,3500 - 3999 grams,2.09,1.61,177442,154742
Georgia,2500 - 2999 grams,5.39,4.11,84094,117194
Georgia,1500 - 1999 grams,31.75,25.06,7748,10377
Georgia,1000 - 1499 grams,66.49,59.75,3880,5021
Georgia,4000+ grams,2.03,1.67,42755,35975
Georgia,500 - 999 grams,349.31,293.52,3338,4228
Georgia,2000 - 2499 grams,14.22,10.39,24539,34175
Georgia,3000 - 3499 grams,2.66,2.14,172853,227039
Georgia,499 grams or less,904.81,728.06,956,1151
Georgia,3500 - 3999 grams,2.15,1.63,126734,137645
New Jersey,2500 - 2999 grams,3.93,2.36,74847,82086
New Jersey,1500 - 1999 grams,20.08,16.37,7120,7513
New Jersey,1000 - 1499 grams,56.28,35.94,3536,3645
New Jersey,4000+ grams,1.22,1.09,48311,33939
New Jersey,500 - 999 grams,297.12,269.42,2955,2639
New Jersey,2000 - 2499 grams,9.97,6.84,21156,22957
New Jersey,3000 - 3499 grams,1.95,1.5,165760,173854
New Jersey,499 grams or less,875.33,870.97,762,651
New Jersey,3500 - 3999 grams,1.23,0.99,132117,118722
Florida,2500 - 2999 grams,4.55,3.87,132288,177337
Florida,1500 - 1999 grams,29.05,25.01,11601,15155
Florida,1000 - 1499 grams,56.2,53.75,5783,7275
Florida,4000+ grams,1.81,1.59,70266,58431
Florida,500 - 999 grams,319.63,290.92,4696,5871
Florida,2000 - 2499 grams,12.55,10.32,37381,49210
Florida,3000 - 3499 grams,2.52,1.92,288298,364768
Florida,499 grams or less,911.6,911.06,1233,1664
Florida,3500 - 3999 grams,1.63,1.32,214462,226844
Michigan,2500 - 2999 grams,5.87,3.93,84729,83716
Michigan,1500 - 1999 grams,28.38,31.25,8281,7776
Michigan,1000 - 1499 grams,71.52,55.03,3929,3816
Michigan,4000+ grams,2.04,1.67,59301,41855
Michigan,500 - 999 grams,347.11,295.4,3218,3084
Michigan,2000 - 2499 grams,13.07,9.61,25024,24753
Michigan,3000 - 3499 grams,2.63,2.22,190941,179909
Michigan,499 grams or less,891.05,870.88,1028,1092
Michigan,3500 - 3999 grams,1.91,1.62,158394,132157
Texas,3000 - 3499 grams,2.54,2.06,514828,653989
Texas,1000 - 1499 grams,61.69,53.48,8753,12079
Texas,2500 - 2999 grams,4.55,3.83,226968,320675
Texas,1500 - 1999 grams,30.92,28.16,18695,26033
Texas,4500+ grams,2.23,2.37,17513,12673
Texas,4000 - 4499 grams,1.68,1.67,99225,86139
Texas,499 grams or less,703.34,708.93,1409,2642
Texas,3500 - 3999 grams,1.87,1.4,373838,392317
Texas,500 - 999 grams,308.81,265.38,7163,8859
Texas,2000 - 2499 grams,13.27,10.76,60726,85758
New York,2500 - 2999 grams,4.3,2.78,176330,184645
New York,1500 - 1999 grams,25.99,20.74,16082,16300
New York,1000 - 1499 grams,56.79,46.98,7906,7918
New York,4000+ grams,1.57,1.07,106329,77806
New York,500 - 999 grams,338.98,273.29,6552,5840
New York,2000 - 2499 grams,10.92,7.88,49348,50356
New York,3000 - 3499 grams,2.07,1.45,389495,388484
New York,499 grams or less,931.61,927.12,1506,1276
New York,3500 - 3999 grams,1.43,1.12,296709,263005
Illinois,2500 - 2999 grams,5.75,3.78,121146,125074
Illinois,1500 - 1999 grams,31.83,24.81,11436,11487
Illinois,1000 - 1499 grams,70.31,51.46,5504,5344
Illinois,4000+ grams,1.77,1.37,74666,54564
Illinois,500 - 999 grams,364.81,300.19,4490,4204
Illinois,2000 - 2499 grams,14.06,10.09,35357,35871
Illinois,3000 - 3499 grams,3.11,1.96,268166,268672
Illinois,499 grams or less,901.83,878.87,1477,1453
Illinois,3500 - 3999 grams,2.04,1.36,210021,187259
Pennsylvania,2500 - 2999 grams,4.8,4.51,94587,104298
Pennsylvania,1500 - 1999 grams,30.89,23.89,8644,9711
Pennsylvania,1000 - 1499 grams,63.76,51.12,4203,4851
Pennsylvania,4000+ grams,1.82,1.64,64457,50705
Pennsylvania,500 - 999 grams,326.86,285.59,3298,3456
Pennsylvania,2000 - 2499 grams,12.32,10.13,27202,30112
Pennsylvania,3000 - 3499 grams,2.51,2.19,212567,222310
Pennsylvania,499 grams or less,920.35,918.74,1130,1366
Pennsylvania,3500 - 3999 grams,1.69,1.38,174075,162801
California,3000 - 3499 grams,2.33,1.57,802668,855510
California,1000 - 1499 grams,68.98,54.7,12351,13237
California,2500 - 2999 grams,4.6,3.13,331059,377355
California,1500 - 1999 grams,32.57,24.98,25636,28865
California,4500+ grams,2.37,2.12,36300,24560
California,4000 - 4499 grams,1.67,1.12,194276,153362
California,499 grams or less,879.21,850.28,2318,2518
California,3500 - 3999 grams,1.7,1.21,642323,597310
California,500 - 999 grams,338.35,295.25,8967,9338
California,2000 - 2499 grams,12.98,9.85,81989,93270