// load dataset (cleaned) -mention it is cleaned - include picture of pyhton script for transparency && link to original dataset.
weather = (await FileAttachment("weather_new_york_2016-2017.csv").csv())
.map(weather_d => ({
'Station' : weather_d.STATION,
'Name' : weather_d.NAME,
'Latitude' : Number(weather_d.LATITUDE),
'Longitude' : weather_d.LONGITUDE,
'Elevation' : Number(weather_d.ELEVATION),
'Date' : parseTime(weather_d.DATE),
'Precipitation' : Number(weather_d.PRCP),
'Snow' : weather_d.SNOW,
'Cloudiness' : weather_d.ACSH,
'Wind_Speed' : weather_d.AWND,
'Max_Temp' : weather_d.TMAX,
'Min_Temp' : weather_d.TMIN
}))
weather_by_date = d3.group(weather, (d) => d.Date)
// helper function to parse date-times
parseTime = d3.utcParse("%Y-%m-%d");
// load in the taxi trip dataset:
taxis = (await FileAttachment("data_part_1.csv").csv())
.map(taxi_d => ({
'id' : taxi_d.id,
'vendor_id' : taxi_d.vendor_id,
'pickup_datetime' : parseDateTime(taxi_d.pickup_datetime),
'dropoff_datetime' : parseDateTime(taxi_d.dropoff_datetime),
'pickup_longitude' : taxi_d.pickup_longitude,
'pickup_latitude' : taxi_d.pickup_latitude,
'dropoff_longitude' : taxi_d.dropoff_longitude,
'dropoff_latitude' : taxi_d.dropoff_latitude,
'trip_duration' : taxi_d.trip_duration,
'trip_date' : formatDate(parseDateTime(taxi_d.pickup_datetime))
}))
formatDate = d3.timeFormat("%Y-%m-%d");
dayAggregate = {
// need to make sure dates aren't strings
const tripsPerDay = d3.flatRollup(taxis, (v) => v.length, d => parseTime(d.trip_date));
// const tripsPerDate = tripsPerDay.map(days => ({
// 'Date' : tripsPerDay[0],
// 'Count' : tripsPerDay[1]
// }))
//const sorted = d3.sort(tripsPerDay, (d) => d.trip_date)
//return sorted
return tripsPerDay
};
tripsPerDay = d3.flatRollup(taxis, (v) => v.length, d => parseTime(d.trip_date)).sort()
parseDateTime = d3.timeParse("%Y-%m-%d %H:%M:%S");
// sort the data by the taxi time.
(function(){
if (typeof Object.defineProperty === 'function'){
try{Object.defineProperty(Array.prototype,'sortBy',{value:sb}); }catch(e){}
}
if (!Array.prototype.sortBy) Array.prototype.sortBy = sb;
function sb(f){
for (var i=this.length;i;){
var o = this[--i];
this[i] = [].concat(f.call(o,o,i),o);
}
this.sort(function(a,b){
for (var i=0,len=a.length;i<len;++i){
if (a[i]!=b[i]) return a[i]<b[i]?-1:1;
}
return 0;
});
for (var i=this.length;i;){
this[--i]=this[i][this[i].length-1];
}
return this;
}
})();
// function sortByDateAscending(a, b) {
// // Dates will be cast to numbers automagically:
// return a.date - b.date;
// }
chart = {
// Specify the chart’s dimensions.
const width = 640;
const height = 400;
const marginTop = 25;
const marginRight = 20;
const marginBottom = 35;
const marginLeft = 40;
// Define the horizontal scale.
const x = d3.scaleLinear()
.domain(d3.extent(penguins, d => d.flipper_length_mm)).nice()
.range([marginLeft, width - marginRight]);
// Define the vertical scale.
const y = d3.scaleLinear()
.domain(d3.extent(penguins, d => d.body_mass_g)).nice()
.range([height - marginBottom, marginTop]);
// Create the container SVG.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Add the axes.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y));
// Append a circle for each data point.
svg.append("g")
.selectAll("circle")
.data(penguins)
.join("circle")
.filter(d => d.body_mass_g)
.attr("cx", d => x(d.flipper_length_mm))
.attr("cy", d => y(d.body_mass_g))
.attr("r", 3);
return svg.node();
}
// as simple as this! now I will geohash some stuff and overlay it on to the project!
leafmap = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([40.7299, -73.9923], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
// not sure what this does yet
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
getSations = {
var stations = d3.flatRollup(weather,
v => ({
Latitude : d3.median(v, d => d.Latitude),
Longitude : d3.median(v, d => d.Longitude)
}),
d => d.Name
)
return stations
}
// when in doubt, javascript map.
weatherStations_json = {
let stations = getSations.map((row) => ({
name : row[0],
lat : row[1].Latitude,
lon : row[1].Longitude
}))
return stations
}
BoroughsGeoJSON = FileAttachment("Borough Boundaries.geojson").json()
path = d3.geoPath().projection(projection)
projection = d3.geoAlbers().fitSize([w, h], BoroughsGeoJSON)
w = d3.min([width, 1000])
h = 0.625 * w
map = {
// const w = d3.min([width, 1000])
// const h = 0.625 * w
// const projection = d3.geoAlbers().fitSize([w, h], BoroughsGeoJSON)
// ^^ have these defined outside the box
let map = d3.create("svg").attr("width", w).attr("height", h);
// let stations = getSations.forEach(function (d) {
// let xy = projection(d.Latitude, d.Longitude)}
map.selectAll("path")
.data(BoroughsGeoJSON.features)
.join("path")
.attr("d", path)
.attr("fill", "lightgray")
.attr("stroke", "#fff")
.attr("stroke-width", 1);
map.selectAll("circle")
.data(weather_stations)
.join("circle")
//.attr("r", (c) => 5 * (c.population / .max_pop) ** 0.3)
.attr("r", 100)
.attr("fill", "black")
.attr("fill-opacity", 0.5)
.attr("stroke", "black")
// .attr("data-name", (c) => c.name)
// .attr("data-population", (c) => c.population)
// .nodes()
// .forEach(function (c) {
// tippy(c, {
// content: `
// <div>
// <h3>${c.getAttribute("data-name")}</h3>
// <div>Population: ${c.getAttribute("data-population")}</div>
// </div>`,
// theme: "light-border",
// allowHTML: true
// });
// });
return map.node();
}
aggregated_data_weather_stations = {
var stations = d3.flatRollup(weather,
v => ({
Latitude : d3.median(v, d => d.Latitude),
Longitude : d3.median(v, d => d.Longitude),
meanMaxTemp : d3.mean(v, d => d.Max_temp),
meanMinTemp : d3.mean(v, d => d.Min_Temp)
}),
d => d.Name
)
return stations // see about each of these summarizes and then you can aggregate multiple into 1 map
let aggregate = getSations.map((row) => ({
name : row[0],
lat : row[1].Latitude,
lon : row[1].Longitude
}))
return aggregate
}
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.
