Public
Edited
Jul 19, 2023
Insert cell
Insert cell
Array.isArray({})
Insert cell
Insert cell
g
Insert cell
speciesBySite
Insert cell
contour_data = {
const outData = [];
speciesBySite.map((s) => {
let subset = g !== "All" ? s[1].filter((d) => d[0] === g) : s[1];
console.log(s[0]);
let speciesCount = d3.sum(subset, (d) => d[1]);
let loc = [
bcSiteLocs.find((d) => d.site === s[0]).long,
bcSiteLocs.find((d) => d.site === s[0]).lat
];
let array = new Array(speciesCount).fill(projection(loc));
outData.push([...array]);
});
return outData.flat();
}
Insert cell
g
Insert cell
projection = d3
.geoAlbers()
.rotate([126, 0])
.center([0, 50.3])
.parallels([50, 58.5])
.scale(8000)
.translate([960 / 2.1, 600 / 2])
// projection = d3
// .geoAlbers()
// .rotate([126, 0])
// .center([0, 50.3])
// .parallels([50, 58.5])
// .scale(3000)
// .translate([width - 160, height - 200])
Insert cell
dataset = "CTD"
Insert cell
bcSiteLocs
Insert cell
bc = topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng)
Insert cell
BC_Midres
Insert cell
clip = false
Insert cell
color = d3.scaleSequentialQuantile([...contours.map(d => d.value)], t =>
d3.interpolateRdYlGn(1 - Math.pow(0.01 + t, 1 / curve))
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
contour = d3
.contourDensity()
.x(d => d[0])
.y(d => d[1])
.size([width, height])
.bandwidth(bandwith)
.thresholds(thresholds)
.cellSize(cellsize)
Insert cell
contours = contour(contour_data)
Insert cell
path = d3.geoPath(projection)
Insert cell
sphere = ({ type: "Sphere" })
Insert cell
height = 600
Insert cell
speciesBySite = groupNumBySite
Insert cell
import {
bcSiteLocs,
groupNumBySite,
uniqGroups
} from "@mbrownshoes/integrated-coastal-observatory-ico-visualizations"
Insert cell
import { BC_Midres, states } from "73c68590a6b8ba4c"
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@6", "d3-geo-projection@2")
Insert cell
// world = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
Insert cell

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.
Learn more