Public
Edited
Mar 5, 2023
// We create a new SimpleData instance.
cityInfo = new SimpleData()
// We call the method loadDataFromUrl.
.loadDataFromUrl({
// We pass the URL to the city-info.csv file.
url: "https://raw.githubusercontent.com/nshiab/cities-temperature-example/main/output/cities-for-observable/cities-info.csv"
})
cityInfo.showTable()
citiesDataRaw = new SimpleData().loadDataFromUrl({
url: [
"https://raw.githubusercontent.com/nshiab/cities-temperature-example/main/output/cities-for-observable/1.csv",
"https://raw.githubusercontent.com/nshiab/cities-temperature-example/main/output/cities-for-observable/2.csv",
"https://raw.githubusercontent.com/nshiab/cities-temperature-example/main/output/cities-for-observable/3.csv"
], // We pass a list of URLs with data structured the same way.
autoType: true // autoType to true will parse numbers and dates. CSV files are just text.
})
The cell above returns a SimpleData instance with ${citiesDataRaw.getLength()} items in it. Let's see the data as a table.
citiesDataRaw.showTable()
citiesDataRaw // No need to create a variable. We just want to see the table.
.clone() // We clone the SimpleData instance to avoid overwriting citiesDataRaw.
.checkValues({ nbItemsToCheck: 25000, randomize: true }) // Checking values could be costly. So we limit the nbItemsToCheck, and pick them randomly.
.showTable() // Let's see the result.
citiesDataCleaned = citiesDataRaw
.clone()
.keepNumbers({ key: "tmax" }) // This comment is useless. Everything is so clear when using a SimpleData instance.
.valuesToString({ key: "id" })
citiesDataCleaned
.clone()
.checkValues({ nbItemsToCheck: 25000, randomize: true })
.showTable()
citiesDataMerged = citiesDataCleaned
.clone()
// mergeItems works as a left join.
.mergeItems({
dataToBeMerged: cityInfo, // We pass the cityInfo as the data to be merged.
commonKey: "id" // We use the key id to match items in both instances.
})
citiesDataMerged.showTable()
citiesDataSelected = citiesDataMerged
.clone()
.selectKeys({ keys: ["date", "tmax", "name"] }) // In real-world case use, you would chain this right after merging. No need to do an extra cell. But, again, in this notebook, I want you to understand each step.
citiesDataSelected.showTable()
citiesDataNewKeys = citiesDataSelected
.clone()
.addKey({ key: "year", itemGenerator: (item) => item.date.getFullYear() }) // itemGenerator is a function that will be applied to each item.
.addKey({
key: "decade",
itemGenerator: (item) => Math.floor(item.year / 10) * 10
})
citiesDataNewKeys.showTable()
citiesDataTidy = citiesDataNewKeys
.clone()
// Like a pivot_longer() in R or wide_to_long() with Pandas
.keysToValues({
keys: ["year", "decade"],
newKeyForKeys: "timeframe",
newKeyForValues: "timeframeValue"
})
citiesDataTidy.showTable()
citiesDataSummarized = citiesDataTidy.summarize({
// tmax as the value that will be summarized
keyValue: "tmax",
// Summarize tmax for each city and each timeframe.
keyCategory: ["name", "timeframe", "timeframeValue"],
// Compute the mean, but also count the number of days per year or decade.
summary: ["mean", "count"]
})
citiesDataSummarized.showTable()
dataForCityChart.getChart({
x: "timeframeValue",
y: "mean",
color: "mean",
type: "dot",
trend: true,
showTrendEquation: true,
title: city
})
dataForCityChart.showTable({ nbItemsInTable: 5 })
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.
