/cometChart.css
forked from zanarmstrong/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; | |
| } |
| // 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); | |
| // 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); | |
| }; |
| <!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> |
| 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