Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Eurostat-map: buttonsEurostat-map: minimapsEurostat-map: time sliderEurostat-map: sparkline mapsEurostat-map: focus on a particular areaEurostat-map: custom projectionsEurostat-map: stripe compositionEurostat-map: bivariate choroplethHello, eurostat-mapSmall multiple mapsEurostat-map: custom labels
Eurostat-map: flow map
flowMap = {
const map = eurostatmap
.map("flow")
.geo("world")
.width(960)
.height(500)
.projectionFunction(
d3
.geoAzimuthalEquidistant()
.rotate([-10, -30])
.scale(120)
.translate([400, 250])
)
.title("Flow map")
.subtitle(
"thematic map that uses lines or arrows to show movement between locations"
)
.flowGraph(JSON.parse(JSON.stringify(graphData)))
.flowColor("#72bb6f")
.flowMaxWidth(flowMaxWidth)
.flowMinWidth(2)
.flowOutlines(flowOutlines)
.flowGradient(flowGradient)
.flowArrows(flowArrows)
.flowOverlayColors(["#bbd7ee", "#c7e3c6"]) // exporter, importers
.flowTargetOffset(1)
.labels(
showLabels
? {
values: true,
backgrounds: false,
shadows: true
}
: false
)
.nutsLevel(0)
.zoomExtent([0.5, 10])
.build();
return map;
}
<style>
.em-flow-link-outline {
stroke-width: 0.5px !important;
}
.em-flow-flows {
opacity: ${opacity} !important;
}
.em-graticule{
stroke-width: 0px !important
}
</style>
graphData = ({
nodes: [
{ id: "FR", name: "France" },
{ id: "US", name: "USA" },
{ id: "ZA", name: "South Africa" },
{ id: "BR", name: "Brazil" },
{ id: "CA", name: "Canada" },
{ id: "CN", name: "China" },
{ id: "SA", name: "Saudi Arabia" },
{ id: "AR", name: "Argentina" },
{ id: "AU", name: "Australia" },
{ id: "IN", name: "India" },
{ id: "JP", name: "Japan" },
{ id: "NZ", name: "New Zealand" }
],
links: [
{ source: "FR", target: "US", value: 82018369 },
{ source: "FR", target: "ZA", value: 49697198 },
{ source: "FR", target: "BR", value: 45422327 },
{ source: "FR", target: "CA", value: 43038180 },
{ source: "FR", target: "CN", value: 34453478 },
{ source: "FR", target: "SA", value: 16164188 },
{ source: "FR", target: "AR", value: 12673336 },
{ source: "FR", target: "AU", value: 7178656 },
{ source: "FR", target: "IN", value: 6305366 },
{ source: "FR", target: "JP", value: 5883790 },
{ source: "FR", target: "NZ", value: 5883790 }
]
})
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.
