The avatar for @zhoiii
段
Published
Edited
Jun 19, 2021
Fork of The new Electoral College
6
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
transition = {
const states = d3.selectAll('path.boundary')
if (toggle == 'Map') {
states.transition().duration(3000)
.attr('transform', d => {
const centroid = geoPath.centroid(d),
x = centroid[0],
y = centroid[1]
return `translate(${x},${y})`
+ `scale(${ Math.sqrt(1) })`
+ `translate(${-x},${-y})`
})
} else if (toggle == 'Cartogram') {
states.transition().duration(3000)
.attr('transform', d => {
const centroid = geoPath.centroid(d),
x = centroid[0],
y = centroid[1]
return `translate(${x},${y})`
+ `scale(${ Math.sqrt(1) })`
+ `translate(${-x},${-y})`
})
}
}
Insert cell
geoPath = d3.geoPath()
Insert cell
height = 0.625 * map_width
Insert cell
map_width = width // < 800 ? width : 800
Insert cell
main_data_info = {
let map_file = await FileAttachment(
"2016_electoral_data.json"
).json();
let info_map = new Map();
map_file.forEach(function (o) {
let name = o.statePostal;
let data = o.reportingUnits[0].candidates;
info_map.set(name, {
data: data
});
});
return info_map;
}
Insert cell
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;
}
Insert cell
broken_tiles = {
let states = topojson.feature(map_file_B, map_file_B.objects.tiles);
return states;
}
Insert cell
map_file_B = {
return await FileAttachment(
"new_electoral_broken_tiles.topo.json"
).json();
}

Insert cell
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;
}
Insert cell
tiles = {
let states = topojson.feature(map_file_T, map_file_T.objects.tiles);
return states;
}
Insert cell
map_file_T = {
return await FileAttachment("new_electoral_tiles.topo@1.json").json();
}
Insert cell
info_map = {
let map_file = await FileAttachment(
"new_apportionment@1.csv"
).csv();
let info_map = new Map();
map_file.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;
}
Insert cell
import { legend, swatches } from "@d3/color-legend"
Insert cell
import { Radio } from "@observablehq/inputs"
Insert cell
tippy = require("tippy.js@6")
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require('d3@6')
Insert cell
style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light.css`
)}">`
Insert cell
html`<style>
td,th {
text-align: center;
}
.td {
padding: 20px
}
th {
border-bottom: solid 1px black;
}
</style>`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more