Web content at the Houses of the Oireachtas
Public
Edited
Jan 24, 2024
viewof selectConstituency = Inputs.select(Array.from(new Set(constituencyFile.features.map(d => (d.properties.ENG_NAME_VALUE)))))
individualConstituencies = constituencyFile.features.filter(d => d.properties.ENG_NAME_VALUE == `${selectConstituency}`)
constituencyNames = Array.from(new Set(constituencyFile.features.map(d => (d.properties.ENG_NAME_VALUE))))
constituencyMap = new Map(constituencyFile.features.map(d => [(d.properties.ENG_NAME_VALUE), d]))
circle = d3.geoCircle().center([-9, 53.4]).radius(2)()
//choropleth1 = 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 => constituencyMap2023.get(d.properties.ENG_NAME_VALUE).properties.ENG_NAME_VALUE,
//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.constituencyMap2023.get(d.properties.ENG_NAME_VALUE).properties.ENG_NAME_VALUE,
//textAnchor: "middle",
//stroke: "white",
fill: "black"
})
),
]
})
//constituencyMapExperimentClickable = {
const container = yield htl.html`<div style="height: 1200px;">`;
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.ENG_NAME_VALUE) {
layer.bindTooltip(feature.properties.ENG_NAME_VALUE);
}
}
function myStyle(feature) {
return {
//fillColor: 'grey',
weight: 0.05,
opacity: 1,
color: 'grey',
dashArray: '3',
fillOpacity: 0.2
};
}
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map)
.bindPopup(constituencylayer.feature.properties.ENG_NAME_VALUE).openPopup();
L.circle(e.latlng, //radius
).addTo(map);
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 1,
color: '',
dashArray: '',
fillOpacity: 0.01
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
function resetHighlight(e) {
constituencyFile.resetStyle(e.target);
}
map.on('locationfound', onLocationFound);
L.geoJSON(constituencyFile, {
style: myStyle,
onEachFeature: onEachFeature,
filter: function(feature, layer){return feature.properties.ENG_NAME_VALUE}
}).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.
