Displaying planetary data from nasa.gov to test Parallel Coordinates in d3 with the awesome parcoords library
-
-
Save chitacan/eeedcf1d3c930e2f1a21 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // http://bl.ocks.org/3687826 | |
| d3.divgrid = function(config) { | |
| var columns = []; | |
| var dg = function(selection) { | |
| if (columns.length == 0) columns = d3.keys(selection.data()[0][0]); | |
| // header | |
| selection.selectAll(".header") | |
| .data([true]) | |
| .enter().append("div") | |
| .attr("class", "header") | |
| var header = selection.select(".header") | |
| .selectAll(".cell") | |
| .data(columns); | |
| header.enter().append("div") | |
| .attr("class", function(d,i) { return "col-" + i; }) | |
| .classed("cell", true) | |
| selection.selectAll(".header .cell") | |
| .text(function(d) { return d; }); | |
| header.exit().remove(); | |
| // rows | |
| var rows = selection.selectAll(".row") | |
| .data(function(d) { return d; }) | |
| rows.enter().append("div") | |
| .attr("class", "row") | |
| rows.exit().remove(); | |
| var cells = selection.selectAll(".row").selectAll(".cell") | |
| .data(function(d) { return columns.map(function(col){return d[col];}) }) | |
| // cells | |
| cells.enter().append("div") | |
| .attr("class", function(d,i) { return "col-" + i; }) | |
| .classed("cell", true) | |
| cells.exit().remove(); | |
| selection.selectAll(".cell") | |
| .text(function(d) { return d; }); | |
| return dg; | |
| }; | |
| dg.columns = function(_) { | |
| if (!arguments.length) return columns; | |
| columns = _; | |
| return this; | |
| }; | |
| return dg; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <title>Linking to Data Table</title> | |
| <!-- http://syntagmatic.github.com/parallel-coordinates/ --> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script> | |
| <script src="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js"></script> | |
| <script src="divgrid.js"></script> | |
| <div id="example" class="parcoords"></div> | |
| <div id="grid"></div> | |
| <script id="brushing">// quantitative colour scale | |
| var green_to_blue = d3.scale.linear() | |
| .domain([9, 50]) | |
| .range(["#7AC143", "#00B0DD"]) | |
| .interpolate(d3.interpolateLab); | |
| var color = function(d) { return green_to_blue(d['Length of Day (hours)']); }; | |
| var parcoords = d3.parcoords()("#example") | |
| .color(color) | |
| .alpha(0.4); | |
| // load csv file and create the chart | |
| d3.csv('planet.csv', function(data) { | |
| parcoords | |
| .data(data) | |
| .render() | |
| .brushMode("1D-axes"); // enable brushing | |
| // create data table, row hover highlighting | |
| var grid = d3.divgrid(); | |
| d3.select("#grid") | |
| .datum(data.slice(0,10)) | |
| .call(grid) | |
| .selectAll(".row") | |
| .on({ | |
| "mouseover": function(d) { parcoords.highlight([d]) }, | |
| "mouseout": parcoords.unhighlight | |
| }); | |
| // update data table on brush event | |
| parcoords.on("brush", function(d) { | |
| d3.select("#grid") | |
| .datum(d.slice(0,10)) | |
| .call(grid) | |
| .selectAll(".row") | |
| .on({ | |
| "mouseover": function(d) { parcoords.highlight([d]) }, | |
| "mouseout": parcoords.unhighlight | |
| }); | |
| }); | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Planet | Length of Day (hours) | Distance from Sun (km) | Orbital Period (years) | Mass (ME) | Diameter (km) | |
|---|---|---|---|---|---|---|
| Mercury | 4222.6 | 57.9 | 0.2408467 | 0.05527 | 4879 | |
| Venus | 2802 | 108.2 | 0.61519726 | 0.815 | 12104 | |
| Earth | 24 | 149.6 | 1.0000174 | 1 | 12756 | |
| Mars | 24.7 | 227.9 | 1.8808158 | 0.10745 | 6792 | |
| Jupiter | 9.9 | 778.6 | 11.862615 | 317.83 | 142984 | |
| Saturn | 10.7 | 1433.5 | 29.447498 | 95.159 | 120536 | |
| Uranus | 17.2 | 2872.5 | 84.016846 | 14.5 | 51118 | |
| Neptune | 16.1 | 4495.1 | 164.79132 | 17.204 | 49528 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); | |
| body { | |
| font-size: 14px; | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| margin: 20px auto 20px; | |
| width: 960px; | |
| line-height: 1.45em; | |
| } | |
| a { | |
| color: #454545; | |
| } | |
| a:hover { | |
| color: #000; | |
| } | |
| ul { | |
| margin: 0 20px; | |
| padding: 0; | |
| } | |
| .dark { | |
| background: #222; | |
| } | |
| #example { | |
| min-height: 300px; | |
| margin: 12px 0; | |
| } | |
| p { | |
| width: 560px; | |
| } | |
| pre { | |
| color: #444; | |
| font-family: Ubuntu Mono, Monaco, monospace; | |
| padding: 4px 8px; | |
| background: #f2f2f2; | |
| border: 1px solid #ccc; | |
| } | |
| h1 small { | |
| font-weight: normal; | |
| font-size: 0.5em; | |
| } | |
| h3 { | |
| margin-top: 40px; | |
| } | |
| .float { | |
| float: left; | |
| } | |
| .centered { | |
| text-align: center; | |
| } | |
| .hide { | |
| display: none; | |
| } | |
| input { | |
| font-size: 16px; | |
| } | |
| /* data table styles */ | |
| #grid { height: 240px; } | |
| .row, .header { clear: left; font-size: 11px; line-height: 24px; height: 24px; } | |
| .row:nth-child(odd) { background: rgba(0,0,0,0.05); } | |
| .header { font-weight: bold; } | |
| .cell { float: left; overflow: hidden; white-space: nowrap; width: 160px; height: 18px; } | |
| .col-0 { width: 120px; } | |
| /* parcoords styles */ | |
| .parcoords > svg, .parcoords > canvas { | |
| font: 11px "Source Code Pro", Consolas, monaco, monospace; | |
| position: absolute; | |
| } | |
| .parcoords > canvas { | |
| pointer-events: none; | |
| } | |
| .parcoords text.label { | |
| cursor: default; | |
| } | |
| .parcoords rect.background { | |
| fill: transparent; | |
| } | |
| .parcoords rect.background:hover { | |
| fill: rgba(120,120,120,0.2); | |
| } | |
| .parcoords .resize rect { | |
| fill: rgba(0,0,0,0.1); | |
| } | |
| .parcoords rect.extent { | |
| fill: rgba(255,255,255,0.25); | |
| stroke: rgba(0,0,0,0.6); | |
| } | |
| .parcoords .axis line, .parcoords .axis path { | |
| fill: none; | |
| stroke: #454545; | |
| shape-rendering: crispEdges; | |
| } | |
| .parcoords canvas { | |
| opacity: 1; | |
| -moz-transition: opacity 0.5s; | |
| -webkit-transition: opacity 0.5s; | |
| -o-transition: opacity 0.5s; | |
| } | |
| .parcoords canvas.faded { | |
| opacity: 0.25; | |
| } | |
| .parcoords { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment