md `For example, here is a cell that summarizes the results of the Vancouver crime data set and returns the view.`
viewof crimesTotal=embed({
data: {values: vanCrime2},
width: 200,
mark: "bar",
selection: {
barSelection: {fields: ["Offense"], on: "click", type: "multi"}
},
encoding: {
y:{field: "Offense", type: "nominal"},
x:{aggregate: "count", field: "*", type: "quantitative"},
color:{ field: "Offense", type:"nominal","scale": {"scheme": "dark2"}}
}
})
crimesTotal.addSignalListener("barSelection", function(name, value) {
if (value == null)
mutable type = null
else
mutable type = value.Offense
})
offenseSelected = {
if(isEmpty(type))
{
return mutable type = offenseNames
}
return type
}
md `make a table here`
mutable wall = null
dashboard = html`<table style="width:100%">
<tr>
<td>${viewof crimesTotal}</td>
<td>${viewof splot}</td>
</tr>
</table>`
md `## Data, Libraries and Functions`
d3 = require("d3@5")
embed = require("vega-embed@6")
function isEmpty(obj) {
for (var prop in obj) {
return false;
}
return true;
}
function getNames(arr)
{
let unique = [...new Set(arr.map(name => name.Offense))];
return(unique);
}
function getFieldVals(arr,field)
{
let unique = [...new Set(arr.map(name =>name[field]))];
var names = {[field]:unique};
return(names);
}
offenses = getNames(vanCrime2);
md `A generalized tool to extract unique values from an array of objects`
vanPop =
d3.csv("https://www.sfu.ca/~lyn/data/VanPop2011.csv", function(d) {
return {
Area: d.Area,
Age: d.Age,
Gender : d.Gender,
Population: +d.Population
};
})
nnames=getFieldVals(vanPop,['Area']);
md `Add the population of the area to the crime data just for ease, as this worknook is about sending signals back and forth and not about data manipulation.`
crimepop = populations
import {populations} from "@drlynb/vancouver-mapping-again"
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.
