Web content at the Houses of the Oireachtas
constituencyFile2 = fetch(`https://data-osi.opendata.arcgis.com/datasets/osi::constituency-boundaries-ungeneralised-national-electoral-boundaries-2023.geojson?where=1=1&outSR=%7B%22latestWkid%22%3A2157%2C%22wkid%22%3A2157%7D`).then((response) => response.json())
constituencyFile = FileAttachment("CSO_Electoral_Divisions_-_National_Statistical_Boundaries_-_2022_-_Ungeneralised (3) (1).json").json()
constituencyMapExperimentClickable = {
const container = yield htl.html`<div style="height: 700px;">`;
const map = L.map(container);
const constituencylayer = L.geoJSON(constituencyFile).addTo(map);
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.CON_SEAT_) {
layer.bindTooltip(feature.properties.CON_SEAT_);
}
}
function myStyle(feature) {
return {
fillColor: "green",
weight: 2,
opacity: 0.05,
color: 'grey',
dashArray: '3',
fillOpacity: 0.15
};
}
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map)
.bindPopup("You are currently in this constituency").openPopup();
L.circle(e.latlng, //radius
).addTo(map);
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
function resetHighlight(e) {
constituencyFile2.resetStyle(e.target);
}
map.on('locationfound', onLocationFound);
L.geoJSON(constituencyFile2, {
style: myStyle,
onEachFeature: onEachFeature,
filter: function(feature, layer){return feature.properties.CON_SEAT_}
}).addTo(map);
map.fitBounds(constituencylayer.getBounds(), {maxZoom: 19});
map.locate({setView: true, maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
//Plot.plot({
projection: "albers-usa",
width,
marks: [
Plot.geo(nation),
Plot.geo(states, { strokeOpacity: 0.25 }),
Plot.geo(counties, { strokeOpacity: 0.1 })
]
})
import {us} from "@observablehq/us-geographic-data"
nation = topojson.feature(us, us.objects.nation)
counties = topojson.feature(us, us.objects.counties)
states = topojson.feature(us, us.objects.states)
choropleth = Plot.plot({
projection: {
type: "albers",
domain: circle,
rotate:([1, 0]),
parallels: ([50, 60]),
inset: "15"
},
style: {backgroundColor: "#89CFF0",},
width: 1100,
height: 800,
color: {
scheme: "Greens",
type: "quantize",
n: 5,
//domain: [1, 5000],
label: `Constituencies`,
legend: true
},
marks: [
Plot.geo(constituencyFile, Plot.centroid({
fill: "white",
//strokeOpacity: 0.15,
//fill: d => filteredChoroplethHeadings.get(d.properties.CON_SEAT_),
//fill: d => choroplethData.get(d.properties.CON_SEAT_),
tip: true,
channels:{
Constituency: d => constituencyMap.get(d.properties.CON_SEAT_).properties.CON_SEAT_,
//Questions: d => choroplethData.get(d.properties.CON_SEAT_),
//Questions: d => filteredChoroplethHeadings.get(d.properties.CON_SEAT_),
//Questions: d => filterByHeading.get(d.properties.CON_SEAT_),
}
})
),
Plot.geo(countiesFile, Plot.centroid({
//fill: "white",
strokeOpacity: 0.15,
//fill: d => filteredChoroplethHeadings.get(d.properties.CON_SEAT_),
//fill: d => choroplethData.get(d.properties.CON_SEAT_),
//tip: true,
//channels:{
//County: d => d.properties.name
//Questions: d => choroplethData.get(d.properties.CON_SEAT_),
//Questions: d => filteredChoroplethHeadings.get(d.properties.CON_SEAT_),
//Questions: d => filterByHeading.get(d.properties.CON_SEAT_),
//}
})
),
Plot.geo(constituencyFile, {stroke: "black"}),
Plot.text(
constituencyFile,
Plot.centroid({
text: d => d.constituencyMap.get(d.properties.CON_SEAT_).properties.CON_SEAT_,
//textAnchor: "middle",
//stroke: "white",
fill: "black"
})
),
Plot.text(
countiesFile,
Plot.centroid({
text: d => countiesFile.get(d => d.properties.name),
textAnchor: "middle",
stroke: "grey",
fill: "purple"
})
)
]
})
circle = d3.geoCircle().center([-9, 53.4]).radius(2)()
constituencyMap = new Map(constituencyFile.features.map(d => [(d.properties.CON_SEAT_), d]))
constituencyFile1 = FileAttachment("Constituency_Boundaries_-_Generalised_20m_-_National_Electoral_Boundaries_-_2017_no_seat_numbers.geojson").json()
constituencyMapExperiment = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const constituencylayer = L.geoJSON(constituencyFile).addTo(map);
map.fitBounds(constituencylayer.getBounds(), {maxZoom: 19});
map.locate({setView: true, maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
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.
