Public
Edited
Mar 3, 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 })
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.