Skip to content

Instantly share code, notes, and snippets.

@zanarmstrong

zanarmstrong/cometChart.css

Last active November 8, 2015 19:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save zanarmstrong/0f3f39deed0ee1653354 to your computer and use it in GitHub Desktop.
Save zanarmstrong/0f3f39deed0ee1653354 to your computer and use it in GitHub Desktop.
Download ZIP
comet chart (prototype)
Raw
cometChart.css
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;
}
Raw
cometChart.js
// 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')
});
Raw
cometChartFunctions.js
// 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;
});
};
Raw
index.html
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="cometChartFunctions.js"></script>
<script src="cometChart.js"></script>
Raw
output2.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment