The avatar for @osserman
Stephen Osserman
Data Scientist and Visualization Engineer with a background in spatial analytics and mapping.
Published
Edited
Jun 14, 2022
1 fork
7 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
widthMountainInFeet = 40000
Insert cell
mountainMinFeet = d3.min(JSON.parse(MtHood2[0].poly_raw).coordinates[0].map(d=>d[1]))
// just grabbing from first angle in MtHood2 -- but they are all the same.
Insert cell
topOfSkyInFeet = 16000
Insert cell
mounainSquishFactor = 1.4 // how much narrower to make the mountain than it really is
Insert cell
aspectRatioMountain = mounainSquishFactor * (topOfSkyInFeet-mountainMinFeet)/(widthMountainInFeet)
Insert cell
widthMountain = width - (margins.left + margins.right)
Insert cell
heightMountain = widthMountain * aspectRatioMountain
Insert cell
yScaleMountain = d3.scaleLinear().domain([topOfSkyInFeet,mountainMinFeet]).range([0, heightMountain])
Insert cell
xScaleMountain = d3.scaleLinear().domain([-(widthMountainInFeet/2), widthMountainInFeet/2]).range([0, widthMountain])
Insert cell
asymPlotWidth = 375
Insert cell
asymPlotHeight = 55
Insert cell
xScaleAsymPlot = d3.scaleLinear().domain([0,357]).range([0, asymPlotWidth])
Insert cell
yScaleAsymPlot = d3.scaleLinear().domain([0, d3.max(MtHood2.map(d=> d.asym_area))]).range([asymPlotHeight, 0])
Insert cell
mapMtHoodCircleRadius = 27
Insert cell
startAngleIn = 138/3 // initial angle of mountain cross-section and control points
Insert cell
mutable mountainAngleI = 138/3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable snowline = 7500
Insert cell
Insert cell
md `### Map Data, Projection and Bounds`
Insert cell
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json")
Insert cell
Insert cell
projection =
d3.geoAlbers()
.rotate([121.7,0])
.center([0, 45.27])
.scale(2000)
Insert cell
// there must be an easier way -- but this grabs a set of geojson features and calcuates the bounds with some padding. These can then be passed to size and transform the g's to make sure the map fits well
projectedBounds = function(features, proj, padding=10) {
let boundsArray = features
.map(d => d3.geoPath().projection(projection).bounds(d))
let x = d3.min(boundsArray.map(d => d3.min(d.map(d1 => d1[0])))) - padding
let y = d3.min(boundsArray.map(d => d3.min(d.map(d1 => d1[1])))) - padding
let width = (padding * 2) + d3.max(boundsArray.map(d => d3.max(d.map(d1 => d1[0])))) - x
let height = (padding * 2) + d3.max(boundsArray.map(d => d3.max(d.map(d1 => d1[1])))) - y
return ({x: x, y:y, width:width, height:height })
}
Insert cell
mapBounds = projectedBounds(
topojson.feature(us, us.objects.states).features.filter(d => d.id == 41 | d.id == 53),
projection)
Insert cell
Insert cell
d3 = require('d3@6')
Insert cell
topojson = require("topojson-client@3")
Insert cell
MtHood2 = FileAttachment("MtHood_test4@1.json").json()
Insert cell
import {select} from '@jashkenas/inputs'
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more