Public
Edited
May 22, 2023
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Cars dataset.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
import { Wrangler, op } from "@observablehq/data-wrangler"
Insert cell
cars_filtered = aq
.from(carsDataset)
.select(
"name",
"cylinders",
"power (hp)",
"weight (lb)",
"0-60 mph (s)",
"economy (mpg)"
)
.rename({ name: "Name" })
.rename({ cylinders: "Cylinders" })
.rename({ "power (hp)": "Hp" })
.rename({ "weight (lb)": "Weight in lb" })
.rename({ "economy (mpg)": "Efficency" })
.filter((d) => d["Hp"] > 120)
.derive({ "Weight to Power": (d) => d["Weight in lb"] / d["Hp"] })
.orderby(aq.desc("Weight to Power"))
.objects()
Insert cell
Inputs.table(cars_filtered)
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
grid: true,
nice: true,
width: 1700,
y: {
lable: "Efficency"
},
x: {
label: "Horespower"
},
marks: [
Plot.line(cars_filtered, {
x: "Weight to Power",
y: "Efficency",
stroke: "dodgerblue",
title: TooltipPlot3
})
]
})
Insert cell
TooltipPlot1 = (d) =>
`
Name: ${d["Name"]}
Acceleration: ${d3.format(".3s")(d["0-60 mph (s)"])}
W/P ratio: ${d3.format(".3s")(d["Weight to Power"])}
`
Insert cell
TooltipPlot2 = (d) =>
`
Name: ${d["Name"]}
Lb: ${d3.format(".3s")(d["Weight in lb"])}
Horsepower: ${d3.format(".3s")(d["Hp"])}
`
Insert cell
TooltipPlot3 = (d) =>
`
Name: ${d["Name"]}
Efficency: ${d3.format(".3s")(d["Efficency"])}
Horsepower: ${d3.format(".3s")(d["Hp"])}
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {yourDataOnObservableAssignmentPoints} from "2cd741146f68dfd1"
Insert cell
usedPoints = d3.sum(Object.values(performancePoints).map(d => d))
Insert cell
availablePoints = yourDataOnObservableAssignmentPoints
Insert cell
performancePoints = ({
dataImport : availablePoints / 5,
dataWrangling: availablePoints / 5,
chartReuse: availablePoints / 5,
chartMaking: availablePoints / 5,
excellence: availablePoints / 10,
cleanTextAndCode: availablePoints / 10
} )
Insert cell
performancePenalties = ({
tooLittleEffortForCharts: availablePoints / 5
})
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