salesSpreadsheet = FileAttachment("sales.xlsx").xlsx()
sales = salesSpreadsheet.sheet(0, { headers: true })
Inputs.table(sales)
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(sales, {x: "date", y: "medianAskingPrice", stroke: "neighborhood"})
]
})
sales
rentalsSpreadsheet = FileAttachment("rentals.xlsx").xlsx()
rentals = rentalsSpreadsheet.sheet(0, { headers: true })
Inputs.table(rentals)
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(rentals, {x: "date", y: "medianAskingRent", stroke: "neighborhood"})
]
})
rentals
tidyData = {
// Sales
const tidySalesMedianDaysOnMarket = pivotData(salesMedianDaysOnMarket, 'medianDaysOnMarket','sales');
const tidySalesMedianAskingPrice = pivotData(salesMedianAskingPrice, 'medianAskingPrice','sales');
const tidySalesMedianRecordedSalesPrice = pivotData(salesMedianRecordedSalesPrice, 'medianRecordedSalesPrice','sales');
const tidySalesPriceCutShare = pivotData(salesPriceCutShare, 'priceCutShare','sales');
// const tidySalesPriceIndex = pivotData(salesPriceIndex, 'priceIndex','sales');
const tidySalesRecordedSalesVolume = pivotData(salesRecordedSalesVolume , 'recordedSalesVolume','sales');
const tidySalesSaleListRatio = pivotData(salesSaleListRatio, 'saleListRatio','sales');
const tidySalesTotalInventory = pivotData(salesTotalInventory, 'totalInventory','sales');
// Rental
const tidyRentalsDiscountShare = pivotData(rentalsDiscountShare, 'discountShare','rentals');
// const tidyRentalsRentIndex = pivotData(rentalsRentIndex, 'rentIndex','rentals');
const tidyRentalsMedianAskingRent = pivotData(rentalsMedianAskingRent, 'medianAskingRent','rentals');
const tidyRentalsTotalInventory = pivotData(rentalsTotalInventory, 'totalInventory','rentals');
return d3.merge([tidySalesMedianDaysOnMarket, tidySalesMedianAskingPrice, tidySalesMedianRecordedSalesPrice, tidySalesPriceCutShare, tidySalesRecordedSalesVolume, tidySalesSaleListRatio, tidySalesTotalInventory, tidyRentalsDiscountShare, tidyRentalsMedianAskingRent, tidyRentalsTotalInventory])
}
pivotData = (streetEasyData, metric, type) => { // StreetEasy's data is very wide, it has column for each month + year. This function tidies the data
const returnArray = []; // the array we return
streetEasyData.forEach(record => {
dates.forEach(date => {
returnArray.push({
areaName: record['areaName'],
borough: record['Borough'],
areaType: record['areaType'],
date: date,
metric: metric,
value: +record[date],
type: type
})
})
})
return returnArray;
}
dates = ["2019-01","2019-02","2019-03","2019-04","2019-05","2019-06","2019-07","2019-08","2019-09","2019-10","2019-11","2019-12","2020-01","2020-02","2020-03","2020-04","2020-05","2020-06","2020-07","2020-08","2020-09","2020-10","2020-11","2020-12","2021-01","2021-02","2021-03","2021-04","2021-05","2021-06","2021-07","2021-08","2021-09","2021-10","2021-11","2021-12","2022-01","2022-02","2022-03"]
rolledSales = d3.rollups(tidyData.filter(d => d.areaType == "neighborhood" && d.type == "sales"), v => {
let d = v[0]
let o = {
neighborhood: d.areaName,
borough: d.borough,
date: new Date(d.date + "-01")
}
v.forEach(d => {
o[d.metric] = d.value
})
return o
},
d => d.areaName,
d => d.date)
salesWide = rolledSales.flatMap(d => d[1].map(d => d[1]))
rolledRentals = d3.rollups(tidyData.filter(d => d.areaType == "neighborhood" && d.type == "rentals"), v => {
let d = v[0]
let o = {
neighborhood: d.areaName,
borough: d.borough,
date: new Date(d.date + "-01")
}
v.forEach(d => {
o[d.metric] = d.value
})
return o
},
d => d.areaName,
d => d.date)
rentalsWide = rolledRentals.flatMap(d => d[1].map(d => d[1]))
salesMedianDaysOnMarket = FileAttachment("daysOnMarket_All.csv").csv()
Inputs.table(salesMedianDaysOnMarket)
Inputs.table(salesMedianAskingPrice)
Inputs.table(salesMedianRecordedSalesPrice)
Inputs.table(salesPriceCutShare)
Inputs.table(salesRecordedSalesVolume)
Inputs.table(salesSaleListRatio)
Inputs.table(salesTotalInventory)
Inputs.table(rentalsDiscountShare)
Inputs.table(rentalsMedianAskingRent)
Inputs.table(rentalsTotalInventory)
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.
