Public
Edited
Jul 15, 2022
Insert cell
Insert cell
{
let container = html`<div style='height:500px;' />`;

yield container;

let map = new mapboxgl.Map({
container,
center: [-124, 50],
zoom: 5,
style: "mapbox://styles/hakai/ckwpei0yq08cj15nthgd4ql45",
scrollZoom: true
});

// Setup our svg layer that we can manipulate with d3
const bb = container.getBoundingClientRect();
var svg = d3
.select(container)
.append("svg")
.style("position", "absolute")
.style("top", 0)
.style("left", 0)
.attr("width", bb.width)
.attr("height", bb.height)
.style("pointer-events", "none"); // the svg shouldn't capture mouse events, so we can have pan and zoom from mapbox

//Project any point to map's current state
function projectPoint(lon, lat) {
var point = map.project(new mapboxgl.LngLat(lon, lat));
this.stream.point(point.x, point.y);
}
//Projection function
var transform = d3.geoTransform({ point: projectPoint });
var path = d3.geoPath().projection(transform);

const dots = svg
.selectAll(".puesto")
.data(buoys)
.join("path")
.attr("class", "puesto")
.style("fill", "red")
// .on("mouseover", d => (mutable hovered = d))
.style("pointer-events", "all");

const update = () => {
dots.attr("d", path);
};

// Every time the map changes, update the dots
map.on("viewreset", update);
map.on("move", update);
map.on("moveend", update);

invalidation.then(() => {
map.off("viewreset", update);
map.off("move", update);
map.off("moveend", update);
map.remove();
});

update();
}
Insert cell
projection = d3
.geoMercator()
.scale(1 / (2 * Math.PI))
.rotate([40, 0])
.center([40, 0])
.translate([0, 0])
Insert cell
// rad = 8
Insert cell
// hexbin = d3
// .hexbin()
// .radius(rad)
// .extent([[0, 0], [width, height]]) // extent of projected data (displayed)
// .x(function(d) {
// // console.log(d, projection(d));
// return projection(d)[0];
// })
// .y(function(d) {
// return projection(d)[1];
// })
Insert cell
Insert cell
p.map(point => {
return [+point.coordinates[0], +point.coordinates[1]];
})
Insert cell
buoys = [
{
short_name: "C46004",
lat: 50.94,
lon: -135.87,
long_name: "Middle Nomad",
pk: 1
},
{
short_name: "C46036",
lat: 48.3,
lon: -133.86,
long_name: "South Nomad",
pk: 2
},
{
short_name: "C46131",
lat: 49.91,
lon: -124.99,
long_name: "Sentry Shoal",
pk: 3
},
{
short_name: "C46132",
lat: 49.74,
lon: -127.93,
long_name: "South Brooks",
pk: 4
},
{
short_name: "C46134",
lat: 48.66,
lon: -123.48,
long_name: "Pat Bay Test Buoy",
pk: 5
},
{
short_name: "C46145",
lat: 54.38,
lon: -132.42,
long_name: "Central Dixon Entran",
pk: 6
},
{
short_name: "C46146",
lat: 49.34,
lon: -123.73,
long_name: "Halibut Bank",
pk: 7
},
{
short_name: "C46147",
lat: 51.83,
lon: -131.23,
long_name: "South Moresby",
pk: 8
},
{
short_name: "C46181",
lat: 53.82,
lon: -128.84,
long_name: "Nanakwa Shoal",
pk: 9
},
{
short_name: "C46182",
lat: 49.48,
lon: -123.29,
long_name: "Pam Rocks",
pk: 10
},
{
short_name: "C46183",
lat: 53.57,
lon: -131.14,
long_name: "North Hecate Strait",
pk: 11
},
{
short_name: "C46184",
lat: 53.92,
lon: -138.85,
long_name: "North Nomad",
pk: 12
},
{
short_name: "C46185",
lat: 52.42,
lon: -129.79,
long_name: "South Hecate Strait",
pk: 13
},
{
short_name: "C46204",
lat: 51.38,
lon: -128.77,
long_name: "West Sea Otter",
pk: 14
},
{
short_name: "C46205",
lat: 54.3,
lon: -133.4,
long_name: "West Dixon Entrance",
pk: 15
},
{
short_name: "C46206",
lat: 48.83,
lon: -126,
long_name: "La Perouse Bank",
pk: 16
},
{
short_name: "C46207",
lat: 50.88,
lon: -129.91,
long_name: "East Dellwood",
pk: 17
},
{
short_name: "C46208",
lat: 52.51,
lon: -132.69,
long_name: "West Moresby",
pk: 18
}
]
Insert cell
projection([p[0].longitude, p[0].latitude])
Insert cell
p = profileRaw.features
Insert cell
profileRaw = await FileAttachment("cioos_data (1).json").json()
Insert cell
// p = {
// return dataset === "CTD"
// ? await d3.csv(
// "https://gist.githubusercontent.com/Mbrownshoes/bea3b68601c5004145624bdb03eaa43e/raw/4ca68c36baa3a526c74f7a5f250d3ced0ba438c4/proflocations.csv"
// )
// : await d3.csvParse(
// await FileAttachment("ordereddata.csv").text(),
// d3.autoType
// );
// }
Insert cell
mutable outdata = null
Insert cell
mutable transform = d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(-initialScale)
.translate(...projection(initialCenter))
.scale(-1)
Insert cell
mapboxgl = {
const gl = await require("mapbox-gl");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoiaGFrYWkiLCJhIjoiY2lyNTcwYzY5MDAwZWc3bm5ubTdzOWtzaiJ9.6QhxH6sQEgK634qO7a8MoQ";
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
Insert cell
height = 600
Insert cell
initialCenter = [-123 - 40 / 60, 48 + 50 / 60]
Insert cell
initialScale = 4096
Insert cell
// 1 << 2
Insert cell
// feature = d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us.json").then(topology => topojson.feature(topology, topology.objects.states))
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5", "d3-tile@1", "d3-hexbin")
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