Crafting Visual Stories with Data.
// CSV file
csvURL = "https://raw.githubusercontent.com/vega/vega-datasets/next/data/gapminder-health-income.csv"
// Loading it as row format
d3.csv(csvURL, d3.autoType)
jsonURL = "https://raw.githubusercontent.com/vega/vega-datasets/next/data/gapminder.json"
d3.json(
"https://raw.githubusercontent.com/vega/vega-datasets/next/data/gapminder.json"
)
airports = d3.csv(sheetsCSV)
dataAttached = FileAttachment("airportsfile.csv").csv()
import { data } from "@amitkaps/data-visual"
data
htmlCSV = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRrq8hPiyMxOSYGO7bhcquEynb4nB3mKYX3ike7ALCupA05ILQnUEbdJM832EdYKrL-Lxyqq173qeI1/pub?gid=1780003412&single=true&output=csv"
d3 = require("d3")
aq = require("arquero")
popRows = d3.csv(htmlCSV)
popColumns = aq.loadCSV(htmlCSV)
Inputs.table(popRows)
Inputs.table(popColumns)
data
dataCols = aq.from(data)
Core Verb for doing Transformation
Filter
Sort
Derive
filterData = aq.from(data).filter((d) => d.Sales > 10)
Inputs.table(filterData)
// Full Form of Function
function filterSales10(data) {
return data.Sales > 10;
}
// Shorter way to write a function (Arrow Function)
filterSales10Short = (data) => data.Sales > 10
// Even shorter function (Annymous)
(data) => data.Sales > 10
// Make it even shorter
(d) => d.Sales > 10
aq.from(data).filter(filterSales10)
Using a UI to Wrangle Data
import { Wrangler, op } from "@observablehq/data-wrangler"
Wrangler(data)
// To use copied code replace "data" with your own variable
aq
.from(data)
.filter((d) => d["Area"] === "North")
.select("Area", "Sales")
.objects() // Uncomment to return an array of objects
gapminder = d3.csv(csvURL, d3.autoType)
Wrangler(gapminder)
// To use copied code replace "data" with your own variable
// Large Countries with poplulation income
perCapitaTable = aq
.from(gapminder)
.select("country", "income", "population")
.filter((d) => d["population"] > 5000000)
.derive({ perCapitaIncome: (d) => d.income / d.population })
.orderby(aq.desc("perCapitaIncome"))
.objects() // Uncomment to return an array of objects
Inputs.table(perCapitaTable)
vl
.spec({
title: "Large Countries with High Per Capita Income",
data: { values: perCapitaTable },
mark: "bar",
encoding: {
x: { field: "country", type: "N", sort: "-y" },
y: { field: "perCapitaIncome", type: "Q" }
}
})
.render()
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.
