map = html`<svg viewBox="0 0 ${width} ${height}" style="display: block;">
<defs>
${export_paths.map(
(s, i) =>
`<marker id="triangle${i}" viewBox="0 0 2.5 2.5"
refX="1" refY="1.25"
markerUnits="strokeWidth"
markerWidth="2.5" markerHeight="2.5"
orient="auto">
<path d="M 0 0 L 2.5 1.25 L 0 2.5 z" fill-opacity="0.7" fill="${s.properties.startcolor}"/>
</marker>`
)}
</defs>
<path d="${path(graticule)}" fill="none" stroke="#eee"></path>
<path d="${path(outline)}" fill="none" stroke="#ddd"></path>
<path d="${path(world10m_wound)}" fill="#ccc" stroke="#aaa"></path>
${export_paths.map(
(s, i) =>
`<path d="${path(s)}" fill="none" stroke="${
s.properties.startcolor
}" stroke-width="${Math.max(
1.5,
s.properties.percentage * 10
)}" marker-end="url(#triangle${i})" stroke-opacity="0.7" ></path>`
)}
</svg>`
selected_with_percent.map((s) => Math.max(1.5, s.percentage * 10))
bulk_cobalt = FileAttachment("bulk_cobalt.csv").csv()
projection = selectProj.value().fitSize([width, height], world)
path = d3.geoPath(projection)
height = 600
world10m_wound = FileAttachment("world10m_wound.json").json()
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
//get center points of all countries
center = world.features
.map((w) =>
turf.centroid(w.geometry, {
properties: { ISO: w.properties.ADM0_A3 }
})
)
.filter((w) => w.properties.ISO != "USA")
.concat(usa)
tw = center.filter((f) => f.properties.ISO == "TWN")
//this is fussy but the "center" of the USA when factoring in Alaska and Hawaii ends up not in the center of the contiguous US and it looks kind of clunky is all
usa = [
Object({
type: "Feature",
properties: { ISO: "USA" },
geometry: { type: "Point", coordinates: [-98.583333, 39.833333] }
})
]
center.find((c) => c.properties.ISO == "USA")
selected = cobalt_export.filter((c) => c.key == selectYear)[0]
total = selected.values.reduce(function (acc, obj) {
return acc + parseInt(obj.NetWeight);
}, 0)
selected_with_percent = selected.values.map((s) => {
s.percentage = s.NetWeight / total;
return s;
})
// make lines between trading partners
export_paths = selected_with_percent
.map((m) => {
let start = center.filter((c) => c.properties.ISO == m.PISO);
let end = center.filter((c) => c.properties.ISO == m.RISO);
if ((start.length > 0) & (end.length > 0)) {
return turf.lineString(
[start[0].geometry.coordinates, end[0].geometry.coordinates],
{
start: m.Partner_Name,
end: m.Reporter_Name,
value: m.TradeQuantity,
startcolor: country_colors.find((c) => c.iso == m.PISO).color,
endcolor: country_colors.find((c) => c.iso == m.RISO).color,
percentage: m.percentage
}
);
}
})
.filter((f) => f != undefined)
.sort((a, b) => (a.properties.percentage > b.properties.percentage ? 1 : -1))
world = FileAttachment("ne_10m_admin_0.geojson.json").json()
nation_center = world.features.map((n) =>
turf.centroid(n, { properties: { name: n.properties.SOV_A3 } })
)
d3 = require("d3-collection@latest", "d3@5.9")
projections.map((p) => p.name)
import { projections } from "@d3/projection-comparison"
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.
