Skip to content

Instantly share code, notes, and snippets.

@johnpoole

johnpoole/README.md

Forked from eesur/README.md
Created April 23, 2019 00:02
Show Gist options
  • Save johnpoole/1d14545dfe63c680ae6efa242735e2fe to your computer and use it in GitHub Desktop.
Save johnpoole/1d14545dfe63c680ae6efa242735e2fe to your computer and use it in GitHub Desktop.
Download ZIP
d3js | us hex map
Raw
README.md

flashing heatmap (random data updating, every five seconds)—testing out the very useful and awesome tilegrams

Raw
index.html
<!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>
Raw
script-compiled.js
'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');
});
}
Raw
stateCodes.js
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'
}
];
Display the source blob
Display the rendered blob
Raw
tiles-topo-us.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment