// This cell is a Javascript cell. The results of the calculation is shown above the cell.
1 + 3
width
height = width * 0.3
myVar = 12
myVar += 10 // The SyntaxError in this cell is intentional
{
let myVar = 15;
return myVar;
}
gb.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
myVar
"height value is " + height
`height value is ${height}`
height
<svg width = ${width} height = ${height}>
<circle cx = "100" cy = "100" r = 5></circle>
</svg>
d3 = require("d3@7")
mpg = await d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/main/data-raw/mpg.csv");
viewof rows = Inputs.table(mpg)
gb.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
ukCities = FileAttachment("gb.csv").csv()
// TODO: add code to preview data in a table
viewof ukCity = Inputs.table(ukCities)
c = 40;
f = 1.800*c +32;
vl.markPoint()
.data(mpg)
.encode(
vl.x().field("displ").type("quantitative"),
vl.y().field("hwy").type("quantitative")
)
.render()
vl.markPoint()
.data(mpg)
.encode(
vl.x().field("displ").type("quantitative"),
vl.y().field("hwy").type("quantitative")
)
.render({renderer: "svg"}) // changed
vl.markPoint()
.data(mpg)
.encode(
vl.x().fieldQ("displ"), // changed
vl.y().fieldQ("hwy") // changed
)
.render()
vl.markPoint()
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy"),
vl.color().fieldN("drv") // changed
)
.render()
{
const plot = vl.markPoint()
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy"),
vl.color().fieldN("drv")
)
return plot.toObject()
}
{
const plot = vl.markPoint()
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy"),
vl.color().fieldN("drv")
)
return vl.vegalite.compile(plot.toObject()).spec // changed
}
{
const plot = vl.markPoint({filled: true}) // changed
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy"),
vl.color().fieldN("drv")
)
return plot.render()
}
// TODO make a scatter plot here.
{
const plot = vl.markPoint({filled: true}) // changed
.data(ukCities)
.encode(
vl.x().fieldQ("population").scale({type:"log"}),
vl.y().fieldQ("population_proper").scale({type:"log"}),
)
return plot.render()
}
vl.markLine() // changed mark type
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy"),
vl.stroke().fieldN("drv") // encode stroke color (instead of previously fill color)
)
.transform( // added the transformation
vl.regression("hwy").on("displ").groupby("drv")
)
.render()
{
const pointPlot = vl.markPoint()
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy"),
vl.color().fieldN("drv")
)
// ------------------------
const linePlot = vl.markLine()
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy"),
vl.stroke().fieldN("drv")
)
.transform(
vl.regression("hwy").on("displ").groupby("drv")
)
// ------------------------
// layering
return vl.layer(pointPlot, linePlot)
.render()
}
{
const pointPlot = vl.markPoint()
.encode(
vl.color().fieldN("drv")
)
const linePlot = vl.markLine()
.encode(
vl.stroke().fieldN("drv")
)
.transform(
vl.regression("hwy").on("displ").groupby("drv")
)
return vl.layer(pointPlot, linePlot)
.data(mpg) // common specification
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy")
)
.render()
}
vl.markBar()
.data(mpg)
.encode(
vl.y().fieldQ("hwy").bin(true),
vl.x().aggregate("count")
)
.render()
{
const pointPlot = vl.markPoint()
.encode(
vl.color().fieldN("drv")
);
const linePlot = vl.markLine()
.encode(
vl.stroke().fieldN("drv")
)
.transform(
vl.regression("hwy").on("displ").groupby("drv")
);
const mainPlot = vl.layer(pointPlot, linePlot)
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy")
);
//-----------------------
const histogramPlot = vl.markBar()
.data(mpg)
.encode(
vl.y().fieldQ("hwy").bin(true).scale({domain: [0, 45]}), // same scale for both plots
vl.x().aggregate("count").scale({domain: [0, 100]}) // also fix the scale here
)
.width(100); // added specification for the plot width
//-----------------------
// concatenation
return vl.hconcat(histogramPlot, mainPlot)
.render()
}
{
const pointPlot = vl.markPoint()
.encode(
vl.color().fieldN("drv")
);
const linePlot = vl.markLine()
.encode(
vl.stroke().fieldN("drv")
)
.transform(
vl.regression("hwy").on("displ").groupby("drv")
);
const mainPlot = vl.layer(pointPlot, linePlot)
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy")
);
//-----------------------
const histogramPlot = vl.markBar()
.data(mpg)
.encode(
vl.y().fieldQ("hwy").bin(true).scale({domain: [0, 45]}), // same scale for both plots
vl.x().aggregate("count").scale({domain: [0, 100]}) // also fix the scale here
)
.width(100); // added specification for the plot width
//-----------------------
// concatenation
return vl.hconcat(vl.hconcat(histogramPlot, mainPlot ), histogramPlot )
.render()
}
{
// creating a parameter
const xMaxParam = vl.param("x_max")
.value(10) // initial value
.bind(vl.slider(0, 10, 1).name("Max. engine displacement: ")) // adding slider with min, max, step
const plot = vl.markPoint()
.data(mpg)
.encode(
vl.x().fieldQ("displ").scale({domain: [0, 10]}), // fix the horizontal axis scale
vl.y().fieldQ("hwy").scale({domain: [0, 45]}), // ditto for vertical axis
vl.color().fieldN("drv")
)
.params(xMaxParam) // specify that we use this parameter in the spec
.transform(
vl.filter("datum.displ < x_max") // filter to check each data point (referred to as `datum`)
)
return plot.render()
}
{
const xMaxParam = vl.param("x_max")
.value(10)
.bind(vl.slider(0, 10, 1).name("Max. engine displacement: "))
const pointPlot = vl.markPoint()
.encode(
vl.color().fieldN("drv")
)
const linePlot = vl.markLine()
.encode(
vl.stroke().fieldN("drv")
)
.transform(
vl.regression("hwy").on("displ").groupby("drv")
)
// layering
return vl.layer(pointPlot, linePlot)
.data(mpg)
.encode(
vl.x().fieldQ("displ").scale({domain: [0, 10]}),
vl.y().fieldQ("hwy").scale({domain: [0, 45]})
)
.params(xMaxParam) // param
.transform(
vl.filter("datum.displ < x_max")
)
.render()
}
{
const selectedPoint = vl.selectPoint("selected_point") // creating the point selection
.on("click") // mouse click for selection
.nearest(true) // when clicked, select the nearest point
.clear("dblclick"); // double click to clear selection
const plot = vl.markPoint()
.data(mpg)
.params(selectedPoint) // param
.encode(
vl.x().fieldQ("displ").scale({domain: [0, 10]}),
vl.y().fieldQ("hwy").scale({domain: [0, 45]}),
vl.color().fieldN("drv"),
vl.opacity().if(selectedPoint, vl.value(1)).value(0.3), // change opacity based on selection
vl.size().if(selectedPoint, vl.value(100)).value(10) // change opacity based on selection
)
return plot.render()
}
{
const selectedInterval = vl.selectInterval("selected_interval"); // creating the interval selection
const plot = vl.markPoint()
.data(mpg)
.params(selectedInterval)
.encode(
vl.x().fieldQ("displ").scale({domain: [0, 10]}),
vl.y().fieldQ("hwy").scale({domain: [0, 45]}),
vl.color().fieldN("drv"),
vl.opacity().if(selectedInterval, vl.value(1)).value(0.3),
vl.size().if(selectedInterval, vl.value(100)).value(10)
)
return plot.render()
}
{
const selectedInterval = vl.selectInterval("selected_interval")
.encodings("y"); // restricting to vertical selection (y-axis)
const plot = vl.markPoint()
.data(mpg)
.params(selectedInterval)
.encode(
vl.x().fieldQ("displ").scale({domain: [0, 10]}),
vl.y().fieldQ("hwy").scale({domain: [0, 45]}),
vl.color().fieldN("drv"),
vl.opacity().if(selectedInterval, vl.value(1)).value(0.3),
vl.size().if(selectedInterval, vl.value(100)).value(10)
)
return plot.render()
}
{
const selectedInterval = vl.selectInterval("selected_interval")
.encodings("y");
const pointPlot = vl.markPoint()
.params(selectedInterval)
.encode(
vl.color().fieldN("drv"),
vl.opacity().if(selectedInterval, vl.value(1)).value(0.3),
vl.size().if(selectedInterval, vl.value(100)).value(10)
);
const linePlot = vl.markLine()
.encode(
vl.stroke().fieldN("drv")
)
.transform(
vl.filter(selectedInterval), // add selection interval
vl.regression("hwy").on("displ").groupby("drv")
);
const mainPlot = vl.layer(pointPlot, linePlot)
.data(mpg)
.encode(
vl.x().fieldQ("displ"),
vl.y().fieldQ("hwy")
);
//-----------------------
const histogramPlot = vl.markBar()
.data(mpg)
.transform(
vl.filter(selectedInterval), // add selection interval
)
.encode(
vl.y().fieldQ("hwy").bin(true).scale({domain: [0, 45]}),
vl.x().aggregate("count").scale({domain: [0, 100]})
)
.width(100);
//-----------------------
// concatenation
return vl.hconcat(histogramPlot, mainPlot)
.render()
}
// TODO: Write your code here
ukCities // This cell should not have RuntimeError if you have loaded the data from exercise 1 above
vl.markSquare({size: 1, opacity: 1})
.data(ukCities)
.encode(
vl.longitude().fieldQ('lng'),
vl.latitude().fieldQ('lat')
)
.config({view: {stroke: null}})
.render();
ukTopo = await d3.json("https://raw.githubusercontent.com/deldersveld/topojson/master/countries/united-kingdom/uk-counties.json");
{
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(ukTopo).feature('GBR_adm2'));
return map.render()
}
// TODO: write your code here
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.
