The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
Thirty day Map Challenge: Day 1 - PointsMapping the Cities of US Highway Signs30 Days Map Challenge (3 ~ Polygons)Day 5 - OpenStreetMap GPS Traces#30DayMapChallenge 2021 (6 ~ Red)#30DayMapChallenge 2021 (7 ~ Green)30 Day Map Challenge: Day 8 - Blue#30DayMapChallenge 2021 (9 ~ Monochrome)30 Day Map Challenge - Raster! ⊞Day 11: 3D, 30 Day Map Challenge 2021#30DayMapChallenge 2021 (12 ~ Population)Interactive Plot Dashboard30 Day Map Challenge 2021 18 Water#30DayMapChallenge #21 Elevation30 Day Map Challenge: Day 22 - BoundariesHistorical Map: Day 24The Earth-Nose-Direction game
30 Day Map Challenge: Day 4 - Hexagons
Also listed in…
Observable's Instagram Shares
function make_tilegram() {
let div = d3
.create('div')
.style("width", `${map_width}px`)
.style("height", `${height}px`)
.style('overflow', 'hidden');
let svg = div
.append('svg')
.style('overflow', 'hidden')
.attr("viewBox", [0, 0, map_width, height]);
let map_obj, hex_data, boundary_data;
if (map_type == 'Together') {
map_obj = tiles;
hex_data = tiles;
boundary_data = tile_boundaries;
} else if (map_type == 'Broken') {
map_obj = broken_tiles;
hex_data = broken_tiles;
boundary_data = broken_tile_boundaries;
}
let proj = d3
.geoIdentity()
.reflectY(true)
.fitSize([map_width, height], map_obj);
let path = d3.geoPath().projection(proj);
let map = svg.append('g');
map
.selectAll("path.tile")
.data(hex_data.features)
.join("path")
.attr('class', 'tile')
.attr('d', path)
// .style('fill', () => d3.interpolateCool(Math.random()))
.style("fill", function(d) {
let fips = d.id;
let info = info_map.get(fips);
let p;
if (shade_by == "Votes") {
p = info.reps / max_reps;
return d3.interpolateBlues(p);
} else if (shade_by == "Vote change") {
p = (info.change + 2) / 4;
return d3.interpolateRdYlGn(p);
}
})
.attr('data-state', d => d.id)
.attr("stroke-width", '1px')
.attr("stroke", "white")
.attr("stroke-linejoin", "round");
map
.selectAll("path.boundary")
.data(boundary_data.features)
.join("path")
.attr('class', 'boundary')
.attr('d', path)
.style('fill', 'black')
.style("fill-opacity", 0)
.attr("stroke-width", '2px')
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr('data-state', d => d.id)
.on('pointerenter mouseenter', function(evt) {
let copy = this.cloneNode(true);
copy.setAttribute('stroke', 'black');
copy.setAttribute('stroke-width', '6px');
copy.setAttribute('class', 'temp');
copy.addEventListener('mouseleave', function() {
map.selectAll('.temp').remove();
});
let fips = d3.select(evt.target).attr('data-state');
let info = info_map.get(fips);
tippy(copy, {
allowHTML: true,
duration: 100,
// placement: 'top-end',
// followCursor: 'initial',
maxWidth: 420,
theme: 'light',
content: `
<table>
<tr><th>State</th><th>Votes</th><th>Change</th></tr>
<tr>
<td><span class="td">${info.name}</span></td>
<td><span class="td">${info.reps + 2}</span></td>
<td><span class="td">${info.change}</span></td>
</tr>
</table>
`
});
map.append(() => copy);
});
return div.node();
}
height = 0.625 * map_width
map_width = width // < 800 ? width : 800
max_reps = d3.max(Array.from(info_map.values()).map(o => o.reps))
info_map = {
let info_map = new Map();
apportionment_data.forEach(function(o) {
let fips = o.fips;
let name = o.state_name;
let abbr = o.abbr;
let pop = parseInt(o.apportionment_population);
let reps = parseInt(o.reps);
let change = parseInt(o.change);
info_map.set(fips, {
name: name,
abbr: abbr,
pop: pop,
reps: reps,
change: change
});
});
info_map.set('11', {
name: "District of Columbia",
abbr: 'DC',
reps: 1,
change: 0
});
return info_map;
}
apportionment_data = FileAttachment("new_apportionment.csv").csv()
broken_tile_boundaries = {
let map_file = await FileAttachment(
"new_electoral_broken_tile_boundaries.topo.json"
).json();
let boundaries = topojson.feature(map_file, map_file.objects.tiles);
return boundaries;
}
broken_tiles = {
let map_file = await FileAttachment(
"new_electoral_broken_tiles.topo.json"
).json();
let states = topojson.feature(map_file, map_file.objects.tiles);
return states;
}
tile_boundaries = {
let map_file = await FileAttachment(
"new_electoral_boundary_tiles.topo@2.json"
).json();
let boundaries = topojson.feature(map_file, map_file.objects.tiles);
return boundaries;
}
tiles = {
let map_file = await FileAttachment("new_electoral_tiles.topo@1.json").json();
let states = topojson.feature(map_file, map_file.objects.tiles);
return states;
}
import { legend, swatches } from "@d3/color-legend"
import { Radio } from "@observablehq/inputs"
tippy = require("tippy.js@6")
topojson = require("topojson-client@3")
d3 = require('d3@6')
style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light.css`
)}">`
html`<style>
td,th {
text-align: center;
}
.td {
padding: 20px
}
th {
border-bottom: solid 1px black;
}
</style>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.