Voronoi for hotspots
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/u/19954023/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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment