duration = 100
mutable x = null
mutable tick = 0
{
replay;
if (x !== null) {
progress.value = 0;
while (progress.value < progress.max) {
await Promises.delay(duration);
progress.value += 1;
mutable tick = progress.value;
yield progress.value;
}
} else {
progress.value = 0;
}
}
progress = html`<progress max="${dataByDate.features.length - 1}"></progress>`
bearWalks = {
await visibility();
if (visibility()) {
mutable x = 0;
}
replay;
const container = html`<div style="height:600px; ">`;
yield container; // Give the container dimensions.
const map = (container.value = new mapboxgl.Map({
container,
center: [-114.6659426, 49.3],
zoom: r1,
style: r,
scrollZoom: false,
interactive: false
}));
map.addControl(new mapboxgl.ScaleControl({ position: 'bottom-right' }));
// Setup our svg layer that we can manipulate with d3
const bb = container.getBoundingClientRect();
const height = 600;
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},${35})`);
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", d => {
return r === "mapbox://styles/mapbox/satellite-v9" ? "white" : "black";
});
//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);
// console.log("h", path);
const g = svg.append("g").attr("id", "map-layers");
let current_circle = undefined;
let circle;
// console.log(dataByDate.features[0][0].geometry.coordinates[0]);
circle = svg
.append("circle")
// .append("image")
// .attr("xlink:href", bear)
.attr("r", 6)
.attr(
"transform",
"translate(" + dataByDate.features[0][0].geometry.coordinates[0] + ")"
)
.style("fill", "#8A643C")
.style("stroke", "#8A643C");
function animatePath(ind) {
g.selectAll("#linesMade" + ind)
.transition()
.ease(d3.easeLinear)
.duration(d => {
return duration;
})
.attrTween("stroke-dasharray", tweenDash);
}
// animate
// invalidation;
dataByDate.features.forEach((e, i) => {
setTimeout(function() {
const bearPath = g
.append("g")
.selectAll("path")
.data(e)
.join("path")
.attr("id", "linesMade" + i)
.attr("class", "lines")
.attr("d", path)
.attr("fill", "none")
.attr("stroke-width", 5)
.attr("stroke", (d, i) => {
return "#1E5D6F";
})
// .attr("stroke-opacity", 0.4)
.attr("stroke-linecap", "round");
animatePath(i);
circle
.transition()
.ease(d3.easeLinear)
.duration((d, i) => {
return duration;
})
.attrTween("transform", translateAlong(bearPath.node()))
.end();
// }
// 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) {
// console.log(t);
var p = circuitLine.getPointAtLength(t * l);
// console.log(p);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
}, i * duration);
});
}
bear_data[0].properties.dates
allDates = [...new Set(gf.map(d => d.fullDate))]
bear_data
(577 * 100) / 1000
bear = FileAttachment(
"Google-Noto-Emoji-Animals-Nature-22259-bear-face.ico"
).url()
import { newBear, filledData, gf } from '79f3fe6b7d87b530'
speed = 40
// utcSeconds = time[0]
// d = new Date(time[0])
height = 500
d3 = require("d3@6")
_ = require("lodash")
topojson = require("topojson-client@3")
// raw = FileAttachment("Male 150 GPS points.csv").csv({ typed: true })
filledData[0]
gf[0]
dataByDate = {
const out = {};
const datetime = [];
const coords = [];
const dates = [];
const features = [];
// properties.pickuptime = {}
for (let i = 0; i < gf.length - 1; i++) {
const properties = {};
// datetime.push(d.date);
// coords.push([d.mean_lon, d.mean_lat]);
// properties.pickuptime =
let geometry = {};
features.push([
{
type: "Feature",
pickuptime: gf[i].fullDate,
dropofftime: gf[i + 1].fullDate,
geometry: {
type: "LineString",
coordinates: [
[gf[i].Long, gf[i].Lat],
[gf[i + 1].Long, gf[i + 1].Lat]
]
}
}
]);
out.features = features;
out.type = "FeatureCollection";
}
// mutable debug = d3.extent(datetime);
// out.type = "FeatureCollection";
// out.properties = {};
// out.properties.pickuptime = d3.extent(datetime)[0];
// out.properties.dropofftime = d3.extent(datetime)[1];
// out.properties.dates = datetime;
// out.geometry = {};
// out.geometry.type = "LineString";
// out.geometry.coordinates = {};
// out.geometry.coordinates = coords;
return out;
}
bear_data = {
const data = [];
data.push(newBear);
return data;
}
last = array => array[array.length - 1]
timeParser = d3.timeParse("%Y-%m-%d %H")
// timeParser(formatDay(new_time[1]))
// new_time[1]
// time = reader.getDataVariable("time")
// 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'
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.
