Older brother. Graphics reporter.
Published
Edited
Mar 5, 2021
16 stars
dms = {
let dimensions = {
width: width,
height: width * 0.6,
marginTop: 175
};
dimensions.marginLeft = dimensions.marginTop;
dimensions.marginBottom = dimensions.marginTop;
dimensions.marginRight = dimensions.marginTop;
dimensions.chartWidth =
dimensions.width - dimensions.marginLeft - dimensions.marginRight;
dimensions.chartHeight =
dimensions.height - dimensions.marginTop - dimensions.marginBottom;
return dimensions;
}
colors = {
return { blue: "#0A9CE5", orange: "#FF7121" };
}
data = {
const attached = await FileAttachment("DEMO@4.csv").text();
return d3.csvParse(attached);
}
dataByID = d3.group(data, d => d["ID"])
dataGeoJSON = {
const features = [];
data
.filter(e => Math.abs(+e["Lat"]) > 0 && e["Start"].length > 0)
.map(d => {
features.push({
type: "Feature",
geometry: {
type: "Point",
coordinates: [+d["Long"], +d["Lat"]]
},
properties: {}
});
return d;
});
const output = {
type: "FeatureCollection",
features: features
};
return output;
}
vectors = {
const buildings = await FileAttachment("Buildings@2.geojson").json();
const roads = await FileAttachment("Roads@2.geojson").json();
const sidewalks = await FileAttachment("Sidewalks@2.geojson").json();
return { buildings: buildings, roads: roads, sidewalks: sidewalks };
}
extent = await FileAttachment("Zoom.geojson").json()
projection = d3
.geoMercator()
.fitExtent(
[
[dms.marginLeft, dms.marginTop],
[dms.width - dms.marginRight, dms.height - dms.marginBottom]
],
dataGeoJSON
)
path = d3.geoPath(projection)
mouseenter = function(event, d) {
d3.select(".tooltip").text(
`Video ID: ${d["ID"]}, Start Time: ${d["Start"]}, Licensed: ${
d["Licensed"] ? "Yes" : "No"
}`
);
d3.selectAll(".video").attr("fill", colors.blue);
d3.select(this)
.attr("fill", colors.orange)
.raise();
}
mouseleave = function(event, d) {
// d3.select(".tooltip").text(
// "Hover over a vantage point for additional info."
// );
// d3.select(this)
// .attr("fill", colors.blue)
// .raise();
}
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.
