{
replay;
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
// mutable name = 0;
// d3.interval((elapsed, i) => {
// mutable name = mutable name + 1;
// }, (speed * 4000) / 147);attrTween
const map = (container.value = new mapboxgl.Map({
container,
// Bogotá 4.7110° N, 74.0721° W
center: [-114.4659426, 49.07319046],
zoom: 8,
style: "mapbox://styles/jguerrag/cjuerw13z2vja1fndc9wzk7eo",
scrollZoom: false
}));
// Setup our svg layer that we can manipulate with d3
const bb = container.getBoundingClientRect();
const height = 500;
const 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");
// .call(zoom);
let cg = svg.append("g").attr("transform", `translate(${685},${135})`);
// function calendar(element) {
// element.selectAll("*").remove();
cg.append("text")
.classed("calendar-date", true)
.text("")
.attr("dy", "-5")
.attr("font-size", "23px")
.attr("text-anchor", "start")
.attr("text-transform", "uppercase")
.attr("font-family", "monospace")
.attr("font-weight", "bold")
.attr("fill", "black");
// }
// calendar(cg);
let count = 0;
d3.interval(() => {
d3.select(".calendar-date")
.transition()
.text(
bear_data[0].properties.dates[count].toLocaleString(undefined, {
year: "numeric",
month: "short",
day: "numeric"
})
);
count++;
}, (speed * 1000) / bear_data[0].properties.dates.length);
//Project any point to map's current state
function projectPoint(lon, lat) {
// let dateIndex = bear_data[0].geometry.coordinates.findIndex(
// d => d[0] === lon
// );
// console.log(lon, lat);
// if (dateIndex !== -1) {
// mutable name = newBear.properties.dates[dateIndex];
// }
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);
// console.log("h", path);
const g = svg.append("g").attr("id", "map-layers");
let current_circle = undefined;
function tweenDash() {
// console.log(this);
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function(t) {
// console.log(t);
return i(t);
};
}
const bearPath = g
.append("g")
.selectAll("path")
.data(bear_data)
.join("path")
.attr("class", "lines")
.attr("d", path)
.attr("fill", "none")
.attr("stroke-width", 5)
.attr("stroke", (d, i) => {
// console.log("here", d);
return "steelblue";
// return color(d.properties);
})
.attr("stroke-opacity", 0.5)
.attr("stroke-linecap", "round");
const circle = svg
.append("circle")
.attr("r", 6)
.attr(
"transform",
"translate(" + bear_data[0].geometry.coordinates[0] + ")"
)
.style("fill", "yellow")
.style("stroke", "#444");
// transition();
animatePath();
function transition() {
circle
.transition()
.ease(d3.easeLinear)
.duration(speed * 1000)
.attrTween("transform", translateAlong(bearPath.node()))
.end()
.then(transition);
}
// Returns an attrTween for translating along the specified path element.
function translateAlong(circuitLine) {
var l = circuitLine.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = circuitLine.getPointAtLength(t * l);
// console.log(p);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
function animatePath() {
g.selectAll(".lines")
.transition()
.ease(d3.easeLinear)
.duration(speed * 1000)
.attrTween("stroke-dasharray", tweenDash);
}
// return svg.node();
// yield container;
}
import { newBear } from '79f3fe6b7d87b530'
// (newBear.geometry.coordinates[1] = [-114.4658438, 49.21817663])
newBear.geometry.coordinates
bear_data[0].properties.dates.length
date
speed = 40
projection = d3
.geoAlbers()
.rotate([126, 0])
.center([0, 51.2])
.parallels([50, 58.5])
.scale(25400)
.translate([960, 600 / 2])
filter_index = new_time.indexOf(date)
utcSeconds = time[0]
d = new Date(time[0])
d.setUTCSeconds(utcSeconds)
interval = d3.timeMonth.every(1)
height = 500
d3 = require("d3@6")
_ = require("lodash")
topojson = require("topojson-client@3")
import { bcSiteLocs, flatData, uniqClass } from 'a918fce3c1f416e8'
us.objects
states = topojson.feature(us, us.objects.states)
import { states as us } from "@harrystevens/mapping-gridded-data-with-a-voronoi-diagram"
import { BC_Midres } from '@mbrownshoes/how-i-start-maps-in-d3'
import { Scrubber } from "@mbostock/scrubber"
raw = FileAttachment("Male 150 GPS points.csv").csv({ typed: true })
md`Netcdf processing`
bear_data = {
const data = [];
data.push(newBear);
return data;
}
bear_data[0].geometry.coordinates.findIndex(d => d[0] === -114.926283075)
dt = aq.from(allData)
last = array => array[array.length - 1]
d3.groups(both, d => d.site)
d3.max(dataBySite, d => d3.max(d.data, dd => dd.depth_mean))
plot_data = dt1.objects()
formatDay = d3.timeFormat("%Y-%m-%d %H")
timeParser = d3.timeParse("%Y-%m-%d %H")
// timeParser(formatDay(new_time[1]))
// new_time[1]
aq.addFunction('parse_mdy', makeHourly, { override: true })
Latscombined = lats.concat(latsEva)
Lonscombined = lons.concat(lonsEva)
Timecombined = time.concat(timeEva)
Sitescombined = site.concat(siteEva)
site = Array.from({ length: lats.length })
.fill(['Mike'])
.flat()
lats = reader.getDataVariable("latitude")
latsEva = readerEva.getDataVariable("latitude")
depthcombined = depth.concat(depthEva)
depthEva = readerEva.getDataVariable("depth")
depth = reader.getDataVariable("depth")
lons = reader.getDataVariable("longitude")
lonsEva = readerEva.getDataVariable("longitude")
new Date(timeEva[0])
new Date(time[0])
timeEva = readerEva.getDataVariable("time")
time = reader.getDataVariable("time")
reader.variables
readerEva.variables
reader = new NetCDFReader(data)
readerEva = new NetCDFReader(data_eva)
data = FileAttachment("mike579.nc").arrayBuffer()
data_eva = FileAttachment("eva.nc").arrayBuffer()
import { aq, op } from '@uwdata/arquero'
mapboxgl = {
const gl = await require("mapbox-gl");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1Ijoiamd1ZXJyYWciLCJhIjoiY2pueW9uMGhzMDA3NDN3bXp5b2Rqbzk1YiJ9.3scgV-j4d394mvOUqtz1XQ";
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
NetCDFReader = require('netcdfjs@1.0.0/dist/netcdfjs.js')
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.
