Data and community wrangler
Published
Edited
Jul 3, 2019
2 stars
parsedSpec = vega.parse(inputSpec)
viewof view = {
const div = document.createElement('div');
div.value = new vega.View(parsedSpec)
.initialize(div)
.run();
return div;
}
md`**Day 54**
Add dots to recreate the D3 SVG connected scatterplot created in Days 27-29, now using Vega with more recent data.`
connectedplot_interactive_legend = embed({
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 400,
"height": 450,
"padding": 5,
"title":"Learning D3 - Daily Progress",
"signals": [
{
"name": "clear", "value": true,
"on": [
{
"events": "mouseup[!event.item]",
"update": "true",
"force": true
}
]
},
{
"name": "shift", "value": false,
"on": [
{
"events": "@legendSymbol:click, @legendLabel:click",
"update": "event.shiftKey",
"force": true
}
]
},
{
"name": "brush", "value": 0,
"on": [
{
"events": {"signal": "clear"},
"update": "clear ? [0, 0] : brush"
},
{
"events": "@xaxis:mousedown",
"update": "[x(), x()]"
},
{
"events": "[@xaxis:mousedown, window:mouseup] > window:mousemove!",
"update": "[brush[0], clamp(x(), 0, width)]"
},
{
"events": {"signal": "delta"},
"update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
}
]
},
{
"name": "clicked", "value": null,
"on": [
{
"events": "@legendSymbol:click, @legendLabel:click",
"update": "{value: datum.value}",
"force": true
}
]
},
{
"name": "anchor", "value": null,
"on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
},
{
"name": "xdown", "value": 0,
"on": [{"events": "@brush:mousedown", "update": "x()"}]
},
{
"name": "delta", "value": 0,
"on": [
{
"events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
"update": "x() - xdown"
}
]
},
{
"name": "domain",
"on": [
{
"events": {"signal": "brush"},
"update": "span(brush) ? invert('x', brush) : null"
}
]
}
],
"data": [
{
"name": "table",
"values": skilldata,
"transform": [
{
"type": "filter",
"expr": "datum['level'] != null && datum['time'] != null && datum['tool'] != null"
}
]
},
{
"name": "grouptable",
"values": groupskilldata,
"transform": [
{
"type": "filter",
"expr": "datum['level'] != null && datum['time'] != null && datum['tool'] != null"
}
]
},
{
"name": "selected",
"on": [
{"trigger": "clear", "remove": true},
{"trigger": "!shift", "remove": true},
{"trigger": "!shift && clicked", "insert": "clicked"},
{"trigger": "shift && clicked", "toggle": "clicked"}
]
}
],
"scales": [
{
"name": "scaleLevel",
"type": "linear",
"range": "width",
"domain": {"data": "table", "field": "level"},
"zero": false
},
{
"name": "scaleHours",
"type": "linear",
"range": "height",
"domain": {"data": "table", "field": "time"},
"zero": true,
"nice": true
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "table", "field": "tool"}
},
{
"name": "label",
"type": "ordinal",
"domain": {"data": "grouptable", "field": "id"},
"range": {"data": "grouptable", "field": "group"}
}
],
"axes": [
{"orient": "left", "scale": "scaleHours", "title": "Total Hours"},
{"orient": "bottom", "scale": "scaleLevel", "title": "Arbitrary Comfort Level"}
],
"legends": [
{
"stroke": "color",
"fill": "color",
"title": "Language/Tool",
"offset":75,
"encode": {
"symbols": {
"name": "legendSymbol",
"interactive": true,
"update": {
"strokeWidth": {"value": 2},
"opacity": [
{"test": "!length(data('selected')) || indata('selected', 'value', datum.value)", "value": 0.7},
{"value": 0.15}
],
"size": {"value": 64}
}
},
"labels": {
"name": "legendLabel",
"interactive": true,
"update": {
"opacity": [
{"test": "!length(data('selected')) || indata('selected', 'value', datum.value)", "value": 1},
{"value": 0.25}
]
}
}
}
}
],
"marks": [
{
"type": "line",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "scaleLevel", "field": "level"},
"y": {"scale": "scaleHours", "field": "time"},
"stroke": {"value": "lightgrey"}
}
}
},
{
"name": "marks",
"type": "symbol",
"from": {"data": "table"},
"interactive": false,
"encode": {
"update": {
"x": {"scale": "scaleLevel", "field": "level"},
"y": {"scale": "scaleHours", "field": "time"},
"fill": {"scale": "color", "field": "tool"},
"stroke": {"value": "black"},
"strokeWidth": {"value": 1},
"size": {"value": 49},
"opacity": [
{"test": "(!domain || inrange(datum.level, domain)) && (!length(data('selected')) || indata('selected', 'value', datum.tool))", "value": 0.9 },
{"value": 0.15}
]
}
}
},
{
"type": "text",
"from": {"data": "table"},
"encode": {
"update": {
"x": {"scale": "scaleLevel", "field": "level","offset": 18},
"y": {"scale": "scaleHours", "field": "time","offset": 2},
"fill": {"value":"black"},
"text": {"field": "skill"},
"fontSize": {"value": 8}
}
}
}
]
})
vegalite({
"data": {
"values": skilldata
},
"mark": "line",
"encoding": {
"x": {"field": "day", "type": "quantitative"},
"y": {"field": "level", "type": "quantitative"}
}
})
vegalite({
"data": {
"values": skilldata
},
"title": "Learning D3 - First 50 Days",
"mark": "rect",
"encoding": {
"x": {"field": "day",
"bin": {"maxbins":50},
"type": "quantitative",
"title": "Day"},
"y": {"field": "tool",
"type": "ordinal",
"title": "Language"},
"color": { "field": "level", "type": "quantitative"}
}
})
md`## Imports`
vega = require('https://cdn.jsdelivr.net/npm/vega@5/build/vega.js')
vegalite = require("@observablehq/vega-lite@0.1")
// load the Vega-Embed library
vegaEmbed = require("vega-embed@4")
// Create an embed function that applies the loader and theme
embed = function(spec) {
return vegaEmbed(spec, {loader: vegaEmbed.vega.loader({baseURL: 'https://vega.github.io/vega/'}), theme: theme, actions: true})
}
import {radio} from "@jgrunik/inputs"
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.
