Published
Edited
Nov 5, 2020
Insert cell
md`# Cars Data`
Insert cell
d3 = require('d3@6')
Insert cell
md`# Adding file`
Insert cell
carsGists=d3.csv("https://gist.githubusercontent.com/jasonyangdesign/d1411c6132dbfd0058ca626dffbce567/raw/1f3e7c2581c758ec5ed38a3db90d81399ba5c3c4/cars.csv")
Insert cell
md`# Reading file`
Insert cell
carAutoT = d3.csv("https://gist.githubusercontent.com/jasonyangdesign/d1411c6132dbfd0058ca626dffbce567/raw/1f3e7c2581c758ec5ed38a3db90d81399ba5c3c4/cars.csv", d3.autoType)
Insert cell
md`# 1. Find maximum and minimum`
Insert cell
Insert cell
maxRetailPrice = d3.max(carAutoT, d=>d.Retail_Price)
Insert cell
Insert cell
minRetailPrice = d3.min(carAutoT, d=>d.Retail_Price)
Insert cell
md`# 2. Sum values by a specified dimension`
Insert cell
sumRetailPrice = d3.sum(carAutoT, d=>d.Retail_Price)
Insert cell
md`# 3. Average a set of values`
Insert cell
meanRetailPrice = d3.mean(carAutoT, d=>d.Retail_Price)
Insert cell
md`# 4. Count how many records match a particular dimension criterion`
Insert cell
numRetailPrice = d3.count(carAutoT, d=>d.Retail_Price)
Insert cell
md`# 5. Results from the above operations`
Insert cell
md`# 6. Histogram for each dimension`
Insert cell
import {vl} from '@vega/vega-lite-api'
Insert cell

VegaLite = require("vega-embed@5")
Insert cell
Insert cell
VegaLite({
data: {values: carAutoT},
mark: "bar",
encoding: {
x:{field: "Sports_Car", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"}
}
})
Insert cell
md` Number of Wagon car and non Wagon car`
Insert cell
VegaLite({
data: {values: carAutoT},
mark: "bar",
encoding: {
x:{field: "Wagon", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"}
}
})

Insert cell
md` Number of cars that allow or not allow pickup`
Insert cell
VegaLite({
data: {values: carAutoT},
mark: "bar",
encoding: {
x:{field: "Pickup", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"}
}
})

Insert cell
md` Retail Price Distrbution`
Insert cell
vl.markBar()
.data(carAutoT)
.encode(
vl.x().fieldQ('Retail_Price').bin({maxbins: 20}),
vl.y().count()
)
.render()
Insert cell
md` Average retail price for wagon and non wagon`
Insert cell
vl.markBar()
.data(carAutoT)
.encode(
vl.x().average('Retail_Price'),
vl.y().fieldN('Wagon')
)
.render()
Insert cell
md` Average horse power for sports car and non sports car`
Insert cell
vl.markBar()
.data(carAutoT)
.encode(
vl.x().average('HP'),
vl.y().fieldN('Sports_Car')
)
.render()
Insert cell
md` Dealer Cost distribution`
Insert cell
vl.markBar()
.data(carAutoT)
.encode(
vl.x().fieldQ('Dealer_Cost').bin(true),
vl.y().count()
)
.render()
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