30:Tbb0,embed({ "config": {"view": {"width": 400, "height": 300}}, "hconcat": [ { "data": { "values": values }, "mark": {"type": "circle", "size": 150}, "encoding": { "color": { "condition": { "type": "nominal", "field": "country", "legend": null, "selection": "selector001" }, "value": "lightgray" }, "y": {"type": "nominal", "field": "country", "title": null} }, "selection": { "selector001": { "type": "multi", "encodings": ["color"], "on": "click", "toggle": "event.shiftKey", "resolve": "global", "empty": "all" } }, }, { "vconcat": [ { "data": { "values": values }, "mark": {"type": "line", "point": {"shape": "circle", "size": 60}}, "encoding": { "color": {"type": "nominal", "field": "country", "legend": null}, "tooltip": [ {"type": "quantitative", "field": "week"}, {"type": "quantitative", "field": "value"} ], "x": {"type": "nominal", "field": "week"}, "y": {"type": "quantitative", "field": "value", "title": null} }, "selection": { "selector001": { "type": "multi", "encodings": ["color"], "on": "click", "toggle": "event.shiftKey", "resolve": "global", "empty": "all" } }, "title": "Flu Cases by Country and Totals", "transform": [ {"filter": {"selection": "selector002"}}, {"filter": {"selection": "selector001"}} ], "width": 650 }, { "data": { "values": values }, "mark": {"type": "bar", "size": 10}, "encoding": { "color": {"value": "lightgray"}, "tooltip": [ {"type": "quantitative", "aggregate": "sum", "field": "value", "title": "total"} ], "x": {"type": "nominal", "field": "week"}, "y": { "type": "quantitative", "aggregate": "sum", "field": "value", "title": null } }, "height": 120, "selection": { "selector002": { "type": "interval", "encodings": ["x"], "on": "[mousedown, window:mouseup] > window:mousemove!", "translate": "[mousedown, window:mouseup] > window:mousemove!", "zoom": "wheel!", "mark": {"fill": "#333", "fillOpacity": 0.125, "stroke": "white"}, "resolve": "global" } }, "width": 650 } ] } ], "$schema": "https://vega.github.io/schema/vega-lite/v4.json" })31:Tb8f,viewof view = embed({ "config": {"view": {"width": 400, "height": 300}}, "hconcat": [ { "data": { "name": "filter1" }, "mark": {"type": "circle", "size": 150}, "encoding": { "color": { "condition": { "type": "nominal", "field": "country", "legend": null, "selection": "selector001" }, "value": "lightgray" }, "y": {"type": "nominal", "field": "country", "title": null} }, "selection": { "selector001": { "type": "multi", "encodings": ["color"], "on": "click", "toggle": "event.shiftKey", "resolve": "global", "empty": "all" } } }, { "vconcat": [ { "data": {"name": "filter2"}, "mark": {"type": "line", "point": {"shape": "circle", "size": 60}}, "encoding": { "color": {"type": "nominal", "field": "country", "legend": null}, "tooltip": [ {"type": "quantitative", "field": "week"}, {"type": "quantitative", "field": "value"} ], "x": {"type": "nominal", "field": "week", "title": " "}, "y": {"type": "quantitative", "field": "value", "title": null} }, "selection": { "selector001": { "type": "multi", "encodings": ["color"], "on": "click", "toggle": "event.shiftKey", "resolve": "global", "empty": "all" } }, "title": "Flu Cases by Country and Totals", "transform": [ {"filter": {"selection": "selector002"}}, {"filter": {"selection": "selector001"}} ], "width": 650 }, { "data": {"values": values}, "mark": {"type": "bar", "size": 10}, "encoding": { "color": {"value": "lightgray"}, "tooltip": [ {"type": "quantitative", "aggregate": "sum", "field": "value", "title": "total"} ], "x": {"type": "nominal", "field": "week"}, "y": { "type": "quantitative", "aggregate": "sum", "field": "value", "title": null } }, "height": 110, "selection": { "selector002": { "type": "interval", "encodings": ["x"], "on": "[mousedown, window:mouseup] > window:mousemove!", "translate": "[mousedown, window:mouseup] > window:mousemove!", "zoom": "wheel!", "mark": {"fill": "#333", "fillOpacity": 0.125, "stroke": "white"}, "resolve": "global" } }, "width": 650 } ] } ], "$schema": "https://vega.github.io/schema/vega-lite/v4.json" })32:T9e6,embed({ "config": {"view": {"width": 400, "height": 300}}, "hconcat": [ { "data": { "values": values }, "mark": {"type": "circle", "size": 60}, "encoding": { "color": { "condition": {"value": "black", "selection": "selector003"}, "value": "lightgray" }, "y": {"type": "nominal", "field": "continent", "title": null} }, "selection": { "selector003": { "type": "multi", "encodings": ["y"], "on": "click", "toggle": "event.shiftKey", "resolve": "global", "empty": "all" } } }, { "vconcat": [ { "data": { "values": values }, "mark": "bar", "encoding": { "color": {"type": "nominal", "field": "country", "legend": null}, "tooltip": [{"type": "nominal", "field": "country"}], "x": {"type": "nominal", "field": "week"}, "y": { "type": "quantitative", "aggregate": "sum", "field": "value", "title": null } }, "transform": [ {"filter": {"selection": "selector003"}}, {"filter": {"selection": "selector004"}} ], "width": 650 }, { "data": { "values": values }, "mark": {"type": "bar", "size": 10}, "encoding": { "color": {"type": "nominal", "field": "country", "legend": null}, "tooltip": [ {"type": "quantitative", "aggregate": "sum", "field": "value", "title": "total"} ], "x": {"type": "nominal", "field": "week"}, "y": { "type": "quantitative", "aggregate": "sum", "field": "value", "title": null } }, "height": 100, "selection": { "selector004": { "type": "interval", "encodings": ["x"], "on": "[mousedown, window:mouseup] > window:mousemove!", "translate": "[mousedown, window:mouseup] > window:mousemove!", "zoom": "wheel!", "mark": {"fill": "#333", "fillOpacity": 0.125, "stroke": "white"}, "resolve": "global" } }, "width": 650 } ] } ], "$schema": "https://vega.github.io/schema/vega-lite/v4.json" })33:T69d,embed({ "config": {"view": {"width": 400, "height": 300}}, "vconcat": [ { "data": { "values": values }, "mark": "line", "encoding": { "color": {"type": "nominal", "field": "country", "legend": null}, "x": {"type": "nominal", "field": "week"}, "y": {"type": "quantitative", "field": "value", "title": null} }, "selection": { "selector005": { "type": "multi", "encodings": ["color"], "on": "click", "toggle": "event.shiftKey", "resolve": "global", "empty": "all" }, }, "title": "Total Flu Cases by Country", "transform": [{"filter": {"selection": "selector005"}}], "width": 710 }, { "data": { "values": values }, "mark": "bar", "encoding": { "color": { "condition": { "type": "nominal", "field": "country", "legend": null, "selection": "selector005" }, "value": "lightgray" }, "x": {"type": "quantitative", "aggregate": "sum", "field": "value"}, "y": { "type": "nominal", "field": "country", "sort": {"op": "sum", "field": "value", "order": "descending"}, "title": null } }, "selection": { "selector005": { "type": "multi", "encodings": ["color"], "on": "click", "toggle": "event.shiftKey", "resolve": "global", "empty": "all" } }, "width": 710 } ], "$schema": "https://vega.github.io/schema/vega-lite/v4.json" })34:T664,embed({ "config": {"view": {"width": 400, "height": 300}}, "vconcat": [ { "data": { "values": values }, "mark": "line", "encoding": { "color": {"type": "nominal", "field": "country", "legend": null}, "x": {"type": "nominal", "field": "week"}, "y": {"type": "quantitative", "field": "value", "title": null} }, "selection": { "selector006": { "type": "interval", "encodings": ["x"], "on": "[mousedown, window:mouseup] > window:mousemove!", "translate": "[mousedown, window:mouseup] > window:mousemove!", "zoom": "wheel!", "mark": {"fill": "#333", "fillOpacity": 0.125, "stroke": "white"}, "resolve": "global" } }, "title": "Total Flu Cases by Country", "width": 710 }, { "data": { "values": values }, "mark": "bar", "encoding": { "color": {"type": "nominal", "field": "country", "legend": null}, "tooltip": [ {"type": "quantitative", "aggregate": "sum", "field": "value", "title": "total"} ], "x": { "type": "quantitative", "aggregate": "sum", "field": "value", "title": null }, "y": { "type": "nominal", "title": null, "field": "country", "sort": {"op": "sum", "field": "value", "order": "descending"} } }, "transform": [{"filter": {"selection": "selector006"}}], "width": 710 } ], "$schema": "https://vega.github.io/schema/vega-lite/v4.json" })35:Te66,viewof worldView = embed({ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 640, "height": 400, "autosize": "none", "signals": [ { "name": "type", "value": "orthographic", "bind": { "input": "select", "options": [ "mercator", "orthographic" ] } }, { "name": "rotate", "value": 41, "bind": {"input": "range", "min": -180, "max": 180, "step": 1} }, { "name": "scale", "value": 190, "bind": {"input": "range", "min": 50, "max": 500, "step": 1} }, { "name": "center0", "value": 50, "bind": {"input": "range", "min": -180, "max": 180, "step": 1} }, { "name": "center1", "value": -14, "bind": {"input": "range", "min": -90, "max": 90, "step": 1} }, ], "projections": [ { "name": "projection", "type": {"signal": "type"}, "scale": {"signal": "scale"}, "rotate": [{"signal": "rotate"},0,0], "center": [{"signal": "center0"}, {"signal": "center1"}], } ], "data": [ { "name": "source_0", }, {"name": "graticule", "transform": [{"type": "graticule"}]}, { "name": "source_1", "values": world, "format": {"type": "topojson", "feature": "countries"}, "transform": [ { "type": "lookup", "from": "source_0", "key": "id", "fields": ["id"], "values": ["value"] }, { "type": "lookup", "from": "source_0", "key": "id", "fields": ["id"], "values": ["country"] }, { "type": "filter", "expr": "datum[\"value\"] !== null && !isNaN(datum[\"value\"])" } ] }, { "name": "outlines", "values": world, "format": {"type": "topojson", "feature": "countries"}, } ], "marks": [ { "type": "shape", "from": {"data": "graticule"}, "encode": { "update": { "strokeWidth": {"value": 0.4}, "stroke": {"value": "#ddd"}, "fill": {"value": null} } }, "transform": [{"type": "geoshape", "projection": "projection"}] }, { "type": "shape", "from": {"data": "outlines"}, "encode": { "update": { "strokeWidth": {"value": 0.5}, "stroke": {"value": "#fff"}, "fill": {"value": "#ddd"}, "zindex": {"value": 0} }, "hover": { "strokeWidth": {"value": 1}, "zindex": {"value": 1}, "fill": {"value": "#fff"}, "stroke": {"value": "#ddd"}, } }, "transform": [ { "type": "geoshape", "projection": "projection" } ] }, { "type": "shape", "from": {"data": "source_1"}, "encode": { "update": { "strokeWidth": {"value": 0.5}, "stroke": {"value": "#000000"}, "fill": {"scale": "color", "field": "value"}, "zindex": {"value": 0}, "tooltip": { "signal": "{\"Country\": ''+datum[\"country\"], \"Flu Cases\": ''+datum[\"value\"]}" }, }, "hover": { "strokeWidth": {"value": 1}, "zindex": {"value": 1}, "stroke": {"value": "#000000"}, } }, "transform": [{"type": "geoshape", "projection": "projection"}] } ], "scales": [ { "name": "color", "type": "sequential", "domain": {"data": "source_1", "field": "value"}, "range": {"scheme": "blues"}, "nice": false, "zero": false } ], })36:[] 2e:{"title":"Flu MCV","cells":[{"id":0,"value":"md`# Flu MCV`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`#### Several interactive multi-coordinated view eamples of 2010 FluNet Data using Vega/Vega-Lite.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`Brushable bar chart with total flu cases per week and clickable legend/lineplot. Click and drag to brush barchart. Hold shift to select multiple countries. Tooltip over barchart and individual points for totals cases.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`### Embed Vega to use DOM selector for filtering\nUse a DOM selection to filter by continent.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof continentSelector = \n{ \n let continents = [];\n for (let i = 0; i< values.length; i++){ \n if(continents.indexOf(values[i].continent) === -1){\n continents.push(values[i].continent); \n } \n }\n \n return html``\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"viewUpdater = { \n // Construct a changeset with the dataset. Observable will create a new changeset when the data changes. \n let filterSet = embed.vega.changeset()\n .remove(embed.vega.truthy)\n .insert(continentFilter)\n \n view.change('filter1', filterSet).resize(\"fit\").run() \n view.change('filter2', filterSet).resize(\"fit\").run() \n return continentSelector\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"continentFilter = {\n if (continentSelector === \"All Countries\") {\n return values\n } else {\n return values.filter(d => d.continent === continentSelector)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`### Use Vega to create a selector\nBrushable bar chart with total flu cases per week by continent. Click and drag to brush over lower barchart. Hold shift to select multiple continents. Tooltip over barchart for totals cases.\n\nA continent filter is applied below similar to the above example; however, rather than a DOM selector, filtering is defined as a Vega selection. The legend in this MCV is actually composed in Vega schema, whose selection is applied as a filter to the adjacent barchart. Clickable legends are simple to create in Vega. Encode a nominal field in a chart definition and add multi or single selection. Performing filtering this way has the advantage of keeping colors consistant, and it is easier then to configure than embededding Vega.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`### Create other MCVs\nClickable barchart displaying total cases by country. Hold shift to select multiple countries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`Brushable lineplot with coordinated barchart displaying total cases for brushed selection. Brush over linechart to see totals by country for a desired interval.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`### Create an embed colored choropleth\nWorld map displaying total flu cases by week. A tutorial for this projection can be found [here](https://beta.observablehq.com/@manzt/mcv-choropleth-map-with-barchart-using-vega-embed).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"worldViewUpdater = { \n // Embed Vega changes!\n \n // Filter weekly values \n let week = geoValues.filter(d => d.week == weekSlider)\n // Construct a changeset with the dataset. Observable will create a new changeset when the data changes. \n let changeSet = embed.vega.changeset()\n .remove(embed.vega.truthy)\n .insert(week)\n \n barchart.change('week', changeSet).run()\n worldView.change('source_0', changeSet).run()\n return \"Week \" + String(weekSlider)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"viewof barchart = embed({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n \"config\": {\"view\": {\"width\": 530, \"height\": 150}},\n \"data\": {\n \"name\": \"week\"\n },\n \"mark\": \"bar\",\n \"encoding\": {\n \"color\": {\n \"field\": \"value\",\n \"type\": \"quantitative\",\n \"aggregate\": \"sum\",\n \"legend\": null\n },\n \"tooltip\": [\n {\"type\": \"quantitative\", \"aggregate\": \"sum\", \"field\": \"value\", \"title\": \"Total Flu Cases\"}\n ],\n \"x\": {\n \"type\": \"quantitative\",\n \"aggregate\": \"sum\",\n \"field\": \"value\",\n \"title\": null\n },\n \"y\": {\n \"type\": \"nominal\",\n \"title\": null,\n \"field\": \"continent\",\n \"sort\": {\"op\": \"sum\", \"field\": \"value\", \"order\": \"descending\"}\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"viewof weekSlider = slider({\n message: \"Select week:\",\n min: 1, \n max: 52, \n start: 1,\n step: 1,\n int: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"world = await (await fetch('https://vega.github.io/vega-datasets/data/world-110m.json')).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"values = await d3.json('https://gist.githubusercontent.com/manzt/556a7ca076cf4b443e3498305b1fb767/raw/0b36f7d4030858f0d1387332ea0dc189c29b8df2/flu-2010.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"geoIds = new Object({\n 'Afghanistan': 4,\n 'Argentina': 32,\n 'Australia': 36,\n 'Canada': 124,\n 'China': 156,\n 'Colombia': 170,\n 'Egypt': 818,\n 'Germany': 276,\n 'Ireland': 372,\n 'South Africa': 710,\n 'USA': 840\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"geoValues = values.map(d => Object({...d, 'id': geoIds[d.country]}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"function slider({\n message = 'Set your value', \n min = 0, \n max = 1, \n start = 0.5, \n step = 0.1,\n precision = 3, \n int = false,\n}){\n \n min = min/step;\n max = max/step;\n start = start/step;\n \n const div = html`\n\t${message}\n \n ${start*step}\n `;\n const range = div.querySelector(\"[type=range]\");\n const value_disp = div.querySelector('span');\n div.value = value_disp.innerHTML = start*step;\n\n \n range.addEventListener(\"input\", () => {\n const newValue = range.valueAsNumber*step; \n div.value = newValue;\n value_disp.innerHTML = int ? Math.round(newValue) : newValue.toPrecision(precision); \n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"d3 = require('d3-fetch')","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"embed = require('vega-embed@3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}