2c:null 2d:["$","title",null,{"children":"Exploring a csv file with vega-lite | ee2dev | Observable"}] 32:T6ee,function rowConversions(row, i, colNames) { // This function is invoked for each row, being passed an object representing the current row (d), the index (i) // starting at zero for the first non-header row, and the array of column names. If the returned value is null or // undefined, the row is skipped and will be omitted from the array returned by dsv.parse; otherwise, the returned // value defines the corresponding row object --> see https://github.com/d3/d3-dsv#dsv_parse // --1-- return row as is // return row; // --2-- //row["ISO_3166_1"] = +row["ISO_3166_1"]; row["population_2018"] = +row["population_2018"].replaceAll(",",""); row["population_2019"] = +row["population_2019"].replaceAll(",",""); row["population_2020"] = +row["population_2020"].replaceAll(",",""); row["country_alt"] = row["country_alt"].replaceAll(",",";"); row["population_change_2019"] = +row["population_change_2019"]; row["population_change_2020"] = +row["population_change_2020"]; //row["population_change_2020"] = +row["population_change_2020"].replaceAll(" %","") / 100; row["population_change_2020_net"] = +row["population_change_2020_net"].replaceAll(",",""); row["density"] = +row["density"].replaceAll(",",""); row["area"] = +row["area"].replaceAll(",",""); row["migrants_net"] = +substituteNA(row["migrants_net"].replaceAll(",","")); row["fert_rate"] = +substituteNA(row["fert_rate"]); row["age_median"] = +substituteNA(row["age_median"]); row["pop_urban_perc"] = +substituteNA(row["pop_urban_perc"]); //row["pop_urban_perc"] = +substituteNA(row["pop_urban_perc"].replaceAll(" %","")) / 100; row["world_share"] = +row["world_share"]; //row["world_share"] = +row["world_share"].replaceAll(" %","") / 100; return row; }33:T9a2,vis2 = { vl.vega.timeFormatLocale(locale); // show dates in German vl.vega.formatLocale(locale); // show numbers with German groupings/ separators const categories = (type(vl2bar) === "nominal" || type(vl2bar) === "ordinal" ); // create a select for filtering. Interval selection for quantitative and Multi selection for categorical attributes const brush = categories ? vl.selectMulti().encodings('x') : vl.selectInterval().encodings('x'); const opacity = vl.opacity().if(brush, vl.value(0.9)).value(0.1); // determine opacity based on brush // create an overview histogram/ bar chart and add a brush for filtering let overview = vl.markBar() .select(brush) // add interval brush selection to the chart .width(width -140) // use the full default chart width .height(50); // set chart height to 50 pixels overview = categories ? overview.encode( vl.x().field(vl2bar).type(type(vl2bar)) .axis({title: null, labelAngle: 0}), // no title, no label angle // vl.color().fieldN(vl2bar).scale({range: ['#e7ba52', '#a7a7a7', '#aec7e8', '#1f77b4', '#9467bd']}), vl.y().count().title(null), // counts, no axis title // OR instead of count: max(field) min(field), mean(field), sum(field) // e.g. vl.y().max("population_2020").title("my title"), // vl.opacity().if(selectGenre, vl.value(0.75)).value(0.05) opacity // modulate bar opacity based on the brush selection for categories ) : overview.encode( vl.x().field(vl2bar).type(type(vl2bar)) .bin({maxbins: 100}) // minbin: 1 .axis({title: null, labelAngle: 0}), // no title, no label angle vl.y().count().title(null), // counts, no axis title ); // a detail scatterplot of the two chosen attributes const detail = vl.markPoint() .encode( vl.x().field(vl2x).type(type(vl2x)),//.scale({type: "log"}), vl.y().field(vl2y).type(type(vl2y)), vl.tooltip(["country", "territory"]), opacity // modulate point opacity based on the brush selection ); // vertically concatenate (vconcat) charts const plot = vl.data(processedData) .vconcat(overview, detail) .config({padding: {"left": 5, "top": 5, "right": 50, "bottom": 70}}); // now tooltip will not be clipped return plot.render(); // return html`

${JSON.stringify(plot.toObject(), 0, 2)}

`; // format JSON data }34:T5f2,data = { // convenience definition let obj = {}; obj.original = inputData_original; obj.parsed = inputData; obj.processed = processedData; /* obj.attributes2 = {}; for (const property in attributesTypes) { obj.attributes2[property] = attributesTypes[property]; } */ obj.attributes = {}; obj.attributes.all = Object.keys(processedData[0]); const nominalAttributes = Object.keys(processedData[0]).filter(d => autotype(d) === "nominal"); let defaultKeys = Object.keys(processedData[0]).filter(key => (autotype([key]) !== "nominal") || new Set(processedData.map(ele => ele[key])).size <= 20); let defaultColor; if (defaultKeys.filter((key, i) => autotype(key) === "nominal" && i > 1).length >= 1) { defaultColor = defaultKeys.filter((key, i) => autotype(key) === "nominal" && i > 1)[0]; } else if (defaultKeys.filter((key, i) => autotype(key) === "nominal").length >= 1) { defaultColor = defaultKeys.filter((key, i) => autotype(key) === "nominal")[0]; } else { defaultColor = nominalAttributes[0]; } if (defaultKeys.length < 4) { defaultKeys = Object.keys(processedData[0]); } obj.defaultKeys = defaultKeys; obj.defaultX = defaultKeys[0]; obj.defaultY = defaultKeys[1]; obj.defaultColor = defaultColor; obj.defaultSize = defaultKeys.filter(d => autotype(d) === "quantitative"); obj.nominalAttributes = nominalAttributes; obj.quantitativeAttributes = Object.keys(processedData[0]).filter(d =>autotype(d) === "quantitative"); return obj; }35:T8b7,defaultAttributes = { // set default attributes for each visualization let vis = []; let defaults = {}; let attributeSet = new Set(Object.keys(attributes)); // vis 1: Scatterplot with circles, size, color defaults.x = {}; defaults.x.options = Object.keys(attributes); defaults.x.value = findDefaultAttribute(attributeSet, ["temporal", "quantitative", "ordinal","nominal"]); defaults.y = {}; defaults.y.options = Object.keys(attributes); defaults.y.value = findDefaultAttribute(attributeSet, ["quantitative", "ordinal","nominal"]); defaults.color = {}; defaults.color.options = Object.keys(attributes).filter(d => attributes[d] === "nominal" || attributes[d] === "ordinal"); defaults.color.value = findDefaultAttribute(attributeSet, ["ordinal","nominal"]); defaults.size = {}; defaults.size.options = Object.keys(attributes).filter(d => attributes[d] === "quantitative"); defaults.size.value = findDefaultAttribute(attributeSet, ["quantitative"]); vis.push(defaults); attributeSet = new Set(Object.keys(attributes)); defaults = {}; // vis 2: Histogram with linked scatterplot defaults.bar = {}; defaults.bar.options = Object.keys(attributes); defaults.bar.value = findDefaultAttribute(attributeSet, ["temporal", "quantitative", "ordinal","nominal"]); defaults.x = {}; defaults.x.options = Object.keys(attributes); defaults.x.value = findDefaultAttribute(attributeSet, ["temporal", "quantitative", "ordinal","nominal"]); defaults.y = {}; defaults.y.options = Object.keys(attributes); defaults.y.value = findDefaultAttribute(attributeSet, ["quantitative", "ordinal","nominal"]); vis.push(defaults); attributeSet = new Set(Object.keys(attributes)); defaults = {}; // vis 3: Cross filter (no default attributes) vis.push(defaults); attributeSet = new Set(Object.keys(attributes)); defaults = {}; // vis 4: Scatter plot matrix defaults.color = {}; let ar = Object.keys(attributes).filter(d => attributes[d] === "nominal" || attributes[d] === "ordinal"); ar.push("--none--"); defaults.color.options = ar; defaults.color.value = findDefaultAttribute(attributeSet, ["ordinal","nominal"]); vis.push(defaults); return vis; }36:[{"id":"4e1ea0463f6c6c98887de3e2d07ffecf83476ff111f736875f8d96384d48214bcc13409cf57e9f69da3faafdd9a9561071c587d27e42deb45a50011aaaa3e824","href":"https://static.observableusercontent.com/files/4e1ea0463f6c6c98887de3e2d07ffecf83476ff111f736875f8d96384d48214bcc13409cf57e9f69da3faafdd9a9561071c587d27e42deb45a50011aaaa3e824","name":"countries7.csv","type":"text/csv","lastModified":1615416967586.689,"size":59919}] 30:{"id":"65a26cacb2539eac","slug":"exploring-a-csv-file-with-vega-lite","title":"Exploring a csv file with vega-lite","thumbnail":"71a43b14c1da3acf7483cfe759e35a83f21cdc9edb05e59b3d90de4d6a27361a","access_level":"public","create_time":"$D2021-01-04T00:17:04.995Z","update_time":"$D2021-08-12T14:57:14.600Z","view_time":null,"first_public_time":"$D2021-03-10T23:12:23.823Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":1606,"publish_version":1606,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"}],"comments":[{"id":"0f9d1351352f3eb2","reply_to_id":null,"content":"🎉","create_time":"$D2021-03-15T17:30:08.513Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":{"id":"59c2f34838f33517","slug":"visualization-libraries","title":"visualization libraries","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"type":"notebook","body":{"titling":"auto","title":"Exploring a csv file with vega-lite","cells":[{"id":0,"value":"md`# Exploring a csv file with vega-lite \nThis is a workflow for exploring a csv file:\n- data should be in [tidy format](https://observablehq.com/@uwdata/tidy-data-in-javascript)\n- dates should be in *\"YYYY-MM-DD\"* format\n- default type conversions for *dates, nominal, quantitative*\n- all default conversions and the type *ordinal* can be overridden manually`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"heading(\" 👉 Select data source\", 1, 9);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"viewof file = fileInput({\n initialValue: FileAttachment(\"countries7.csv\").blob(),\n accept: \".csv\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"heading(\" 👉 Choose delimiter\", 2, 9);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof delimiter = Select([\", (comma)\", \"; (semicolon)\", \"| (pipe)\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"heading(\" 🧐 Check if custom parsing is required\", 3, 9);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"inputData_original = {\n const psv = d3.dsvFormat(delimiter.charAt(0));\n let myFile = await Files.text(file); ;\n return psv.parse(myFile);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"heading(\" 🤓 Specify custom parsing (if required)\", 4, 9);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"inputData = {\n const psv = d3.dsvFormat(delimiter.charAt(0));\n let myFile = await Files.text(file); \n \n // Need to process file before parsing ?\n // myFile = removeLines(myFile, 1); // remove x lines from the beginning\n // myFile = substituteNA(myFile) // delete dots in column names\n myFile = substituteSpaceInColumnNames(myFile); // replace spaces with underscore for column names\n\n // need conversion? update function rowConversions()\n return defaultData ? psv.parse(myFile, rowConversions) : psv.parse(myFile, d3.autoType); \n // return psv.parse(myFile);\n // return psv.parse(myFile, d3.autoType);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"heading(\" 🧐 Check if the data looks right?\", 5, 9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"Table(inputData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"heading(\" 🤓 Further process your data (if applicable)\", 6, 9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"processedData = {\n if (defaultData) {\n return inputData.map((d) => {\n delete d[\"ISO_3166_1\"];\n delete d[\"population_2018\"];\n delete d[\"population_2019\"];\n delete d[\"population_change_2019\"];\n delete d[\"population_change_2020_net\"];\n delete d[\"flag\"];\n return d;\n });\n } else {\n // return getRandomSubarray(inputData, 100); // take a sample of 100 records from original data\n return inputData;\n // return processInput(inputData);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"function processInput(data) {\n let ar = [];\n let obj = {};\n for (let row of data) {\n row.health = row.health ? \"yes\" : \"no\";\n row.property = row.property ? \"yes\" : \"no\";\n row.life = row.life ? \"yes\" : \"no\";\n row.new_business = row.new_business ? \"yes\" : \"no\";\n row.gender = row.gender === \"?\" ? \"\" : row.gender;\n ar.push(row);\n }\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"heading(\" 🧐 Verify data types (note that ordinal is never set by default)\", 7, 9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"viewof attributeTypes = getAttributeTypes() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"heading(\" 💾 Optional: save your data (if data has been processed)\", 8, 9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"DOM.download(serialize(processedData), \"output.csv\", \"Download CSV\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"heading(\" 📊📈✨ Explore your data \", 9, 9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"heading(\" Scatterplot with circles, size, color \", 1, 4, \"blue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof vlx = Select(defaultAttributes[0].x.options, { \n label: toHtml(\"x axis:\"),\n value: defaultAttributes[0].x.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof vly = Select(defaultAttributes[0].y.options, {\n label: toHtml(\"y axis:\"),\n value: defaultAttributes[0].y.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"viewof vlcolor = Select(defaultAttributes[0].color.options, {\n label: toHtml(\"color:\"),\n value: defaultAttributes[0].color.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof vlsize = Select(defaultAttributes[0].size.options, {\n label: toHtml(\"size:\"),\n value: defaultAttributes[0].size.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"vis1 = {\n vl.vega.timeFormatLocale(locale); // show dates in German \n vl.vega.formatLocale(locale); // show numbers with German groupings/ separators\n \n const plot = vl.markCircle({tooltip: {\"content\": \"data\"}}) \n // .width(200)\n // .height(400)\n .data(processedData)\n .encode(\n vl.x().field(vlx).type(type(vlx)), //.sort([\"Europe\", \"Oceania\", \"Asia\", \"Americas\", \"Africa\"]),\n vl.y().field(vly).type(type(vly)), \n vl.color().field(vlcolor).type(type(vlcolor)), \n vl.size().field(vlsize).type(type(vlsize)), \n // vl.column().field(\"region\"),\n // vl.tooltip([vlx, vly, vlsize, vlcolor,]),\n /*\n vl.tooltip([\n {\n \"field\": \"area\",\n \"type\": \"quantitative\",\n \"format\": \",.0f\"\n }\n ])\n */\n );\n \n return plot.render();\n // return html`
${JSON.stringify(plot.toObject(), 0, 2)}
`; // format JSON data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"heading(\" Histogram with linked scatterplot \", 2, 4, \"blue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"md`You can filter the data by selecting the bars. \n- If the bars represent a nominal or an ordinal attribute, multiple bars can be selected with *shift + left mouse button* \n- If the bars represent quantitative or an temporal atttribute, an interval can be selected by *moving the mouse* while the *left mouse button* is pressed. After the interval is specified, it can also be moved by *dragging* it to the desired area.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"viewof vl2bar = Select(defaultAttributes[1].bar.options, { \n label: toHtml(\"bars:\"),\n value: defaultAttributes[1].bar.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"viewof vl2x = Select(defaultAttributes[1].x.options, { \n label: toHtml(\"x axis:\"),\n value: defaultAttributes[1].x.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"viewof vl2y = Select(defaultAttributes[1].y.options, { \n label: toHtml(\"y axis:\"),\n value: defaultAttributes[1].y.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"heading(\" Cross-filtering \", 3, 4, \"blue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"md`You can filter the data by selecting an interval of bars. \n- filters for different attributes will be treated as AND conditions (intersection).\n- to reset all current filters *double click* on any chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"viewof selected = vegaCrossfilter(data.processed, attributesReduced, {\n columns: 1,\n facetHeight: 100,\n binStep: 100,\n colorSelected: \"steelblue\"\n // colorBase: \"#ddd\",\n // colorSelected: \"steelblue\",\n // columns: 4,\n // facetWidth: 100,\n // facetHeight: 100,\n // binStep: 30,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"md`#### Filter`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"Table(selected.filter.length ? selected.filter : [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"md`#### Filtered data (${selected.data.length} rows)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"Table(selected.data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"DOM.download(serialize(selected.data), \"output_filtered.csv\", \"Download filtered data\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"heading(\" Scatter plot matrix \", 4, 4, \"blue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"viewof vl4color = Select(defaultAttributes[3].color.options, {\n label: toHtml(\"color:\"),\n value: defaultAttributes[0].color.value,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"vis4 = {\n vl.vega.timeFormatLocale(locale); // show dates in German \n vl.vega.formatLocale(locale); // show numbers with German groupings/ separators\n \n const brush = vl.selectInterval()\n .resolve('global'); // resolve all selections to a single global instance\n \n return vl.markCircle({tooltip: true})\n .data(processedData)\n .select(brush)\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(vl.repeat('row')),\n vl.color().if(brush, vl.field(vl4color).type(type(vl4color))).value('grey'),\n vl.opacity().if(brush, vl.value(0.8)).value(0.1)\n )\n .width(140)\n .height(140)\n .repeat({\n column: Object.keys(attributes).filter(d => attributes[d] === \"quantitative\"),\n row: Object.keys(attributes).filter(d => attributes[d] === \"quantitative\").reverse(),\n })\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"md`### Improvements and extensions\n\nAny suggestion or help would be greatly appreciated for the following questions:\n- how to inherit the number/date format also for the tooltip (not just for the axes)?\n- In the cell *vis3* (cross filtering) the brush selection is always selectInterval(). I would like it to be selectInterval() for quantitative attributes, and selectMulti() otherwise\n- (also cell *vis3*) I created two different charts for quantitative and for the remaining attributes solely because the latter doesn't need binning. What is a more efficient way to get this done? \n- in the cell (cross filtering), updated data types are currently ignored\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`### Parsing and processing functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"function substituteNA(file) {\n file = file.replaceAll(\"N.A.\",\"\");\n return file;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"function substituteNA2(value) {\n if (value === \"\") {\n return NaN;\n } else if (value === \"N.A.\") {\n return NaN;\n } else {\n return value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"function substituteSpaceInColumnNames(file) {\n \n let result = file.replace(/^.*/,function(m) {\n return m.replace(/ /g,\"_\");\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"function getRandomSubarray(arr, size) {\n let shuffled = arr.slice(0), i = arr.length, min = i - size, temp, index;\n while (i-- > min) {\n index = Math.floor((i + 1) * Math.random());\n temp = shuffled[index];\n shuffled[index] = shuffled[i];\n shuffled[i] = temp;\n }\n return shuffled.slice(min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"attributes = {\n let obj = {};\n let arrayIndexes = new Set(Array.from(attributeTypes.keys(), i => \"\" + i));\n let props = Object.keys(attributeTypes).filter(k => !arrayIndexes.has(k));\n for (let property of props) {\n obj[property] = attributeTypes[property];\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1398,"value":"attributesReduced = {\n // all attributes except the ordinal and nominal ones with high cardinality\n return Object.keys(attributes).filter((key) =>\n attributes[key] === \"nominal\" || attributes[key] === \"ordinal\"\n ? cardinality[key] < 10\n ? true\n : false\n : true\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"cardinality = {\n let c = {};\n for (let key of Object.keys(attributes)) {\n c[key] = (attributes[key] === \"nominal\" || attributes[key] === \"ordinal\") \n ? new Set(processedData.map(ele => ele[key])).size\n : Infinity; \n } \n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"categories = {\n let obj = {};\n let categorical_attributes = \n Object.keys(attributes).filter(key => (attributes[key] === \"nominal\" || attributes[key] === \"ordinal\"));\n for (let key of categorical_attributes) {\n obj[key] = processedData.map(ele => ele[key]).filter((v, i, a) => a.indexOf(v) === i);\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"defaultData = (inputData_original[0].ISO_3166_1 === \"4\") // hack to check if new data is loaded","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"md`### Locale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"viewof cc = Select(Object.keys(countryCodes), {\n label: toHtml(\"country code:\"),\n value: defaultCountryCode,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"countryCodes = ({\n \"Chinese (PRC)\": \"zh-CN\",\n \"English (GB)\": \"en-GB\",\n \"English (US)\": \"en-US\",\n \"German\": \"de-DE\",\n \"Hebrew\": \"he-IL\",\n \"French\": \"fr-FR\",\n \"Spanish\": \"es-ES\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"countryCode = countryCodes[cc]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"defaultCountryCode = {\n let cc = \"English (US)\";\n let params = new URLSearchParams(location.search);\n const para_cc = params.get(\"cc\");\n for (const [key, value] of Object.entries(countryCodes)) {\n if (para_cc === value) { cc = key;} \n }\n return cc; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"locale = ({ ...localeFormat, ...localeTimeFormat});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"localeTimeFormat = d3.json(`https://unpkg.com\\/d3-time-format@1/locale/${countryCode}.json`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"localeFormat = d3.json(`https://unpkg.com\\/d3-format@1/locale/${countryCode}.json`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`### Libraries and functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"function compare(a, b) {\n \n /*if ((attributes.a === \"nominal\" || attributes.a === \"ordinal\") && cardinality.a < cardinality.b) {\n return 1;\n }\n else if \n return -1;\n */\n if (cardinality[a] < cardinality[b]) {\n return -1;\n }\n if (cardinality[a] > cardinality[b]) {\n return 1;\n }\n // a must be equal to b\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"function toHtml (text) {\n return html`${text}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"function findDefaultAttribute (attributeSet, typeOrder) {\n const attributeArray = Array.from(attributeSet); \n for (let type of typeOrder) {\n if (attributeArray.filter(d => attributes[d] === type).length) {\n const attr = attributeArray.filter(d => attributes[d] === type).sort(compare)[0];\n attributeSet.delete(attr);\n return attr;\n }\n }\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"function autotype(field) {\n const value = processedData[0][field];\n if (typeof (value) === \"number\") {\n return \"quantitative\";\n }\n else if (value instanceof Date) {\n return \"temporal\";\n }\n else { \n return \"nominal\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"function type(field) {\n return attributeTypes[field];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"function getAttributeTypes() {\n let views = [];\n let names = [];\n let defaultType;\n let types = [\n ['quantitative', 'quantitative'],\n ['nominal', 'nominal'],\n ['ordinal', 'ordinal'],\n ['temporal', 'temporal'],\n ];\n let reorderedTypes;\n for (let key of data.attributes.all) {\n defaultType = autotype(key);\n reorderedTypes = types.sort((a,b) => a[0] === defaultType ? -1 : 0);\n views.push([menu(key, reorderedTypes)]);\n names.push([key]); \n }\n\n return inputsGroup(views, names);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"import {vegaCrossfilter} from \"@ee2dev/vega-crossfilter/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"import {fileInput} from \"@mbostock/file-input-with-initial-value\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {serialize} from \"@palewire/saving-csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"import {Select, Table, Text, Button} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"import {heading} from '@ee2dev/formatting-in-observable'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"import {menu} from \"@ee2dev/dom-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"import {inputsGroup} from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"