Skip to content

Instantly share code, notes, and snippets.

@seliopou
Last active Aug 29, 2015
Embed
What would you like to do?
test
{"description":"test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"planets.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"asdf":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}
var planets = [
{ 'name' : 'mercury', 'diameter' : 4879, 'distance' : 57.9 },
{ 'name' : 'venus', 'diameter' : 12104, 'distance' : 108.2 },
earth = { 'name' : 'earth', 'diameter' : 12756, 'distance' : 149.6 },
{ 'name' : 'mars', 'diameter' : 6792, 'distance' : 227.9 },
{ 'name' : 'jupiter', 'diameter' : 142984, 'distance' : 778.6 },
{ 'name' : 'saturn', 'diameter' : 120536, 'distance' : 1433.5 },
{ 'name' : 'uranus', 'diameter' : 51118, 'distance' : 2872.5 },
neptune = { 'name' : 'neptune', 'diameter' : 49528, 'distance' : 4495.1 }
];
// The svg variable is assigned to a selection containing the svg
// element that's dispayed to the left of this text box. Perform
// operations on this selection and they will immediately appear
// to the left as you code.
//
var svg = d3.select("svg")
svg.selectAll('circle')
.data(planets)
.enter().append('circle')
.attr('cy', 100);
svg.selectAll('circle')
.attr('r', function(d) { return 4 * d.diameter / earth.diameter ; })
.attr('cx', function(d) { return 740 * d.distance / neptune.distance; } );
circle:nth-of-type(1) {
fill : rgb(185, 189, 152);
}
circle:nth-of-type(2) {
fill : rgb(205, 159, 63);
}
circle:nth-of-type(3) {
fill : rgb(51, 133, 145);
}
circle:nth-of-type(4) {
fill : rgb(162, 52, 37);
}
circle:nth-of-type(5) {
fill : rgb(195, 162, 85);
}
circle:nth-of-type(6) {
fill : rgb(188, 165, 51);
}
circle:nth-of-type(7) {
fill : rgb(121, 161, 137);
}
circle:nth-of-type(8) {
fill : rgb(87, 143, 130);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment