Design Driven Engineer
Public
Edited
May 9
// Encode the data to the shape - by defining a mark
cc = Plot.dot(
cars,
{x: 'cylinders', y: 'power', fill: 'black'}
// Provide general settings for the plot / graph
).plot({
x: {label: 'cylinders'},
y: {label: 'power'}
})
aapl = [
{Date: new Date("2013-05-13"), Open: 64.501427, High: 65.414284, Low: 64.500000, Close: 64.962860, Volume: 79237200},
{Date: new Date("2013-05-14"), Open: 64.835716, High: 65.028572, Low: 63.164288, Close: 63.408573, Volume: 111779500},
{Date: new Date("2013-05-15"), Open: 62.737144, High: 63.000000, Low: 60.337143, Close: 61.264286, Volume: 185403400},
{Date: new Date("2013-05-16"), Open: 60.462856, High: 62.549999, Low: 59.842857, Close: 62.082859, Volume: 150801000},
{Date: new Date("2013-05-17"), Open: 62.721428, High: 62.869999, Low: 61.572857, Close: 61.894287, Volume: 106976100}
]
cars
cars[0]
Object.keys(cars[0])
Plot.dot(cars, {
x: 'weight (lb)',
y: '0-60 mph (s)',
fill: 'cylinders',
}).plot({
x: { label: 'weight of the car' },
y: { grid: true, label: 'speed of the car' },
color: { legend: true }
})
Plot.plot({
grid: true,
y: { label: 'speed' },
x: { label: 'weight' },
marks: [
Plot.dot(cars, { x: "weight (lb)", y: "0-60 mph (s)" })
]
})
Apple Stock Exchange Data
Exploring line & area graph
Object.keys(aapl[0])
Plot.plot({
marks: [
Plot.lineY(aapl, { x: "Date", y: "Close" }),
Plot.areaY(aapl, { x: "Date", y: "Close", fillOpacity: 0.2 }) // combining both graphs together as 'marks'
]
})
industries
Plot.lineY(industries, {
x: 'date',
y: 'unemployed',
stroke: 'industry'
}).plot({
marginLeft: 60,
grid: true,
color: { legend: true },
x: { label: 'Year' },
y: { label: 'Unemployed rate' }
})
// Plot.plot({
// color: { legend: true },
// marks: [
// Plot.ruleY([0]),
// Plot.lineY(industries, {x: "date", y: "unemployed", z: "industry", stroke: "industry"})
// ]
// })
Plot.plot({
marginLeft: 100,
marks: [
Plot.ruleY([0]),
Plot.lineY(industries, { y: 'unemployed', x: 'date' }),
Plot.areaY(industries, { y: 'unemployed', x: 'date', fillOpacity: 0.5})
]
})
Object.keys(industries[0])
industries[0]
trips_data_adv.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
uber.map(d => ({ ...d, 'begin_trip_hour': parseInt(d['Begin Trip Time'].split(' ')[1].split(':')[0]) }))
uber = FileAttachment("trips_data_adv.csv").csv({ typed: true })
Object.keys(uber[0])
uber.map(d => ({ ...d, 'begin_trip_hour': parseInt(d['Begin Trip Time'].split(' ')[1].split(':')[0]) }))
// Plot.plot({
// marks: [
// // Plot.ruleY([0]),
// Plot.barY(uber, {x: "Product Type", y: "Distance (km)", fill: 'blue' })
// ]
// })
Plot.barY(uber, {
x: 'Product Type',
y: 'Distance (km)',
fill: 'blue'
}).plot({
grid: true
})
go = uber.filter((d) => d['Product Type'] === 'UberGo' && d['Trip or Order Status'] === 'COMPLETED')
Plot.dot(uber, {
x: 'Fare Rate (₹/km)',
y: 'Distance (km)',
fill: 'Product Type',
tip: true
}).plot({
marginTop: 50,
fillOpacity: 0.6,
grid: true,
color: { legend: true }
})
Plot.plot({
color: { legend: true },
x: { label: 'Trip Duration', domain: [0, 120], grid: true },
marks: [
Plot.dot(uber, {
x: "Trip Duration (minutes)",
y: "Distance (km)",
fill: "Product Type",
fillOpacity: 0.6,
r: "Fare Rate (₹/km)",
tip: true
})
]
})
Plot.plot({
color: { legend: true },
x: { grid: true },
marks: [
Plot.dot(uber, {
y: "Fare Amount",
x: "Distance (km)",
fill: "Product Type",
fillOpacity: 0.6,
r: "Fare Rate (₹/km)",
tip: true
})
]
})
Plot.dot(uber.filter(d => d['Trip or Order Status'] === 'COMPLETED'), {
// x: (d) => new Date(d['Begin Trip Time']).getHours(),
x: (d) => new Date(d['Begin Trip Time']).getDay(),
y: 'Fare Rate (₹/km)',
fill: 'Product Type',
tip: true,
}).plot({
marginLeft: 70,
marginBottom: 80,
x: { label: 'Hour of the day'},
y: { label: 'Rate ₹ per km' },
color: { legend: true },
grid: true
})
Inputs.table(uber)
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.
