viewof compassFilter
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
compassFilter
import { viewof compassFilter } from "@cs7290/simple-compass-selector"
// data = {
// map.update(stinky.length > 0 ? stinky : [])
// return d3.select(map).selectAll("circle").data();
// }
stinky = {
// https://observablehq.com/@mbostock/fetch-error-handling
const url='https://raw.githubusercontent.com/ds5110/stinky2/main/sample_data/smc_data.csv';
const response = await fetch(url);
if (!response.ok) {
return []
// throw new Error("sorry about that...unable to fetch");
}
return d3.csvParse(await response.text()).map(d => [+d.longitude, +d.latitude]);
}
data = {
const wind = {
N: 0,
NE: 45,
E: 90,
SE: 135,
S: 180,
SW: 225,
W: 270,
NW: 315
};
const csv = await d3.csv(
"https://raw.githubusercontent.com/ds5110/stinky2/main/sample_data/merged_data.csv"
);
let data = csv.map((d) => [
new Date(
+d.date.slice(0, 4),
+d.date.slice(5, 7) - 1,
+d.date.slice(8, 10)
),
wind[d.wind_direction],
[+d.longitude, +d.latitude]
]);
return data.filter((d) => compassFilter[d[1]]);
}
styling = {
d3.select(brush).select(".x-axis").attr("font-size", 15);
d3.select(brush).select(".y-axis").attr("font-size", 15);
}
url = (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.basemaps.cartocdn.com/rastertiles/voyager/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`
// url = (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.basemaps.cartocdn.com/light_all/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`
x = d3.scaleLinear(d3.extent(data, d => d[0]), [margin.left, width - margin.right])
y = d3.scaleLinear([0, 360], [brushHeight - margin.bottom, margin.top])
margin = ({top: 30, right: 50, bottom: 30, left: 80})
height = 500
// initialCenter = [-69.4455, 45.2538] // Maine is 45.2538° N, 69.4455° W -- use with initial scale 1 << 15
initialCenter = [-70.2568, 43.645] // Portland, Maine 43.6591° N, 70.2568° W
initialScale = 1 << 21
features = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json").then(topology => topojson.feature(topology, topology.objects.states))
topojson = require("topojson-client@3")
//import {viewof chart} with {data, title, x, margin} from "@pbogden/click-to-recenter-brush-iii"
import { viewof chart, height as brushHeight } with {
y,
data,
title,
margin
} from "@pbogden/click-to-recenter-brush-iii"
d3 = require("d3@6", "d3-tile@1")
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.
