Updated previous bl.ock which used transparent circles——this version using voronoi
Note: Toggle grid via button top right.
Inspiration:
Updated previous bl.ock which used transparent circles——this version using voronoi
Note: Toggle grid via button top right.
Inspiration:
(function() { | |
'use strict'; | |
var data = [ | |
{ | |
planet: 'Moon', | |
shuttle: null, | |
galileo:null, | |
ionA: null, | |
ionB: null, | |
solarSail: null, | |
poster: 0.134, | |
jet: null, | |
car: null, | |
x: 120, | |
y: 300, | |
r: 60 | |
}, | |
{ | |
planet: 'Neptune', | |
shuttle: 11.4, | |
galileo: 5.9, | |
ionA: 4.9, | |
ionB: 0.490086, // 179d, | |
solarSail: 1.6, | |
poster: 1528, | |
jet: 495, | |
car: 4248, | |
x: 365, | |
y: 30, | |
r: 30 | |
}, | |
{ | |
planet: 'Uranus', | |
shuttle: 7.3, | |
galileo: 3.8, | |
ionA: 3.1, | |
ionB: 0.309384,// 113d | |
solarSail: 1, | |
poster: 917, | |
jet: 310, | |
car: 2657, | |
x: 440, | |
y: 75, | |
r: 30 | |
}, | |
{ | |
planet: 'Saturn', | |
shuttle: 3.6, | |
galileo: 1.8, | |
ionA: 1.5 , | |
ionB: 0.150585, //55d | |
solarSail: 0.490086 ,//179d | |
poster: 425, | |
jet: 145, | |
car: 1244, | |
x: 570, | |
y: 75, | |
r: 60 | |
}, | |
{ | |
planet: 'Nearest Star', | |
shuttle: null, | |
galileo: null, | |
ionA: null, | |
ionB: null, | |
solarSail: null, | |
poster: 425, | |
jet: null, | |
car: null, | |
x: 608, | |
y: 172, | |
r: 5 | |
}, | |
{ | |
planet: 'Jupiter', | |
shuttle: 1.9, | |
galileo: 1, | |
ionA: 0.829587, //303d | |
ionB: 0.0848752, //31d | |
solarSail: 0.273791,//100d | |
poster: 209, | |
jet: 71, | |
car: 610, | |
x: 705, | |
y: 125, | |
r: 55 | |
}, | |
{ | |
planet: 'Mars', | |
shuttle: 0.574961,//210d | |
galileo: 0.298432,//109d | |
ionA: 0.246412 ,//90d | |
ionB: 0.0246412,//9d | |
solarSail: 0.0793994,//29d | |
poster: 20, | |
jet: 8, | |
car: 71, | |
x: 600, | |
y: 300, | |
r: 35 | |
}, | |
{ | |
planet: 'Pluto', | |
shuttle: 15.1, | |
galileo: 7.8, | |
ionA: 6.5 , | |
ionB: 0.651622,//238d | |
solarSail: 2.1, | |
poster: 20, | |
jet: 657, | |
car: 5548, | |
x: 867, | |
y: 187, | |
r: 25 | |
}, | |
{ | |
planet: 'Venus', | |
shuttle: 0.273791,//100d | |
galileo: 0.142371,//52d | |
ionA: 0.11773,//43d | |
ionB: 0.011773,//4.3d | |
solarSail: 0.011773,//14d | |
poster: 14, | |
jet: 6, | |
car: 46, | |
x: 650, | |
y: 418, | |
r: 40 | |
}, | |
{ | |
planet: 'Sun', | |
shuttle: null, | |
galileo: null, | |
ionA: null, | |
ionB: null, | |
solarSail: null, | |
poster: 53, | |
jet: 18, | |
car: 152, | |
x: 845, | |
y: 410, | |
r: 75 | |
}, | |
{ | |
planet: 'Mercury', | |
shuttle: 0.142371,//52d | |
galileo: 0.0739236,// 27d | |
ionA: 0.060234,//22d | |
ionB: 0.0060234,//2.2d | |
solarSail: 0.0199867,//7.3d | |
poster: 28, | |
jet: 11, | |
car: 95, | |
x: 930, | |
y: 503, | |
r: 30 | |
} | |
]; | |
// console.log(data); | |
// vars | |
var width = 960, | |
height = 630; | |
// margin not used as want it to be flush | |
var svg = d3.select('#vis').append('svg') | |
.attr({ | |
width: width, | |
height: height | |
}); | |
var voronoi = d3.geom.voronoi() | |
.x(function(d) { return d.x; }) | |
.y(function(d) { return d.y; }) | |
.clipExtent([[0, 0], [width, height]]); | |
//Initiate a group element to place the voronoi diagram in | |
var voronoiGroup = svg.append('g') | |
.attr('class', 'voronoiWrapper'); | |
// var to toggle grid true/false | |
var toggleVoronoi = true; | |
//Create the Voronoi grid | |
voronoiGroup.selectAll('path') | |
.data(voronoi(data)) | |
.enter().append('path') | |
.attr('d', function(d, i) { | |
console.log('M' + d.join('L') + 'Z'); | |
return 'M' + d.join('L') + 'Z'; | |
}) | |
.datum(function(d) { return d.point; }) | |
.attr('class', function (d,i) { return ' v-' + i; }) | |
// .style('stroke', '#EC008C') // view cells | |
.style('fill', 'none') | |
.style('pointer-events', 'all') | |
.on('mouseover', function(d, i) { | |
d3.select('header h1').text(d.planet); | |
d3.select('header p').html( | |
'<span>Shuttle @ 28,000mph: </span>' + d.shuttle + '<br>' + | |
'<span>Galileo @ 54,000mph: </span>' + d.galileo + '<br>' + | |
'<span>Ion A @ 65,000mph: </span>' + d.ionA + '<br>' + | |
'<span>Ion B @ 650,000mph: </span>' + d.ionB + '<br>' + | |
'<span>Solar Sail @ 200,000mph: </span>' + d.solarSail + '<br>' + | |
'<span id="poster">Poster time: ' + d.poster + ' </span><br>' + | |
'<span>Jet plane @ 600mph: </span>' + d.jet + '<br>' + | |
'<span>By car @ 70mph: </span>' + d.car + '<br>' | |
); | |
}) | |
.on('mouseout', function(d, i) { | |
console.log('roll out'); | |
}); | |
d3.select('#grid-bt').on('click', function() { | |
toggleVoronoi = !toggleVoronoi; | |
if (!toggleVoronoi) { | |
d3.selectAll('.voronoiWrapper path').style('stroke', '#EC008C'); | |
} else { | |
d3.selectAll('.voronoiWrapper path').style('stroke', 'none'); | |
} | |
}); | |
})(); |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>d3 | hotspots | voronoi</title> | |
<meta name="author" content="Sundar Singh | eesur.com"> | |
<link rel="stylesheet" href="main.css"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
</head> | |
<body> | |
<header> | |
<h1>move over planets</h1> | |
<p>Duration in years to 'planets'</p> | |
<nav><button id="grid-bt">VORONOI GRID</button></nav> | |
</header> | |
<section id="vis"></section> | |
<script src="d3_code_hotspots.js" charset="utf-8"></script> | |
</body> | |
</html> |
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); | |
body { | |
font-family: "Source Code Pro", Consolas, monaco, monospace; | |
line-height: 1.5; | |
font-weight: 400; | |
background-color: #130C0E; | |
padding: 0; | |
/*margin: 0;*/ | |
margin: 0 auto; | |
width: 960px; | |
height: 100px; | |
} | |
h1 { | |
font-size: 48px; | |
color: #7AC143; | |
font-weight: 400; | |
margin: 0; | |
padding: 0; | |
line-height: 100%; | |
} | |
p { | |
font-size: 18px; | |
color: #7AC143; | |
font-weight: 400; | |
margin: 0; | |
padding: 0; | |
letter-spacing: 6px; | |
text-transform: uppercase; | |
} | |
p span { | |
letter-spacing: 1px; | |
color: #EE3124; | |
font-size: 14px; | |
} | |
span#poster { | |
color: #FDBB30; | |
} | |
text { | |
font-size: 14px; | |
fill: #7AC143; | |
} | |
#vis { | |
background-image: url("https://dl.dropboxusercontent.com/s/o70zlvdmfzwggni/panets_distance_viz.jpg"); | |
background-repeat: no-repeat; | |
background-size: 960px 630px; | |
} | |
header { | |
background: transparent; | |
z-index: 22; | |
position: absolute; | |
height: 88px; | |
padding: 20px; | |
pointer-events: none; | |
} | |
button { | |
font-family: "Source Code Pro", Consolas, monaco, monospace; | |
font-size: 14px; | |
background: #130C0E; | |
color: #7AC143; | |
border: none; | |
outline:none; | |
padding: 4px 8px; | |
letter-spacing: 1px; | |
pointer-events: all; | |
} | |
button:hover { | |
background: #7AC143; | |
color: #130C0E; | |
} | |
nav { | |
width: 960px; | |
} | |
#grid-bt { | |
position: absolute; | |
display: block; | |
text-align: right; | |
right: 40px; | |
top: 0; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis line { | |
stroke: black; | |
} | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis .grid-line{ | |
stroke: #7AC143; | |
shape-rendering: crispEdges; | |
stroke-opacity: .8; | |
} |