hexRes = 2
map = {
const canvas = d3
.create("canvas")
.attr("width", width)
.attr("height", height)
.node();
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext("2d");
scaleCanvas(canvas, ctx);
function draw() {
ctx.fillStyle = "rgba(5,5,5,1)";
ctx.fillRect(0, 0, width, height);
const path = d3.geoPath(projection, ctx);
ctx.save();
ctx.beginPath(),
path(land),
(ctx.strokeStyle = "rgba(255, 255, 255, 0.12)"),
ctx.stroke();
ctx.restore();
ctx.strokeWidth = 0.5;
ctx.save();
ctx.beginPath(),
path(hexbinGeoJSON),
(ctx.strokeStyle = "rgba(255, 0, 0, 1)"),
// (ctx.fillStyle = "rgba(255, 0, 0, 0.2)"),
ctx.stroke();
ctx.restore();
// const slicedMonthlyData = groupedMonthlyData[i][1].slice(
// 0,
// sliceFilter * speed
// );
slicedMonthlyData.forEach(d => {
// if (d.longitude > lngFilter * 2 - 160) return false;
if (!d.longitude || !d.latitude || !d) return false;
const loc = projection([d.longitude, d.latitude]);
if (!loc) return null;
const [x, y] = loc;
// const x = width / 2;
// const y = height / 2;
console.log(d, x, y);
ctx.fillStyle = "rgba(10, 220, 50, 0.75)";
ctx.fillRect(x, y, 2, 2);
});
ctx.strokeStyle = "transparent";
// ctx.beginPath(), path(outline), (ctx.strokeStyle = "#FFF"), ctx.stroke();
}
draw();
// svg.append("g").attr("transform", "translate(${height},20)");
// .append(() => legend({ ramp, title: data.title, width: 260 }));
return canvas;
}
hexbinnedData = slicedMonthlyData.map(d => {
return {
...d,
hexParent: h3.geoToH3(+d.latitude, +d.longitude, hexRes)
};
})
hexbinGroupedData = d3.group(hexbinnedData, d => {
return d.hexParent;
})
hexbins = [...hexbinGroupedData.keys()]
hexbinGeoJSON = geojson2h3.h3SetToFeatureCollection(hexbins, (h, i) => {
return hexbinGroupedData.get(h).length;
})
// i = 0
//lngFilter = 120
projection = d3
// .geoAlbersUsa()
.geoMiller()
// .geoInterruptedMollweideHemispheres()
// .geoVanDerGrinten2()
//.translate([width / 2, height / 2])
// .scale([width * 0.2])
.fitWidth(width * 0.98, land)
.translate([width / 2, height / 2])
land = topojson.feature(world, world.objects.land)
topojson = require("topojson-client@3")
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
data = FileAttachment("TestHexLatLong.csv").csv()
// sortedData = _.sortBy(data, d => {
// return d["location_id"];
// })
monthlyData = FileAttachment("monthly.csv").csv()
sortedData = _.sortBy(monthlyData, d => {
return d["location_id"];
})
groupedMonthlyData = d3
.groups(sortedData, d => d.anchor_date)
.sort(([a], [b]) => d3.ascending(new Date(a), new Date(b)))
extent = d3.extent(data, d => {
return +d.longitude;
})
outline = ({ type: "Sphere" })
extentLat = d3.extent(data, d => {
return +d.latitude;
})
height = width * 0.6
import { scaleCanvas } from "@john-guerra/canvas-retina-display"
// i = 0
steps = Array.from({ length: groupedMonthlyData.length }, (_, i) => i)
geojson2h3 = require('https://bundle.run/geojson2h3@1.0.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.
