Pulling in data in a simple list and svg shapes.
Data is of varying planetary years in earth days.
The planets revolve around the sun in different amounts of time, so a "year" on each planet is a different amount of time. The farther a planet is from the sun, the longer its year. source
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Planets</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <style> | |
| body {font-family: monospace; line-height: 160%; font-size: 18px; max-width: 80%; margin: 0;} | |
| ul {display: block; position: fixed; left: 10px; top: 10px;} | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var dataset = // embedded json , data from http://www.enchantedlearning.com/subjects/astronomy/age.shtml | |
| [ | |
| { "planet": "Mercury", "age" : 87.96, "colour" : "grey" }, | |
| { "planet": "Venus", "age" : 224.68, "colour" : "purple" }, | |
| { "planet": "Earth", "age" : 365.26, "colour" : "blue" }, | |
| { "planet": "Mars", "age" : 686.98, "colour" : "red" }, | |
| { "planet": "Jupiter", "age" : 4332.7141, "colour" : "green" }, | |
| { "planet": "Saturn", "age" : 10759.0986, "colour" : "red" }, | |
| { "planet": "Uranus", "age" : 30707.4082, "colour" : "white" }, | |
| { "planet": "Neptune", "age" : 60198.5006, "colour" : "yellow" }, | |
| ]; | |
| var list = d3.select("body").append("ul").selectAll("ul") | |
| .data(dataset) | |
| .enter() | |
| .append("li") | |
| .text(function (d) { | |
| return d["planet"] + " is :" + d["age"]; | |
| }); | |
| // width and height | |
| var w = 900; | |
| var h = 500; | |
| var x = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d.age; })]) | |
| .range([0, h]); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| var circles = svg.selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle"); | |
| // ************ just to move the circles on mouse over ************ | |
| // d3.selection.prototype.moveToFront = function() { | |
| // return this.each(function(){ | |
| // this.parentNode.appendChild(this); | |
| // }); | |
| // }; | |
| d3.selection.prototype.moveToBack = function() { | |
| return this.each(function() { | |
| var firstChild = this.parentNode.firstChild; | |
| if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); | |
| }; | |
| // ************ end circles on mouse over ************ | |
| circles.attr("cx", function(d, i) { | |
| return (i * 88) + 10; | |
| }) | |
| .attr("cy", h/2 +10) | |
| .attr('fill-opacity', 0.8) | |
| .attr("r", function(d, i) { | |
| return x(d.age) /2.2; | |
| }) | |
| .style("fill", function(d) { | |
| return d.colour; | |
| }); | |
| circles.on("mouseover",function(){ // trigger mouse circles | |
| var sel = d3.select(this) | |
| sel.moveToBack(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
