Updated previous bl.ock which used transparent circles——this version using voronoi
Note: Toggle grid via button top right.
Inspiration:
<!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="//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>
(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');
}
});
})();@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;
}