Skip to content

Instantly share code, notes, and snippets.

@eesur

eesur/README.md

Last active May 15, 2019 23:53
Show Gist options
  • Save eesur/8678df74ee7efab6d645de07a79ebcc5 to your computer and use it in GitHub Desktop.
Save eesur/8678df74ee7efab6d645de07a79ebcc5 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