Public
Edited
Apr 22, 2023
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
temperature.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
temperature.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
// Call the variable by its name and it will return an array of objects.
// You will need to expand the returned array with your mouse to match the template picture; the view will be collapsed again if you refresh the page; this is OK.

data_filtered
Insert cell
Insert cell
Insert cell
Inputs.table(data_autoImported)
Insert cell
Insert cell
Inputs.table(data_filtered, { width: 160 })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data_raw = FileAttachment("temperature.csv").csv()
Insert cell
Insert cell
Insert cell
viewof table = Inputs.table(data_raw)
Insert cell
Insert cell
Insert cell
// Step 1: Import the SummaryTable function from:
// https://observablehq.com/@observablehq/summary-table
// Feel free to look around on that page and examine what the function is about, what it can do, and the instructions to import/use it.

import { SummaryTable } from "@observablehq/summary-table"
Insert cell
Insert cell
// Step 2: Use the SummaryTable() function to get a summary table of the data.

SummaryTable(data_raw)
Insert cell
Insert cell
Insert cell
data_autoTyped = FileAttachment("temperature.csv").csv({ typed: true })
Insert cell
Insert cell
Insert cell
viewof table1 = Inputs.table(data_autoTyped)
Insert cell
Insert cell
Insert cell
SummaryTable(data_autoTyped)
Insert cell
Insert cell
data_autoTyped[0]["date"].constructor.name
Insert cell
data_autoTyped[0]["temperature"].constructor.name
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
parseTime = d3.timeParse("%Y-%m-%d")
Insert cell
Insert cell
Insert cell
parseTime("2011-10-02")
Insert cell
Insert cell
data_manuallyTyped = FileAttachment("temperature.csv")
.csv() // no `{typed: true}` in `csv()`
.then((data) => {
data.forEach((d) => {
d.date = parseTime(d.date); // from string to Date object
d.temperature = d.temperature / 1.8 - 32; // from Fahrenheit to Celsius
});
return data;
})
Insert cell
Insert cell
viewof table2 = Inputs.table(data_manuallyTyped)
Insert cell
Insert cell
SummaryTable(data_manuallyTyped)
Insert cell
Insert cell
data_autoTyped[0]["date"].constructor.name
Insert cell
data_autoTyped[0]["temperature"].constructor.name
Insert cell
Insert cell
Insert cell
Insert cell
imageToDo
Insert cell
Insert cell
Insert cell
openAllLinksInNewTab
Insert cell
Insert cell
Insert cell

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.
Learn more