Singapore Weather
The Singapore government has made weather data available through an API portalhttps://data.gov.sg/dataset/realtime-weather-readings?resource_id=8bd37e06-cdd7-4ca4-9ad8-5754eb70a33d
Other datasets are availablehttps://www.smartnation.gov.sg/resources/open-data
Playing around with visualizing it
Wind speed and direction visualized separatelyhttps://observablehq.com/d/9c26151439da588b
To do:
Line chart
Hoverover by station
Display station name as text - https://medium.com/@kj_schmidt/show-data-on-mouse-over-with-d3-js-3bf598ff8fc2
have hoverover show up on map
Take some inspiration from the Seattle weather vizhttps://uwdata.github.io/mosaic/examples/weather.html
From Advanced Data Viz coursehttps://observablehq.com/@observablehq/lesson-4-presentation-uncertainty-isotype
chart = {
let plot = Plot.plot({
x: {type: "utc"}, // Format scale as time https://observablehq.com/plot/features/scales
marks: [
Plot.line(longdata, {
x:'timestamp',
y:weatherAttribute,
stroke:'station_id',
title: (d) =>`${d.station_id}`
})
]
})
// copy paste from https://observablehq.com/d/2e1daf099a7aaaea
// highlighting using hoverovers by setting opacity of the individual objects
d3.select(plot)
.selectAll("path") // selects all path objects
.on("pointerenter", function () { // when hovering over a path object
d3.select(plot).selectAll("path").attr("opacity", 0.2); // set opacity of everything to 0.2
d3.select(this).attr("opacity", 1); // set opacity of selected path to 1
d3.select(this).append("svg:title").text(function(d) { return d.station_id; });
// Add text of the station being hovered on https://chartio.com/resources/tutorials/how-to-show-data-on-mouseover-in-d3js/
});
d3.select(plot).on("pointerleave", function () { // when mouse leaves
d3.select(plot).selectAll("path").attr("opacity", 1); // set opacity of everything to 1
// Remove text of the station being hovered on
});
return plot;
}
// map = {
// const container = yield htl.html`<div style="height: 500px;">`;
// const map = L.map(container).setView([1.36, 103.8], 11);
// L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
// attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
// }).addTo(map);
// }
// Add map - https://observablehq.com/@saneef/geojson-from-openstreetmap
// * https://stackoverflow.com/questions/925164/openstreetmap-embedding-map-in-webpage-like-google-maps
// import {osmFetch} from "@saneef/geojson-from-openstreetmap"
// https://observablehq.com/@observablehq/import
// vl.topojson(countries_url)
// Plot.plot({
// x: {domain: [103.55, 104.2]}, // for some reason this doesn't properly render without the domain being set
// y: {domain: [1.16, 1.5]},
// // projection: "albers-usa",
// // projection: "equirectangular",
// // width: 975,
// marks: [
// Plot.geo(
// sgboundaries,
// // topojson.feature(sgboundaries, sgboundaries), //topojson.feature converts topoJSON to geoJSON object
// // { strokeWidth: 0.75 }
// )
// ]
// });
// vl.markGeoshape()
// .data(vl.topojson(countries_url))// .feature("countries1"))
// .render()
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.
