Skip to content

Instantly share code, notes, and snippets.

@tarekrached

tarekrached/cometChart.css

Forked from zanarmstrong/cometChart.css
Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tarekrached/cb2c793914089ccbf919 to your computer and use it in GitHub Desktop.
Save tarekrached/cb2c793914089ccbf919 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cometChart.css
body {
font-family: sans-serif;
}
.segments polygon {
shape-rendering: geometricPrecision;
}
.segments path {
fill-opacity: 0.8;
}
.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: 8,
right: 8,
bottom: 8,
left: 8
},
width = 320,
height = 320;
// introduce svg element
var svg = d3.select("#chart")
.append("svg")
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
var cometCount = 12,
innerRadius = 10,
cometLength = 40,
startWidth = 2,
endWidth = 10;
var outerRadius = innerRadius + cometLength;
var dAngle = 2 * Math.PI / cometCount;
var cometsG = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("class", "segments");
var scales = {
x: d3.scale.linear().domain([-100,100]).range([0,width]),
y: d3.scale.linear().domain([-100,100]).range([height,0])
}
var comets = Array.apply(1, Array(cometCount))
.map(function(u, i) {
iAngle = i * dAngle;
console.log(i, iAngle, dAngle, innerRadius * Math.cos(iAngle), scales.x(innerRadius * Math.cos(iAngle)));
return({
angle: iAngle,
x1: scales.x(innerRadius * Math.cos(iAngle)),
y1: scales.y(innerRadius * Math.sin(iAngle)),
r1: startWidth,
x2: scales.x(outerRadius * Math.cos(iAngle)),
y2: scales.y(outerRadius * Math.sin(iAngle)),
r2: endWidth
})
;})
console.log(comets);
drawComets(cometsG, comets);
Raw
cometChartFunctions.js
// data to paths
function makeCometPathD(comet) {
var x1 = comet.x1,
y1 = comet.y1,
r1 = comet.r1,
x2 = comet.x2,
y2 = comet.y2,
r2 = comet.r2;
var angle = Math.atan((y2 - y1) / (x2 - x1));
var leftToRight = x1 <= x2;
var rAngle = angle + (Math.PI / 2);
var xDelta1 = Math.cos(rAngle) * r1;
var yDelta1 = Math.sin(rAngle) * r1;
var xDelta2 = Math.cos(rAngle) * r2;
var yDelta2 = Math.sin(rAngle) * r2;
var vertices = {
a: { x: x1 + xDelta1, y: y1 + yDelta1 },
b: { x: x2 + xDelta2, y: y2 + yDelta2 },
c: { x: x2 - xDelta2, y: y2 - yDelta2 },
d: { x: x1 - xDelta1, y: y1 - yDelta1 }
}
// add an 's' property on each vertex with its string representation
Object.keys(vertices).forEach(function(v){
vertices[v].s = vertices[v].x +","+ vertices[v].y;
});
// move to point (a), next to start point
var d = "M" + vertices.a.s;
// straight line to point (b) next to end point
d = d + "L" + vertices.b.s;
// arc to (c) on the other side of the endpoint
// A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y
var largeArcFlag = leftToRight ? 1 : 0;
var sweepFlag = largeArcFlag ? 0 : 1;
d = d + "A" + r2 + "," + r2 + " 0 " + largeArcFlag + " " + sweepFlag + " " + vertices.c.s;
// straight line back to the other side of start point
d = d + "L" + vertices.d.s;
// arc home
// A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y
d = d + "A" + r1 + "," + r1 + " 0 " + largeArcFlag + " " + sweepFlag + " " + vertices.a.s;
return d;
};
// function to draw comets
function drawComets(element, data){
element.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", makeCometPathD);
};
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Comet Chart</title>
<link rel="stylesheet" href="cometChart.css">
<header>
</header>
<p>Fork of <a href="https://github.com/zanarmstrong">zanarmstrong</a>'s <a href="http://bl.ocks.org/zanarmstrong/0f3f39deed0ee1653354">Lightweight version of Comet Chart</a> with rounded comets</p>
<div id="chart"></div>
<script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script>
<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