Social development practitioner. Trying to understand our world.
Published unlisted
Edited
Jun 17, 2020
md`# Assemble a Group and Map It`
nepal_admin_map_test = html`<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display:block;width:70%;height:auto;">
<path d="${path(docs_gov_np)}" fill="none" stroke="black" stroke-width="2"></path><!-- returns only first instance-->
<path d="${path(ghimire_admin3_DANG_group)}" fill="red" fill-opacity=".2" stroke="black" stroke-width="2"></path><!--doesn't work-->
<path d="${path(ghimire_admin3_DANG_find)}" fill="orange" fill-opacity=".6" stroke="black" stroke-width="2"></path><!--doesn't work-->
<path d="${path(ghimire_admin3_DANG_filter)}" fill="orange" fill-opacity=".6" stroke="black" stroke-width="2"></path><!--doesn't work-->
<path d="${path(ghimire_admin3_DANG_filter_collection)}" fill="orange" fill-opacity=".6" stroke="black" stroke-width="2"></path><!--WORKS-->
<path d="${path(GoN_DANG_find)}" fill="blue" fill-opacity=".2" stroke="black" stroke-width="2"></path><!--only one value in data set, so appears normal-->
<path d="${path(GoN_DANG_group)}" fill="purple" fill-opacity=".2" stroke="black" stroke-width="2"></path><!--doesn't work-->
</svg>`
ghimire_admin3_DANG_filter_collection = ({type: "FeatureCollection", features: ghimire_admin3.features.filter(f => f.properties.DISTRICT === "DANG")})
ghimire_admin3_DANG_filter = ghimire_admin3.features.filter(f => f.properties.DISTRICT === "DANG")
ghimire_admin3_DANG_find = ghimire_admin3.features.find(f => f.properties.DISTRICT === "DANG")
ghimire_admin3_DANG_group = d3.group(ghimire_admin3.features, f => f.properties.DISTRICT === "DANG")
ghimire_admin3_DISTRICT = d3.group(ghimire_admin3.features, f => f.properties.DISTRICT)
ghimire_admin3 = FileAttachment("ghimire_admin3_municipal_simplified.json").json()
GoN_DANG_group = d3.group(ghimire_admin3.features, f => f.properties.DISTRICT === "DANG")
GoN_DANG_find = docs_gov_np.features.find(f => f.properties.DISTRICT === "DANG")
GoN_DISTRICT = d3.group(docs_gov_np.features, f => f.properties.DISTRICT)
docs_gov_np = FileAttachment("docs-gov-np_nepal-districts.geojson").json()
d3 = require('d3','d3-array@^2.2')
path = d3.geoPath(projection)
width = 975
height = Math.ceil(path.bounds(docs_gov_np)[1][1])
projection = d3.geoIdentity()
.reflectY(true)
.fitWidth(width, docs_gov_np)
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.
