flashing heatmap (random data updating, every five seconds)—testing out the very useful and awesome tilegrams
-
-
Save johnpoole/1d14545dfe63c680ae6efa242735e2fe to your computer and use it in GitHub Desktop.
d3js | us hex map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: Consolas, monaco, monospace; | |
background: #130C0E; | |
font-weight: 400; | |
color: #fff; | |
} | |
.wrap { | |
width: 960px; | |
margin: 20px auto; | |
} | |
#state { | |
padding-left: 20px; | |
font-weight: normal; | |
letter-spacing: 1px; | |
} | |
.border:hover { | |
cursor: pointer; | |
opacity: 0.7; | |
} | |
.state-label { | |
fill: #fff; | |
fill-opacity: .9; | |
letter-spacing: 1px; | |
font-size: 18px; | |
font-weight: 600; | |
text-anchor: middle; | |
pointer-events: none; | |
} | |
</style> | |
<script type='text/javascript' src='//d3js.org/d3.v4.min.js'></script> | |
<script type='text/javascript' src='//d3js.org/topojson.v1.min.js'></script> | |
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/d3-legend/2.13.0/d3-legend.min.js'></script> | |
<script type='text/javascript' src='//cdn.jsdelivr.net/lodash/4.16.6/lodash.min.js'></script> | |
<script type='text/javascript' src='stateCodes.js'></script> | |
<body> | |
<!-- START required DOM structure --> | |
<section class="wrap"> | |
<header> | |
<h2 id='state'>US states heatmap vis, rollover to see random data :)</h2> | |
</header> | |
<div id='vis'> | |
<svg></svg> | |
</div> | |
</section> | |
<!-- d3 code --> | |
<script src="script-compiled.js"></script> | |
<script> | |
render() | |
setInterval(function() { | |
// make it dance | |
render() | |
}, 5000) | |
d3.select(self.frameElement).style('height', '650px'); | |
</script> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
function render() { | |
var w = 960; | |
var h = 560; | |
var stateCodesWithNames = window.stateCodesWithNames; | |
var topojson = window.topojson; | |
var d3 = window.d3; | |
var _ = window._; | |
var data = generateData(); | |
function generateData() { | |
var states = ['DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY', 'AK', 'CA', 'CO', 'AZ', 'AR', 'AL', 'CT']; | |
function dataArray() { | |
var data = []; | |
_.times(states.length, function (n) { | |
data.push({ | |
code: states[n], | |
value: _.random(1, 98.5) | |
}); | |
}); | |
return data; | |
} | |
return dataArray(); | |
} | |
var f = d3.format('.1f'); | |
// var color = d3.scaleSequential(d3.interpolateViridis) | |
// color.domain([0, 100]) | |
var svg = d3.select('svg').attr('width', w).attr('height', h); | |
d3.json('tiles-topo-us.json', function showData(error, tilegram) { | |
var tiles = topojson.feature(tilegram, tilegram.objects.tiles); | |
var transform = d3.geoTransform({ | |
point: function point(x, y) { | |
return this.stream.point(x, -y); | |
} | |
}); | |
var path = d3.geoPath().projection(transform); | |
var g = svg.append('g').attr('transform', 'translate(-350,' + (h - 10) + ')'); | |
// build list of state codes | |
var stateCodes = []; | |
// build list of state names | |
var stateNames = []; | |
// build a list of colour values | |
var colorValues = []; | |
tilegram.objects.tiles.geometries.forEach(function (geometry) { | |
if (stateCodes.indexOf(geometry.properties.state) === -1) { | |
stateCodes.push(geometry.properties.state); | |
// pass in state names | |
stateNames.push(_.find(stateCodesWithNames, { 'code': geometry.properties.state }).state); | |
// pass in colour values | |
colorValues.push(_.find(data, { 'code': geometry.properties.state }).value); | |
} | |
}); | |
console.log('stateCodes', stateCodes); | |
console.log('stateNames', stateNames); | |
console.log('colorValues', colorValues); | |
var linear = d3.scaleLinear().domain([0, _.mean(colorValues), d3.max(colorValues)]).range(['#FDBB30', '#F47521', '#EE3124']); | |
var borders = g.selectAll('.tiles').data(tiles.features).enter().append('path').attr('d', path).attr('class', 'border').attr('fill', function (d, i) { | |
return linear(colorValues[i]); | |
}).attr('stroke', '#130C0E').attr('stroke-width', 4); | |
borders.on('click', function (d, i) { | |
console.log('d', d); | |
console.log('stateCodes[i]', stateCodes[i]); | |
console.log('stateNames[i]', stateNames[i]); | |
}); | |
borders.on('mouseover', function (d, i) { | |
d3.select('#state').text(stateNames[i] + ' : ' + f(colorValues[i])); | |
}); | |
// add some labels | |
g.selectAll('.state-label').data(tiles.features).enter().append('text').attr('class', function (d) { | |
return 'state-label state-label-' + d.id; | |
}).attr('transform', function (d) { | |
return 'translate(' + path.centroid(d) + ')'; | |
}).attr('dy', '.35em') | |
// .attr('dx', '10px') | |
.text(function (d) { | |
return d.properties.state; | |
}); | |
svg.append('g').attr('class', 'legendLinear').attr('transform', 'translate(0,650)'); | |
var legendLinear = d3.legendColor().shapeWidth(40).cells(8).labelFormat(function (d) { | |
return _.round(d, -1); | |
}).orient('horizontal').scale(linear); | |
svg.select('.legendLinear').call(legendLinear); | |
svg.select('.legendLinear').append('text').attr('x', 0).attr('y', -10).attr('text-anchor', 'left').text('Number of Universities'); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var stateCodesWithNames = [ | |
{ | |
state : 'Alabama', | |
code : 'AL' | |
}, | |
{ | |
state : 'Alaska', | |
code : 'AK' | |
}, | |
{ | |
state : 'American Samoa', | |
code : 'AS' | |
}, | |
{ | |
state : 'Arizona', | |
code : 'AZ' | |
}, | |
{ | |
state : 'Arkansas', | |
code : 'AR' | |
}, | |
{ | |
state : 'California', | |
code : 'CA' | |
}, | |
{ | |
state : 'Colorado', | |
code : 'CO' | |
}, | |
{ | |
state : 'Connecticut', | |
code : 'CT' | |
}, | |
{ | |
state : 'Delaware', | |
code : 'DE' | |
}, | |
{ | |
state : 'Dist. of Columbia', | |
code : 'DC' | |
}, | |
{ | |
state : 'Florida', | |
code : 'FL' | |
}, | |
{ | |
state : 'Georgia', | |
code : 'GA' | |
}, | |
{ | |
state : 'Guam', | |
code : 'GU' | |
}, | |
{ | |
state : 'Hawaii', | |
code : 'HI' | |
}, | |
{ | |
state : 'Idaho', | |
code : 'ID' | |
}, | |
{ | |
state : 'Illinois', | |
code : 'IL' | |
}, | |
{ | |
state : 'Indiana', | |
code : 'IN' | |
}, | |
{ | |
state : 'Iowa', | |
code : 'IA' | |
}, | |
{ | |
state : 'Kansas', | |
code : 'KS' | |
}, | |
{ | |
state : 'Kentucky', | |
code : 'KY' | |
}, | |
{ | |
state : 'Louisiana', | |
code : 'LA' | |
}, | |
{ | |
state : 'Maine', | |
code : 'ME' | |
}, | |
{ | |
state : 'Maryland', | |
code : 'MD' | |
}, | |
{ | |
state : 'Marshall Islands', | |
code : 'MH' | |
}, | |
{ | |
state : 'Massachusetts', | |
code : 'MA' | |
}, | |
{ | |
state : 'Michigan', | |
code : 'MI' | |
}, | |
{ | |
state : 'Micronesia', | |
code : 'FM' | |
}, | |
{ | |
state : 'Minnesota', | |
code : 'MN' | |
}, | |
{ | |
state : 'Mississippi', | |
code : 'MS' | |
}, | |
{ | |
state : 'Missouri', | |
code : 'MO' | |
}, | |
{ | |
state : 'Montana', | |
code : 'MT' | |
}, | |
{ | |
state : 'Nebraska', | |
code : 'NE' | |
}, | |
{ | |
state : 'Nevada', | |
code : 'NV' | |
}, | |
{ | |
state : 'New Hampshire', | |
code : 'NH' | |
}, | |
{ | |
state : 'New Jersey', | |
code : 'NJ' | |
}, | |
{ | |
state : 'New Mexico', | |
code : 'NM' | |
}, | |
{ | |
state : 'New York', | |
code : 'NY' | |
}, | |
{ | |
state : 'North Carolina', | |
code : 'NC' | |
}, | |
{ | |
state : 'North Dakota', | |
code : 'ND' | |
}, | |
{ | |
state : 'Northern Marianas', | |
code : 'MP' | |
}, | |
{ | |
state : 'Ohio', | |
code : 'OH' | |
}, | |
{ | |
state : 'Oklahoma', | |
code : 'OK' | |
}, | |
{ | |
state : 'Oregon', | |
code : 'OR' | |
}, | |
{ | |
state : 'Palau', | |
code : 'PW' | |
}, | |
{ | |
state : 'Pennsylvania', | |
code : 'PA' | |
}, | |
{ | |
state : 'Puerto Rico', | |
code : 'PR' | |
}, | |
{ | |
state : 'Rhode Island', | |
code : 'RI' | |
}, | |
{ | |
state : 'South Carolina', | |
code : 'SC' | |
}, | |
{ | |
state : 'South Dakota', | |
code : 'SD' | |
}, | |
{ | |
state : 'Tennessee', | |
code : 'TN' | |
}, | |
{ | |
state : 'Texas', | |
code : 'TX' | |
}, | |
{ | |
state : 'Utah', | |
code : 'UT' | |
}, | |
{ | |
state : 'Vermont', | |
code : 'VT' | |
}, | |
{ | |
state : 'Virginia', | |
code : 'VA' | |
}, | |
{ | |
state : 'Virgin Islands', | |
code : 'VI' | |
}, | |
{ | |
state : 'Washington', | |
code : 'WA' | |
}, | |
{ | |
state : 'West Virginia', | |
code : 'WV' | |
}, | |
{ | |
state : 'Wisconsin', | |
code : 'WI' | |
}, | |
{ | |
state : 'Wyoming', | |
code : 'WY' | |
} | |
]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment