viewof floor = Inputs.radio([1, 2], {label: "Select floor", value: "floor"})
viewof maptype = Inputs.radio([1, 5], {label: "Select map", value: "maptype"})
viewof hour = Inputs.range([0, 23], {label: "hour", step: 1,value:'hour'})
function map(floor,hour){
const context = DOM.context2d(1751, 925);
context.canvas.style.maxWidth = "100%";
//context.fillRect(0, 0, width, height);
//context.strokeStyle = "#eee";
//context.lineWidth = 1.5;
//context.lineJoin = "round";
context.drawImage( floor == 1 ? land : land2,0,0);
const real_data =floor == 1 ? data : data;
const real_scalealpha =floor == 1 ? scalealpha : scalealpha;
const real_mapscale = floor==1?mapscale:mapscale2;
const real_scale = floor==1?scale:scale;
for (const {longitude, latitude, speed, dir,hour_arrow,floor_arrow} of real_data) {
if(hour==hour_arrow && floor==floor_arrow){
context.save();
context.translate(longitude*real_mapscale, latitude*real_mapscale);
context.scale(real_scale(speed), real_scale(speed));
context.rotate(dir * Math.PI / 180);
context.beginPath();
context.moveTo(-2, -2);
context.lineTo(2, -2);
context.lineTo(0, 8);
context.closePath();
context.fillStyle = color(100+speed/(d3.max(real_data, d => d.speed)));
context.globalAlpha=real_scalealpha(speed);
context.fill();
context.restore();}
}
return context.canvas;
}
map2 = {
const context = DOM.context2d(1725, 914);
context.canvas.style.maxWidth = "100%";
//context.fillRect(0, 0, width, height);
//context.strokeStyle = "#eee";
//context.lineWidth = 1.5;
//context.lineJoin = "round";
context.drawImage(land2,0,0)
for (const {longitude, latitude, speed, dir} of data2) {
context.save();
context.translate(longitude*mapscale2, latitude*mapscale2);
context.scale(scale2(speed), scale2(speed));
context.rotate(dir * Math.PI / 180);
context.beginPath();
context.moveTo(-2, -2);
context.lineTo(2, -2);
context.lineTo(0, 8);
context.closePath();
context.fillStyle = color(100+speed/(d3.max(data2, d => d.speed)));
context.globalAlpha=scalealpha2(speed);
context.fill();
context.restore();
}
return context.canvas;
}
scale2 = d3.scaleSqrt([0, d3.max(data, d => d.speed)], [0, 9])
scale = d3.scaleSqrt([0, d3.max(data, d => d.speed)], [0, 20])
mapscale2=1735/30;
mapscale=1751/30;
scalealpha2 = d3.scaleSqrt([0, d3.max(data, d => d.speed)], [0.3, 1])
scalealpha = d3.scaleSqrt([0, d3.max(data, d => d.speed)], [0.3, 1])
color = d3.scaleSequential([0, 360], d3.interpolateRainbow)
data2 = d3.csvParse(await FileAttachment("arrow_2@3.csv").text(), d3.autoType)
data = d3.csvParse(await FileAttachment("arrow@6.csv").text(), d3.autoType)
projection = d3.geoEquirectangular()
width = 975
import {chart} from "@yomi/radial-stacked-bar-chart"
chart
margin = 10
land = FileAttachment("Map-Floor 1.png").image({width: 400, style: "border: 1px solid black"})
land2 = FileAttachment("Map-Floor 2.png").image({width: 400, style: "border: 1px solid black"})
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json")
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
