2e:null 2f:["$","title",null,{"children":"100 Days of Code Interactive Visualisations Days 51-59 | Kim Fitter | Observable"}] 34:T4cb,inputSpec = { return { "width": 200, "height": 100, "data": [ { "name": "table", "values": [ {"key": "Day 1", "value": 2}, {"key": "Day 2", "value": 8}, {"key": "Day 3", "value": 14} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "key"}, "padding": {"signal": "scalePadding"}, "range": "width" }, { "name": "yscale", "type": "linear", "domain": {"data": "table", "field": "value"}, "range": "height" } ], "marks": [ { "type": "rect", "from": {"data": "table"}, "encode": { "update": { "x": {"scale": "xscale", "field": "key"}, "y": {"scale": "yscale", "field": "value"}, "y2": {"scale": "yscale", "value": 0}, "width": {"scale": "xscale", "band": 1}, "fill": {"value": "steelblue"} } } } ], "signals": [ { "name": "scalePadding", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 0.99, "step": 0.01} } ] }; }35:T1161,skilldata = [ {day: 1, daytext: "Day 1 ", level: 2, time: 1, tool:"Notebook", skill:"Set up Observable"}, {day: 2, daytext: "Day 2 ", level: 8, time: 2, tool:"Notebook",skill:"Load modules"}, {day: 3, daytext: "Day 3 ", level: 14, time: 3, tool:"JS",skill:"Code snippets"}, {day: 4, daytext: "Day 4 ", level: 20, time: 4, tool:"JS",skill:"Assignment"}, {day: 5, daytext: "Day 5 ",level: 24, time: 6, tool:"JS",skill:"Data types"}, {day: 6, daytext: "Day 6 ",level: 28, time: 8, tool:"JS",skill:"Classes"}, {day: 7, daytext: "Day 7 ",level: 30, time: 10, tool:"JS",skill:"Strings and template literals"}, {day: 8, daytext: "Day 8 ",level: 34, time: 12, tool:"JS",skill:"Functions"}, {day: 9, daytext: "Day 9 ",level: 35, time: 14, tool:"JS",skill:"Arrays"}, {day: 10, daytext: "Day 10 ",level: 30, time: 18, tool:"JS", skill:"Data Join"}, {day: 11, daytext: "Day 11 ",level: 28, time: 22, tool:"SVG",skill:"Coordinates"}, {day: 12, daytext: "Day 12 ",level: 32, time: 24, tool:"HTML",skill:"HTML basics"}, {day: 13, daytext: "Day 13 ",level: 35, time: 26, tool:"SVG & HTML", skill:"SVG in HTML"}, {day: 14, daytext: "Day 14 ",level: 37, time: 29, tool:"SVG",skill:"SVG elements"}, {day: 15, daytext: "Day 15 ",level: 38, time: 32, tool:"JS",skill:"Generators"}, {day: 16, daytext: "Day 16 ",level: 40, time: 37, tool:"SVG",skill:"SVG Static map"}, {day: 17, daytext: "Day 17 ",level: 44, time: 40, tool:"HTML",skill:"HTML Static map"}, {day: 18, daytext: "Day 18 ",level: 45, time: 42, tool:"JS",skill:"Views"}, {day: 19, daytext: "Day 19 ",level: 40, time: 48, tool:"JS",skill:"Mutable"}, {day: 20, daytext: "Day 20 ",level: 42, time: 50, tool:"SVG",skill:"SVG Axes"}, {day: 21, daytext: "Day 21 ",level: 42, time: 52, tool:"SVG",skill:"SVG DOM"}, {day: 22, daytext: "Day 22 ",level: 44, time: 55, tool:"SVG",skill:"SVG scale transform"}, {day: 23, daytext: "Day 23 ",level: 46, time: 57, tool:"SVG",skill:"SVG annotation"}, {day: 24, daytext: "Day 24 ",level: 48, time: 60, tool:"JS",skill:"Graphviz library"}, {day: 25, daytext: "Day 25 ",level: 50, time: 62, tool:"SVG",skill:"SVG labels"}, {day: 26, daytext: "Day 26 ",level: 51, time: 64, tool:"JS",skill:"Data"}, {day: 27, daytext: "Day 27 ",level: 55, time: 66, tool:"SVG",skill:"SVG scatterplot"}, {day: 28, daytext: "Day 28 ",level: 55, time: 69, tool:"CSS",skill:"CSS colours"}, {day: 29, daytext: "Day 29 ",level: 57, time: 72, tool:"JS",skill:"Transitions"}, {day: 30, daytext: "Day 30 ",level: 58, time: 75, tool:"SVG",skill:"SVG annotation"}, {day: 31, daytext: "Day 31 ",level: 60, time: 77, tool:"JS & HTML",skill:"Mapbox JS library"}, {day: 32, daytext: "Day 32 ",level: 62, time: 79, tool:"JS & HTML",skill:"Mapbox JS library"}, {day: 33, daytext: "Day 33 ",level: 64, time: 81, tool:"JS & HTML",skill:"Mapbox JS library"}, {day: 34, daytext: "Day 34 ",level: 66, time: 83, tool:"JS & HTML",skill:"Mapbox JS library"}, {day: 35, daytext: "Day 35 ",level: 70, time: 85, tool:"JS & HTML",skill:"Mapbox JS library"}, {day: 36, daytext: "Day 36 ",level: 72, time: 87, tool:"JS & HTML",skill:"Leaflet JS library"}, {day: 37, daytext: "Day 37 ",level: 74, time: 89, tool:"JS & HTML",skill:"Leaflet JS library"}, {day: 38, daytext: "Day 38 ",level: 78, time: 91, tool:"JS & HTML",skill:"Leaflet JS library"}, {day: 39, daytext: "Day 39 ",level: 80, time: 93, tool:"JS & HTML",skill:"Leaflet JS library"}, {day: 40, daytext: "Day 40 ",level: 80, time: 95, tool:"JS & SVG",skill:"SVG scale transform"}, {day: 41, daytext: "Day 41 ",level: 81, time: 97, tool:"JS & SVG",skill:"SVG barchart"}, {day: 42, daytext: "Day 42 ",level: 80, time: 99, tool:"JS & SVG",skill:"SVG barchart"}, {day: 43, daytext: "Day 43 ",level: 83, time: 101, tool:"JS",skill:"Views"}, {day: 44, daytext: "Day 44 ",level: 80, time: 105, tool:"JS & SVG",skill:"SVG Circle packing"}, {day: 45, daytext: "Day 45 ",level: 82, time: 109, tool:"JS & SVG",skill:"SVG Tree map"}, {day: 46, daytext: "Day 46 ",level: 83, time: 112, tool:"JS & SVG",skill:"SVG Sankey"}, {day: 47, daytext: "Day 47 ",level: 88, time: 115, tool:"JS & SVG",skill:"SVG Sankey"}, {day: 48, daytext: "Day 48 ",level: 75, time: 118, tool:"JS & HTML",skill:"HTML Voronoi"}, {day: 49, daytext: "Day 49 ",level: 75, time: 121, tool:"JS & HTML",skill:"HTML Voronoi"}, {day: 50, daytext: "Day 50 ",level: 85, time: 124, tool:"JS & SVG",skill:"SVG Voronoi"}]36:T73c,connectedplot = embed({ "$schema": "https://vega.github.io/schema/vega/v3.0.json", "width": 400, "height": 450, "padding": 5, "title":"Learning D3 - Daily Progress", "data": [ { "name": "table", "values": skilldata } ], "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 } ], "axes": [ {"orient": "left", "scale": "scaleHours", "title": "Total Hours"}, {"orient": "bottom", "scale": "scaleLevel", "title": "Arbitrary Comfort Level"} ], "marks": [ { "type": "line", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "scaleLevel", "field": "level"}, "y": {"scale": "scaleHours", "field": "time"}, "stroke": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "scaleLevel", "field": "level"}, "y": {"scale": "scaleHours", "field": "time"}, "fill": {"value": "black"}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1}, "size": {"value": 49} } } }, { "type": "text", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "scaleLevel", "field": "level","offset": 18}, "y": {"scale": "scaleHours", "field": "time","offset": 2}, "fill": {"value": "black"}, "text": {"field": "skill"}, "fontSize": {"value": 8} } } } ] })37:Ta11,connectedplot_legend = embed({ "$schema": "https://vega.github.io/schema/vega/v3.0.json", "width": 400, "height": 450, "padding": 5, "title":"Learning D3 - Daily Progress", "data": [ { "name": "table", "values": skilldata }, { "name": "grouptable", "values": groupskilldata } ], "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": [ { "fill": "color", "title": "Languages", //"position":"left", "offset": 75, "encode": { "symbols": { "update": { // "fillOpacity": {"value": 0.5}, "stroke": {"value": "transparent"} } } } } ], "marks": [ { "type": "line", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "scaleLevel", "field": "level"}, "y": {"scale": "scaleHours", "field": "time"}, "stroke": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "scaleLevel", "field": "level"}, "y": {"scale": "scaleHours", "field": "time"}, "fill": {"scale": "color", "field": "tool"}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1}, "size": {"value": 49} } } }, { "type": "text", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "scaleLevel", "field": "level","offset": 18}, "y": {"scale": "scaleHours", "field": "time","offset": 2}, "fill": {"value":"black"}, "text": {"field": "skill"}, "fontSize": {"value": 8} } } } ] })38:T5e6,html`

Day 56

Let's review the the Vega visualization grammar according to the documentation.

A Vega specification is a JSON object that describes an interactive visualization design. A specification consists of basic properties (such as the width and height of the view) and definitions for the data to visualize, scales that map data values to visual values, axes and legends that visualize these scales, cartographic projections for drawing maps, graphical marks such as rectangles, lines, and symbols to visually represent data, and signals to process user input and modify the visualization in response.

Below is a basic outline of a Vega specification. Complete specifications include definitions for an appropriate subset of the data, scales, axes, marks, etc. properties.

{  

  "$schema": "https://vega.github.io/schema/vega/v5.json",  

  "description": "A specification outline example.",   

  "width": 500, 

  "height": 200, 

  "padding": 5, 

  "autosize": "pad", 

 

  "signals": [], 

  "data": [], 

  "scales": [], 

  "projections": [],
  "axes": [], 

  "legends": [], 

  "marks": [] 

}

To add an interactive legend to this visualisation we need to add signals with the rest of its specification. `39:T1701,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} } } } ] })3a:T840,beeswarm =embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 800, "height": 100, "padding": {"left": 5, "right": 5, "top": 0, "bottom": 40}, "autosize": "none", "signals": [ { "name": "cx", "update": "width / 2" }, { "name": "cy", "update": "height / 2" }, { "name": "radius", "value": 10 }, { "name": "collide", "value": 1 }, { "name": "gravityX", "value": 0.5 }, { "name": "gravityY", "value": 0.5 }, { "name": "static", "value": false} ], "data": [ { "name": "table", "values": skilldata } ], "scales": [ { "name": "xscale", "type": "band", "domain": { "data": "table", "field": "tool", "sort": true }, "range": "width" }, { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "tool"}, "range": {"scheme": "category10"} } ], "axes": [ { "orient": "bottom", "scale": "xscale" } ], "marks": [ { "name": "nodes", "type": "symbol", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "tool"}, "xfocus": {"scale": "xscale", "field": "tool", "band": 0.5}, "yfocus": {"signal": "cy"} }, "update": { "size": {"signal": "pow(2 * radius, 2)"}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1}, "zindex": {"value": 0} }, "hover": { "stroke": {"value": "purple"}, "strokeWidth": {"value": 3}, "zindex": {"value": 1} } }, "transform": [ { "type": "force", "iterations": 300, "static": {"signal": "static"}, "forces": [ {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"}}, {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"}}, {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"}} ] } ] } ] })3b:[] 32:{"id":"cfa9503f5bee096d","slug":"100-days-of-code-interactive-visualisations-days-51","title":"100 Days of Code Interactive Visualisations Days 51-59","thumbnail":"8f167eed448368617e260c025f3341bbb07dcb2ecc1d39bc68693ec6eaff40d4","access_level":"public","create_time":"$D2019-06-26T05:23:44.876Z","update_time":"$D2019-07-03T01:21:49.021Z","view_time":null,"first_public_time":"$D2019-06-27T01:48:42.424Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7d7941efbb2313ba","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":"starter_2024"},"version":438,"publish_version":438,"role":null,"authored":false,"authors":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null}],"members":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"100 Days of Code Interactive Visualisations Days 51-59","cells":[{"id":0,"value":"md`# 100 Days of Code Interactive Visualisations Days 51-59\n\nFor the next couple of days I am going to create interactive visualisations using various JavaScript libraries based on D3 in Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`**Day 51**\n\nI am going to start with [Vega](https://vega.github.io/vega/). This JavaScript library can be used in Observable with or bundled up with D3.js libraries.\n\n> Vega is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.\n\nLets start with this [simple barchart example](https://observablehq.com/@vega/how-vega-works) to see how it works in JavaScript.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"parsedSpec = vega.parse(inputSpec)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof view = {\n const div = document.createElement('div');\n div.value = new vega.View(parsedSpec)\n .initialize(div)\n .run();\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`**Day 52**\n\nNow update the *skilldata* dataset for recent days' charts up to Day 50.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md` We will use [Vega-Embed](https://github.com/vega/vega-embed) and viewof to plot this data.\n\n>Vega-Embed makes it easy to embed interactive Vega and Vega-Lite views into web pages. With Vega Embed, you can:\n\n- Load Vega/Vega-Lite specs from source text, parsed JSON, or URLs.\n- Add action links such as \"View Source\" and \"Open in Vega Editor\".\n- Includes Vega Tooltip.\n- Includes Vega Themes. Experimental: themes are not stable yet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"lines = embed({\n \"$schema\": \"https://vega.github.io/schema/vega/v3.0.json\",\n \"width\": 200,\n \"height\": 150,\n \"padding\": 5,\n\n \"data\": [\n {\n \"name\": \"table\",\n \"values\": skilldata\n }\n ],\n\n \"scales\": [\n {\n \"name\": \"scaleLevel\",\n \"type\": \"linear\",\n \"range\": \"width\",\n \"domain\": {\"data\": \"table\", \"field\": \"level\"},\n \"zero\": false\n },\n {\n \"name\": \"scaleHours\",\n \"type\": \"linear\",\n \"range\": \"height\",\n \"domain\": {\"data\": \"table\", \"field\": \"time\"},\n \"zero\": true,\n \"nice\": true\n }\n ],\n\n \"axes\": [\n {\"orient\": \"left\", \"scale\": \"scaleHours\", \"title\": \"Total Hours\"},\n {\"orient\": \"bottom\", \"scale\": \"scaleLevel\", \"title\": \"Arbitrary Comfort Level\"}\n ],\n\n \"marks\": [\n {\n \"type\": \"line\",\n \"from\": {\"data\": \"table\"},\n \"encode\": {\n \"enter\": {\n \"x\": {\"scale\": \"scaleLevel\", \"field\": \"level\"},\n \"y\": {\"scale\": \"scaleHours\", \"field\": \"time\"}\n }\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`**Day 53**\n\nNow to add some themes to our plot following this [Vega Themes demo example](https://observablehq.com/@vega/vega-themes-demo). Using radio buttons is actually a nice way of comparing plot themes when deciding on a final theme.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof theme = radio({\n title: 'Please select a theme from Vega Themes',\n description: 'The charts will update automatically.',\n options: [\n { label: 'Default', value: undefined },\n { label: 'Dark', value: 'dark' },\n { label: 'Microsoft Excel', value: 'excel' },\n { label: 'ggplot2', value: 'ggplot2' }\n ],\n value: undefined\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`**Day 54**\n\nAdd dots to recreate the D3 SVG connected scatterplot created in Days 27-29, now using Vega with more recent data.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`**Day 55**\n\nCategorical grouping by the tool ie Language used on each day.\n\nUpdate the grouped skills dataset with the first 50 Days data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"groupskilldata = [\n {id:0, group:\"Notebook\",count:2},\n {id:1, group:\"JS\",count:15},\n {id:2, group:\"SVG\",count:10},\n {id:3, group:\"CSS\",count:1}, \n {id:4, group:\"HTML\",count:2},\n {id:5, group:\"SVG & HTML\",count:1},\n {id:6, group:\"JS & HTML\",count:11},\n {id:7, group:\"JS & SVG\",count:8}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`**Day 57**\n\nI was wondering if JSON is a programming language based experience of working through these examples. It is in fact [a text format based on a subset of the JavaScript Programming Language](https://www.json.org/).\n\nNext create a [beeswarm plot](https://vega.github.io/vega/examples/beeswarm-plot/) using the grouped data. This plot has gravity and collide signals so the points move.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`**Day 58**\n\nNext we will import and use the Vega-lite library. Where Vega is a higher level, built on D3, Vega-lit is a higher level built on Vega. We can use this library when we need to create interactive common chart types with a quick \"time to chart\". However we can fall back on the Vega syntax or to D3 when we need more customisation and flexibility.\n\n> Vega-Lite specifications describe visualizations as mappings from data to properties of graphical marks (e.g., points or bars). The Vega-Lite compiler automatically produces visualization components including axes, legends, and scales. \n\n> This approach allows specifications to be succinct and expressive, but also provide user control. \n\nVega-lite is also available in R using the [altair](https://github.com/vegawidget/altair) and [vegalite](https://cran.r-project.org/web/packages/vegalite) R packages.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`First we can take a look at the [Vega-lite getting started tutorial](https://vega.github.io/vega-lite/tutorials/getting_started.html) to understand the sytax. \n\nThe Vega-Lite specification is more concise than the Vega specification. We need to include data, mark and encoding properties at least to encode the data with marks. Then wrap the JSON format specification in vegalite() to use in this Observable notebook.\n\nSee below a first example using the *skilldata*, with the day along the x axis for a change.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"vegalite({\n \"data\": {\n \"values\": skilldata\n },\n \"mark\": \"line\",\n \"encoding\": {\n \"x\": {\"field\": \"day\", \"type\": \"quantitative\"},\n \"y\": {\"field\": \"level\", \"type\": \"quantitative\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`**Day 59**\n \nNext try out a [Table binned heatmap](https://vega.github.io/vega-lite/examples/rect_binned_heatmap.html) to view the confidence level against the languages over the 50 days. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"vegalite({\n \"data\": {\n \"values\": skilldata\n },\n \"title\": \"Learning D3 - First 50 Days\",\n \"mark\": \"rect\",\n \"encoding\": {\n \"x\": {\"field\": \"day\", \n \"bin\": {\"maxbins\":50},\n \"type\": \"quantitative\",\n \"title\": \"Day\"},\n \n \"y\": {\"field\": \"tool\", \n \"type\": \"ordinal\",\n \"title\": \"Language\"},\n \"color\": { \"field\": \"level\", \"type\": \"quantitative\"}\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Imports`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"vega = require('https://cdn.jsdelivr.net/npm/vega@5/build/vega.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// load the Vega-Embed library\nvegaEmbed = require(\"vega-embed@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"// Create an embed function that applies the loader and theme\nembed = function(spec) {\n return vegaEmbed(spec, {loader: vegaEmbed.vega.loader({baseURL: 'https://vega.github.io/vega/'}), theme: theme, actions: true})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"import {radio} from \"@jgrunik/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"