dataset = "CTD"
bc = topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng)
BC_Midres
clip = false
color = d3.scaleSequentialQuantile([...contours.map(d => d.value)], t =>
d3.interpolateRdYlGn(1 - Math.pow(0.01 + t, 1 / curve))
)
projection([p[0].longitude, p[0].latitude])
projection([p[0].longitude, p[0].latitude])
p[0].latitude
p = {
return dataset === "CTD"
? await d3.csv(
"https://gist.githubusercontent.com/Mbrownshoes/bea3b68601c5004145624bdb03eaa43e/raw/4ca68c36baa3a526c74f7a5f250d3ced0ba438c4/proflocations.csv",
d3.autoType
)
: await d3.csvParse(
await FileAttachment("ordereddata.csv").text(),
d3.autoType
);
}
// // convert to geojson
pointsGeo = p.map((d, i) => {
return {
id: i,
properties: {
...d
},
geometry: {
type: "Point",
coordinates: projection([d.longitude, d.latitude])
}
};
})
contour_data = pointsGeo.reduce((p, v) => {
// calculate the number of points based on the population data
const num_points = 1;
// create an array of that same value repeated to create stacked points tied to the data value
const array = new Array(num_points).fill(
v.geometry.coordinates,
0,
num_points
);
return [...p, ...array];
}, [])
viewof cellsize = Inputs.range([1, 10], {
step: 1,
value: 4,
label: "Cellsize"
})
contour = d3
.contourDensity()
.x(d => d[0])
.y(d => d[1])
.size([width, height])
.bandwidth(bandwith)
.thresholds(thresholds)
.cellSize(cellsize)
contours = contour(contour_data)
path = d3.geoPath(projection)
sphere = ({ type: "Sphere" })
md`
<br>
Contour map
`
// colour = d3
// .scaleSequential(function(t) {
// var tNew = Math.pow(t, 10);
// return d3.interpolateViridis(tNew);
// })
// .domain([0.024056261216234408, 1000])
url = (x, y, z) =>
`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${
devicePixelRatio > 1 ? "@2x" : ""
}?access_token=pk.eyJ1IjoibWF0YnJvd25oYWthaSIsImEiOiJjanQ0cGlzYmQwMHNjNDNvNWVrODAyYWI5In0.kc6L3DX6mqjJlLbyxWDEzA
`
height = 600
initialCenter = [-123 - 40 / 60, 48 + 50 / 60]
initialScale = 4096
// 1 << 2
// feature = d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us.json").then(topology => topojson.feature(topology, topology.objects.states))
import { BC_Midres, states } with {} from '73c68590a6b8ba4c'
topojson = require("topojson-client@3")
d3 = require("d3@6", "d3-geo-projection@2")
// world = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
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.
