Public
Edited
Dec 29, 2023
shape_smoothing = 0.0
// demdel = FileAttachment("DemDelDistricts@1.tsv").tsv()
// demdel_precincts = demdel.map(d => d.Precinct)
map = {
container.innerHTML = '';
// const container = html`<div style="max-width: 100%"></div>`;
const mapContainer = html`<div style="width: 100%; height:800px; max-height: 100vmin; background: #666"></div>`;
container.appendChild(mapContainer);
// yield mapContainer;
// yield container;
let m = L.map(mapContainer, {
renderer: L.svg({padding: 0})
}).setView([41.08763212467916, -85.06439208984376], 9);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(m);
var district_style = {
fillOpacity: 0.1,
weight: 1,
color: hslToHex(4, 75, 50),
opacity: 1,
fillOpacity: .5
}
// let census_track_geojson = L.geoJson(census_track, {
// onEachFeature: (feature, layer) => {
// var poi = polylabel(layer.toGeoJSON().geometry.coordinates, 1.0)
// if (poi[0]) {
// L.marker([poi[1], poi[0]], {
// icon: L.divIcon({
// className: 'text-labels',
// html: feature.properties.NAMELSAD
// }),
// zIndexOffset: 1000,
// interactive: false
// }).addTo(m);
// }
// },
// style: {
// fillOpacity: 0,
// weight: 2,
// color: hslToHex(4, 75, 65),
// opacity: 1,
// },
// smoothFactor: shape_smoothing,
// }).addTo(m);
let precincts_geojson2 = L.geoJson(precincts_indiana, {
onEachFeature: (feature, layer) => {
var poi = polylabel(layer.toGeoJSON().geometry.coordinates, 1.0)
if (poi[0]) {
L.marker([poi[1], poi[0]], {
icon: L.divIcon({
className: 'text-label-small',
html: feature.properties.Precinct
}),
zIndexOffset: 1000,
interactive: false
}).addTo(m);
}
},
style: {
fillOpacity: 0,
weight: 1,
color: hslToHex(228, 100, 0),
opacity: 0.5,
},
smoothFactor: shape_smoothing
}).addTo(m);
var center_precincts = [
"EEL RIVER B", // A
"MILAN", // B
"WASHINGTON E", // C
"310", // D
"185", // E
"469", // F
"490", // G
"461", // H
"203", // I
"151", // J
"692", // K
"665", // L
];
let precincts_geojson = L.geoJson(precincts_indiana, {
// filter: (feature) => {
// return demdel_precincts.indexOf(feature.properties.Precinct) > -1
// },
onEachFeature: (feature, layer) => {
if (center_precincts.indexOf(feature.properties.Precinct) > -1) {
var poi = polylabel(layer.toGeoJSON().geometry.coordinates, 1.0)
if (poi[0]) {
L.marker([poi[1], poi[0]+.001], {
icon: L.divIcon({
className: 'text-label',
html: demdel_precinct_to_letter[feature.properties.Precinct]
}),
zIndexOffset: 1000,
interactive: false
}).addTo(m);
}
}
layer.setStyle({
fillColor: letter_to_color[demdel_precinct_to_letter[feature.properties.Precinct]],
title: feature.properties.Precinct,
tooltip: feature.properties.Precinct
})
},
style: {
fillOpacity: 0.5,
weight: 1.0,
color: "black",
opacity: 0.1,
},
smoothFactor: shape_smoothing,
}).addTo(m);
// let precincts_geojson = L.geoJson(precincts_shapefile , {
// onEachFeature: (feature, layer) => {
// if (center_precincts.indexOf(feature.properties.Precinct) > -1) {
// var poi = polylabel(layer.toGeoJSON().geometry.coordinates, 1.0)
// if (poi[0]) {
// L.marker([poi[1], poi[0]+.001], {
// icon: L.divIcon({
// className: 'text-label',
// html: demdel_precinct_to_letter[feature.properties.Precinct]
// }),
// zIndexOffset: 1000,
// interactive: false
// }).addTo(m);
// }
// }
// layer.setStyle({
// fillColor: letter_to_color[demdel_precinct_to_letter[feature.properties.Precinct]],
// title: feature.properties.Precinct,
// tooltip: feature.properties.Precinct
// })
// },
// style: {
// fillOpacity: 0.5,
// weight: 1.0,
// color: "black",
// opacity: 0.1,
// },
// smoothFactor: shape_smoothing
// }).addTo(m);
// let ac_geojson = L.geoJson(allen_county, {
// interactive: false,
// smoothFactor: shape_smoothing,
// style: {
// fillOpacity: 0,
// weight: 2,
// color: hslToHex(4, 75, 65),
// opacity: 1,
// }
// }).addTo(m);
// L.geoJson(cities_towns, {
// interactive: false,
// smoothFactor: shape_smoothing,
// style: {
// fillOpacity: 0,
// weight: 2,
// color: hslToHex(4, 75, 65),
// opacity: 1
// }
// }).addTo(m);
m.fitBounds(precincts_geojson.getBounds());
return m
}
polylabel = require('https://bundle.run/polylabel@1.1.0')
{
// return map.getOverlay()
}
style_block = html`<style>
.katex-display,p,h1,h2,h3,table,li,form,ul {
max-width: 100% ! important;
}
form {
width: inherit ! important;
}
.text-label-small {
color: black;
text-align: center! important;
font-size: 10px! important;
}
.text-label {
color: black;
font-size: 24px;
font-weight: bold;
}
</style>`
precincts_indiana = FileAttachment("Precincts9_15_2021-working-2.geojson").json()
precincts_indiana_2011 = FileAttachment("2011_Precincts.geojson").json()
census_track = FileAttachment("cb_2020_18_tract_500k.geojson").json()
// {
// var out = ["County,Precinct"]
// precincts_indiana.features.forEach(function(precinct) {
// if ( precinct.properties['COUNTYFP20'] == "075") {
// out.push(precinct.properties['NAME20'])
// }
// })
// return out.join("\n")
// }
district_shapefile = shapefile.read(await FileAttachment("House2021AdoptedOCT012021.shp").arrayBuffer(), await FileAttachment("House2021AdoptedOCT012021.dbf").arrayBuffer())
precincts_shapefile = shapefile.read(await FileAttachment("Allen_final_2023_precincts.shp").arrayBuffer(), await FileAttachment("Allen_final_2023_precincts.dbf").arrayBuffer())
pscd = FileAttachment("2024-state-del-precincts.csv").csv()
pscd_2022 = FileAttachment("Table 1-Grid view@1.csv").csv()
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.
