31:T4cb,coro = { return { width: 800, height: 450, data: { values: geoCountries, format: { property: "features" } }, params: [ { name: "selectedCountry", select: { type: "point", on: 'mouseover' }, value: [] } ], transform: [ { lookup: "properties.ISO3_CODE", from: { data: { values: filteredTime }, key: "alpha", fields: ['GPI_score', 'GPI_predicted', 'deltaPerc_GPI'] } } ], mark: { type: "geoshape", stroke: null // strokeOpacity: 0 }, encoding: { fill: { field: "GPI_score", type: "quantitative", scale: { scheme: 'reds' }, title: "GPI Score" }, tooltip: [ { type: 'nominal', field: 'properties.Terr_Name', title: 'Country' }, { type: 'quantitative', field: 'GPI_score', title: 'GPI Score', format: '.3f' }, { type: 'quantitative', field: 'GPI_predicted', title: 'GPI Predicted', format: '.3f' } ], opacity: { value: 0.8 } } }; }32:T4b2,selection = { return { width: 800, height: 450, data: { values: geoCountries, format: { property: "features" } }, params: [ { name: "clickedCountry", select: { type: "point", on: 'click' }, value: [135] } ], transform: [ { lookup: "properties.ISO3_CODE", from: { data: { values: filteredTime }, key: "alpha", fields: ['GPI_score', 'GPI_predicted', 'deltaPerc_GPI'] } } ], mark: { type: "geoshape", stroke: null // strokeOpacity: 0 }, encoding: { fill: { value: 'steelblue' }, opacity: { value: 0.01, condition: { selection: "clickedCountry", value: 0.8 } }, tooltip: [ { type: 'nominal', field: 'properties.Terr_Name', title: 'Country' }, { type: 'quantitative', field: 'GPI_score', title: 'GPI Score', format: '.3f' }, { type: 'quantitative', field: 'GPI_predicted', title: 'GPI Predicted', format: '.3f' } ] } }; }33:T478,viewof timeline = vega( { // Framework description: // title: { text: "A Test" }, background: "#fff", padding: { top: 24, right: 5, bottom: 60, left: 0 }, width: width, height: 15, data: { name: 'uniqueDates', values: uniqueDates }, params: [ { name: "selectedDate", select: { type: "point", on: 'click', fields: ['date'] }, nearest: true, value: `datum[datum.lenght-1]` } ], mark: { type: "circle", fill: 'firebrick', stroke: 'gray', strokeWidth: 0, tooltip: true, size: 70, opacity: 0.3 }, encoding: { x: { field: 'date', type: 'temporal', axis: { titleAnchor: 'start', titleY: -40, title: 'Select Date' } }, // strokeWidth: { condition: { param: "selectedDate", value: 1 }, value: 0 }, opacity: { value: 0.3, condition: { param: "selectedDate", value: 1 } } // y: { field: 'GPI_score', type: 'quantitative' } }, view: { strokeWidth: 0 }, config: { axis: { grid: false } } }, { actions: false } )34:[{"id":"56b0898aa4fe091903dde6a1379663ef2bf202bc9746219732d8bdf31e7ad87881f52903dde187cc9601e81235d2cbb13b71584fadf5d3e1239024ab3df4a081","href":"https://static.observableusercontent.com/files/56b0898aa4fe091903dde6a1379663ef2bf202bc9746219732d8bdf31e7ad87881f52903dde187cc9601e81235d2cbb13b71584fadf5d3e1239024ab3df4a081","name":"country-codes_csv.csv","type":"text/csv","lastModified":1615571573281.736,"size":129984},{"id":"4523ef7d1311569b908e0e3e32173b5da4acdfb07b1dc5b5afc5a3cb15f18c68fd7123d747e07e3214c51d0ad13f6976fb12d5b9cc7df0e90eb7a54517c1d552","href":"https://static.observableusercontent.com/files/4523ef7d1311569b908e0e3e32173b5da4acdfb07b1dc5b5afc5a3cb15f18c68fd7123d747e07e3214c51d0ad13f6976fb12d5b9cc7df0e90eb7a54517c1d552","name":"gpi_gdelt_all_countries_rf_results.csv","type":"text/csv","lastModified":1615571573281.736,"size":536150},{"id":"76d4b7a1bf7440cff87d30058e0cc919eb0e6e686853d0091ccf2d6fc89c0036a41394086f6b2c80412800109007b1cd2514b5f4c8888c0ffb56d78ecbccf8de","href":"https://static.observableusercontent.com/files/76d4b7a1bf7440cff87d30058e0cc919eb0e6e686853d0091ccf2d6fc89c0036a41394086f6b2c80412800109007b1cd2514b5f4c8888c0ffb56d78ecbccf8de","name":"world.json","type":"application/json","lastModified":1615571573281.736,"size":209743}] 2f:{"title":"SBD Dashboard - v7 - dates","cells":[{"id":0,"value":"md`# SBD Dashboard - v7 - dates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"gdeltDataFile = FileAttachment(\"gpi_gdelt_all_countries_rf_results.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"gdeltData = gdeltDataFile.map((d, i) => {\n const parsed = {\n date: \n parseTime(d.MonthYear).getTime(),\n monthYear: d.MonthYear,\n year: d.MonthYear.substring(0, 4),\n month: +d.MonthYear.substring(4, 6),\n fips: d.country_code,\n countryName: d.country_name,\n GPI_score: +d.GPI_score,\n GPI_predicted: +d.gpi_predicted,\n deltaPerc_GPI: [(d.GPI_score - d.gpi_predicted) / d.gpi_predicted] * -100\n };\n\n const codice = ccodes.find(e => e['FIPS'] === parsed.fips);\n const alpha = codice ? codice['ISO3166-1-Alpha-3'] : null;\n const id = codice ? codice['ISO4217-currency_numeric_code'] : null;\n return {\n ...parsed,\n alpha: alpha,\n countryId: id\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"ccodes = FileAttachment(\"country-codes_csv.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"parseTime = d3.timeParse(\"%Y%m\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"formatTime = d3.timeFormat(\"%m-%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"geoCountries = {\n return {\n type: countries.type,\n features: countries.features.filter(d => d.properties.name != 'Antarctica')\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## Map composition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"chart_base = {\n return {\n mark: {\n type: \"bar\",\n fill: 'white',\n stroke: 'gray',\n strokeWidth: 0.25\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"uniqueDates = [...new Set(gdeltData.map(d => d.date))].sort().map(d=>{\n return {\n date:d\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"clickedTime = Generators.observe(notify => {\n const clicked = (event, { datum }) => notify(datum);\n timeline.addEventListener(\"click\", clicked);\n return () => timeline.removeEventListener(\"click\", clicked);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"scatter = {\n return {\n transform: [{ filter: { param: \"selectedDate\" } }],\n height: 1500,\n width: 600,\n mark: {\n size: 30,\n opacity: 0.8,\n type: \"circle\",\n fill: 'red',\n stroke: 'gray',\n strokeWidth: 0,\n tooltip: true\n },\n encoding: {\n y: { field: 'fips', type: 'nominal' },\n x: { field: 'GPI_score', type: 'quantitative' }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"filteredTime = {\n if (clickedTime) {\n return gdeltData.filter(d => d.date == clickedTime.date);\n } else {\n return gdeltData.filter(d => d.date == 1546297200000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"projection = {\n return {\n scale: width / zoomSlider,\n center: [0, 15]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"clickedGeo = Generators.observe(notify => {\n const clicked = (event, { datum }) => notify(datum);\n map.addEventListener(\"click\", clicked);\n return () => map.removeEventListener(\"click\", clicked);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"base = {\n return {\n mark: {\n type: 'geoshape',\n fill: '#fff', //'url(#pattern_empty)'\n stroke: '#fff',\n strokeWidth: 1,\n opacity: 0.5\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof zoomSlider = slider({\n min: 0,\n max: 10,\n step: 1,\n value: 10,\n title: \"Zoom Map\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"viewof map = vega(\n {\n // Framework description:\n background: \"#F6F6F6\",\n padding: { top: 12, right: 24, bottom: 24, left: 24 },\n width: width,\n autosize: 'fit',\n height: 350,\n data: {\n values: geoCountries,\n format: { property: \"features\" }\n },\n projection: projection,\n layer: [base, coro, selection], //selection,\n view: { strokeWidth: 3, stroke: '#fff', fill: \"#f7fcfc\" },\n title: `GPI Score`\n },\n { actions: false }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"gdeltData","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"errorLine = ({\n mark: {\n type: \"line\",\n tooltip: true,\n strokeWidth: 2,\n interpolate: 'monotone',\n color: 'firebrick'\n //point: true\n },\n encoding: {\n x: {\n field: \"date\",\n type: \"temporal\"\n },\n y: {\n field: 'deltaPerc_GPI',\n type: \"quantitative\",\n title: \"Error (%)\",\n scale: { zero: false }\n },\n tooltip: [\n {\n field: 'deltaPerc_GPI',\n type: 'quantitative',\n title: 'Error (%)',\n format: '.3f'\n }\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"zeroLine = ({\n mark: {\n type: \"rule\",\n strokeDash: [10, 3],\n size: 1\n },\n encoding: {\n y: {\n datum: 0\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"viewof timeLineError = {\n if (clickedGeo)\n return vega(\n // LINE Specifications\n {\n usermeta: { embedOptions: { renderer: \"svg\" } },\n data: {\n values: gdeltData\n },\n transform: [\n { filter: `datum.alpha==\"${clickedGeo.properties.ISO3_CODE}\"` }\n ],\n width: width / 2,\n autosize: \"fit\",\n height: 200,\n layer: [errorLine, zeroLine],\n config: configuration\n },\n { actions: false }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"gpiLines = ({\n mark: {\n type: \"line\",\n tooltip: true,\n point: {\n filled: false,\n fill: \"white\",\n strokeWidth: 1\n },\n strokeWidth: 1,\n interpolate: 'monotone',\n tooltip: { content: \"data\" }\n },\n encoding: {\n x: {\n field: \"date\",\n type: \"temporal\"\n },\n y: {\n field: \"value\",\n type: \"quantitative\",\n title: \"GPI\",\n scale: { zero: false }\n },\n tooltip: [\n {\n field: \"GPI_score\",\n type: \"quantitative\",\n title: \"GPI Score\",\n format: '.3f'\n },\n {\n field: \"GPI_predicted\",\n type: \"quantitative\",\n title: \"GPI Predicted\",\n format: \".3f\"\n }\n ],\n color: {\n field: \"label\",\n type: \"nominal\",\n title: false,\n scale: {\n domain: [\"GPI_score\", \"GPI_predicted\"],\n range: ['steelblue', 'firebrick']\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"gpiArea = ({\n mark: {\n type: 'area',\n interpolate: 'monotone',\n color: 'lightgray',\n opacity: 0.5\n },\n encoding: {\n x: { type: 'temporal', field: 'date' },\n y: {\n type: 'quantitative',\n field: 'GPI_score',\n title: 'GPI',\n scale: { zero: false }\n },\n y2: {\n type: 'quantitative',\n field: 'GPI_predicted',\n scale: { zero: false }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"viewof timeLineGeo = {\n if (clickedGeo)\n return vega(\n // LINE Specifications\n {\n usermeta: { embedOptions: { renderer: \"svg\" } },\n data: {\n values: gdeltData\n },\n transform: [\n { filter: `datum.alpha==\"${clickedGeo.properties.ISO3_CODE}\"` },\n { fold: [\"GPI_score\", \"GPI_predicted\"], as: ['label', 'value'] }\n ],\n width: width / 2,\n autosize: \"fit\",\n height: 200,\n layer: [gpiArea, gpiLines],\n config: configuration\n },\n { actions: false }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"configuration = ({\n // https://vega.github.io/vega/docs/specification/\n autosize: { type: 'fit-x', contains: 'padding' },\n padding: { top: 20, bottom: 50, left: 12 },\n legend: {\n titleFontSize: 10,\n titleColor: \"#81858C\",\n labelFontSize: 10,\n direction: 'horizontal',\n orient: 'top-right',\n padding: 5,\n offset: 5,\n strokeColor: \"#81858C\",\n fillColor: 'white',\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1496,"value":"md`### Pattern Definition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1498,"value":"path = html // define stripes\n`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`### Vega Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"vega = {\n const v = (window.vega = await require(\"vega@3\"));\n const vl = (window.vl = await require(\"vega-lite@5\"));\n const ve = await require(\"vega-embed@6\");\n async function vega(spec, options) {\n const div = document.createElement(\"div\");\n div.value = (await ve(div, spec, options)).view;\n return div;\n }\n vega.changeset = v.changeset;\n return vega;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"topojson = require('topojson')","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}