Public
Edited
Jan 12, 2023
import {vl} from '@vega/vega-lite-api-v5'
import {printTable} from '@uwdata/data-utilities'
data = require('vega-datasets@1')
dataCSV = FileAttachment("sunshine.csv").text()
dataCSV2 = d3.csvParse(dataCSV, d3.autoType)
vl.markPoint()
.data(dataCSV2)
.encode(
vl.x().fieldN('sunshine'),
vl.y().fieldN('city')
)
.render()
// Question: How do various cities in the United States compare in-terms of the amount of sunshine received over a period of one year?
{
const circ = vl.mark("circle").data(dataCSV2).encode(
vl.x().field("month").sort("monthnum").type("ordinal").title("Months").axis({"labelFontSize": 20}),
vl.y().fieldQ('sunshine').title("Average Hours of Sunshine (hrs)").axis({"labelFontSize": 20}),
vl.color().fieldN('city'),
vl.tooltip(['city', 'sunshine']),
vl.order("monthnum")
).title({text: "How do various US cities compare in-terms of sunshine received over a period of 12 months?", titleFontSize: 50});
const line = vl.mark("line").data(dataCSV2).encode(
vl.x().field("month").sort("monthnum").type("ordinal").title("Months").axis({"labelFontSize": 20}),
vl.y().fieldQ('sunshine').title("Average Hours of Sunshine (hrs)").axis({"labelFontSize": 20}),
vl.color().fieldN('city'),
vl.tooltip(['city', 'sunshine']),
vl.order("monthnum")
);
return vl.layer(circ, line).width(650).height(400).render()
}
months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
accidentData = [46, 28, 46, 31, 38, 51, 53, 39, 41, 43, 41, 56]
dtPlt = Plot.dot(accidentData, {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], y: [46, 28, 46, 31, 38, 51, 53, 39, 41, 43, 41, 56]}).plot()
vl.markPoint().data(accidentData).encode(
vl.x().fieldQ('monthnum'),
vl.y().fieldQ('accidentData')
)
dotplot.legend("color");
dotplot = Plot.dot(dataCSV, {x: "lat", y: "lon", stroke: "city"}).plot()
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.
