2d:null 2e:["$","title",null,{"children":"Visualizing Proportions and Relationship | ic-dataviz | Observable"}] 33:T933,vegalite( { "data": { "values": updatedData, }, "transform": [ { //We will be using joinaggregate which is a special case of the window transform where the frame is always [null, null], so you can use window transform, too and use frame as [null, null]. //The joinaggregate transform extends the input data objects with aggregate values in a new field. //Link: https://vega.github.io/vega-lite/docs/joinaggregate.html "joinaggregate": [{ "op": "sum", "field": "population", "as": "TotalPopulation" //output field's name of the sum operation on population data }], "groupby": ["year"], //do calculations seperately for each year }, { "calculate": "datum.population/datum.TotalPopulation", "as": "Percentage" } ], "facet": { "column": {"field": "year", "type": "nominal", "title": false, "header": { "labelFontSize": 20, "labelPadding":20 }}, }, "spec": { "encoding": { "theta": {"field": "Percentage", "type": "quantitative", "stack": "zero", "tooltip": {"content": "data"}}, //"stack": "zero" or "stack": true is needed because it stacks with baseline offset at zero value of the scale. It is needed for proper alignment of the percentage with their respective part "order": {"field": "Percentage", "type": "quantitative", "sort": "descending"}, //orders the arc of dounut chart by size "color": {"field": "country", "type": "nominal"}, }, "layer": [ { "mark": {"type": "arc", "innerRadius": 40, "tooltip": {"content": "data"}, "outerRadius": 80}, //specifying outer radius to fit our percentage data on the chart in proper position (like put label at a slight larger radius of the dounut outerradius) }, { "mark": {"type": "text", "radius": 100, "fontSize": 12}, "encoding": { "text": {"field": "Percentage", "type": "quantitative", "format": ".1%", }, //format specifies that the percentage value is shown in 1 decimal point } } ], "view": {"stroke": null}, }, "padding": 30, "title": {"text": "Populations 1987/1997/2007", "align": "left", "fontSize": 25, "offset": 30}, } )34:T969,vegalite( { "height": 400, "width" : 200, "data": { "values": countryData, }, "transform": [ { "joinaggregate": [{ "op": "sum", "field": "population", "as": "TotalPopulation" }], "groupby": ["year"], }, { "calculate": "datum.population/datum.TotalPopulation", "as": "Percentage" } ], "facet": { "column": {"field": "year", "type": "nominal", "title": false, "header": { "labelFontSize": 20, "labelPadding":20 }}, }, "spec": { "encoding": { "y": {"field": "population", "type": "quantitative","title": "Population→"}, "order": {"field": "population", "type": "quantitative", "sort": "descending"}, //For the sort-order you use here, make sure you order the corresponding y-field of the dataset in the same sort-order "color": {"field": "country", "type": "nominal", "sort": [ "United States", "India", "China"], //orders the position of label in the specified way }, }, "layer": [ { "mark": {type: "bar", width: 100, tooltip: true}, }, { transform: [ { "window": [{"op": "sum", "field": "population", "as": "testsum"}], "groupby": ["year"], }, { "calculate": " datum.testsum - datum.population/2", //datum.testsum represents the topmost position of each individual bars of the stacked-bar, then for each of those bars, subtracting {(population of each bar)/2} from the top position gives the mid-point of each individual bars of that stacked-bar. "as": "center" }, ], "mark": {"type": "text", "fontSize": 15}, "encoding": { "color": {"value": "white"}, "y": {"field": "center", "type": "quantitative", "title": false}, "text": {"field": "Percentage", "type": "quantitative", "format": ".1%"}, "order": {"field": "Percentage", "type": "quantitative", "sort": "descending"}, //orders inside the stacked bar chart }, } ], "view": {"stroke": null}, }, "padding": 30, "title": {"text": "Populations 1987/1997/2007", "align": "left", "fontSize": 25, "offset": 30}, } )35:T640,vegalite( { "data": { "values": countryData, }, "transform": [ { "joinaggregate": [{ "op": "sum", "field": "population", "as": "TotalPopulation" }], "groupby": ["year"], }, { "calculate": "datum.population/datum.TotalPopulation", "as": "Percentage" } ], "facet": { "column": {"field": "year", "type": "nominal", "title": false, "header": { "labelFontSize": 20, "labelPadding":20 }}, }, "spec": { "encoding": { "x": {"field": "country", "type": "ordinal", "axis": false}, //Adding this row creates a grouped bar-chart in a already existing stacked bar-chart "y": {"field": "population", "type": "quantitative", "title": "Population→"}, "order": {"field": "population", "type": "quantitative", "sort": "descending"}, "color": {"field": "country", "type": "nominal", "title": "Country"}, }, "layer": [ { "mark": {type: "bar", tooltip: true}, }, { "mark": {"type": "text", "baseline": "bottom", "fontSize": 15}, "encoding": { "color": {"value": "black"}, "text": {"field": "Percentage", "type": "quantitative", "format": ".1%"}, }, } ], "view": {"stroke": null}, "width": 300, }, "padding": 30, "title": {"text": "Populations 1987/1997/2007", "align": "left", "fontSize": 25, "offset": 30}, } )36:[{"id":"23442df7822231d552c3e7af54e68308f4193111266d7e0219e32b57763cd2b97847b8be063f5c4e0b1332117f133671f067f5f453cd1574bd8dc7a72819cb3d","href":"https://static.observableusercontent.com/files/23442df7822231d552c3e7af54e68308f4193111266d7e0219e32b57763cd2b97847b8be063f5c4e0b1332117f133671f067f5f453cd1574bd8dc7a72819cb3d","name":"gapminder.csv","type":"text/csv","lastModified":1629696741529.895,"size":83786},{"id":"c4bc130b1d281e9b946f25d1d20e71e2b88bdd9c3804d956c1418741ddb40d7242ddab86ab6236384cca9c0dff57c2e163b66d64135190913de5c633ec9ece2c","href":"https://static.observableusercontent.com/files/c4bc130b1d281e9b946f25d1d20e71e2b88bdd9c3804d956c1418741ddb40d7242ddab86ab6236384cca9c0dff57c2e163b66d64135190913de5c633ec9ece2c","name":"mpg.csv","type":"text/csv","lastModified":1629696741529.895,"size":21222}] 31:{"id":"9a3653441c776970","slug":"visualizing-proportions-and-relationship","title":"Visualizing Proportions and Relationship","thumbnail":"53ca3eb18fe761747f1c952b421c8ff4f0efc76f3657a03b138aa352c638e2b5","access_level":"public","create_time":"$D2021-08-23T05:32:21.529Z","update_time":"$D2021-08-26T08:24:36.358Z","view_time":null,"first_public_time":"$D2021-09-12T05:30:55.709Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c91d625c69468941","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":"starter_2024"},"version":270,"publish_version":270,"role":null,"authored":false,"authors":[{"type":"individual","id":"1093b9e42c8891e7","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":null}],"members":[{"type":"individual","id":"1093b9e42c8891e7","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualizing Proportions and Relationship","cells":[{"id":0,"value":"md`# Visualizing Proportions and Relationship\n#### *This material was prepared by Bibek KC, Yugyeong Jung*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"vegalite = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md` ## Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"//Gapminder dataset\ngapminder = FileAttachment(\"gapminder.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"//mpg dataset\nmpg=FileAttachment(\"mpg.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## **Pie chart**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"//filters the data including only selected countries and label all others as 'Other countries'\nnewGapminder = gapminder.map(function(d,i){\n let updatedCountry = (d.population < 200000000) ? \"Other countries\": d.country;\n return{\n country: updatedCountry,\n continent: d.continent,\n year: d.year,\n lifeExp: d.lifeExp,\n population: d.population,\n gdpPerCap: d.gdpPerCap\n }\n})\n.filter(d => d.year == 1987 || d.year === 1997 || d.year === 2007)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"//Calculates the sum of population of countries which fall under 'Other countries' in year (1987)\nsum1987 = newGapminder.reduce(function(sum,d){\n let population = ( d.country === \"Other countries\" && d.year === 1987) ? d.population: 0;\n return sum+ population;\n},0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"//Calculates the sum of population of countries which fall under 'Other countries' in year (1997)\nsum1997 = newGapminder.reduce(function(sum,d){\n let population = ( d.country === \"Other countries\" && d.year === 1997) ? d.population: 0;\n return sum+ population;\n},0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"//Calculates the sum of population of countries which fall under 'Other countries' in year (2007)\nsum2007 = newGapminder.reduce(function(sum,d){\n let population = ( d.country === \"Other countries\" && d.year === 2007) ? d.population: 0;\n return sum+ population;\n},0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"//Extracts the dataset with country names other than those of 'Other countries'\nnewData = newGapminder.map(function(d,i){\n if (d.country === \"Other countries\") return null;\n return{\n country: d.country,\n population: d.population,\n year: d.year\n }\n}).filter(d => d != null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"//Adds the corresponding entries of 'Other countries' in each year\nupdatedData =newData.concat({country: \"Other countries\", population: sum1987, year: 1987},{country: \"Other countries\", population: sum1997, year: 1997},{country: \"Other countries\", population: sum2007, year: 2007})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## **Stacked bar plot**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"//Extract rows whose value of 'country' column is 'China' in years 1987, 1997 and 2007\nchina = gapminder.filter(d=> (d.country === \"China\" && (d.year == 1987 || d.year === 1997 || d.year === 2007)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"//Extract rows whose value of 'country' column is 'India' in years 1987, 1997 and 2007\nindia = gapminder.filter(d=> (d.country === \"India\" && (d.year == 1987 || d.year === 1997 || d.year === 2007)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"//Extract rows whose value of 'country' column is 'United States' in years 1987, 1997 and 2007\nus = gapminder.filter(d=> (d.country === \"United States\" && (d.year == 1987 || d.year === 1997 || d.year === 2007)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"//Merge all three dataset in a single dataset called countryData\ncountryData = china.concat(india).concat(us)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## **Grouped bar plot**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## **Scatter plot**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"vegalite(\n {\n \"data\": {\"values\": mpg},\n \"mark\": {\"type\": \"point\", \"filled\": true, \"size\": 100, \"tooltip\": {\"content\": \"data\"}},\n \"width\": 600,\n \"height\": 300,\n \"encoding\": {\n \"x\": {\"field\": \"weight\", \"type\": \"quantitative\", \"scale\": {\"zero\": false}, \"title\": \"Weight→\"}, \n //for quantitative data, setting \"zero\" false in \"scale\", so the generated plot covers most space of the canvas\n \"y\": {\"field\": \"mpg\", \"type\": \"quantitative\", \"scale\": {\"zero\": false}, \"title\": \"mpg→\"},\n \"color\": {\"field\": \"origin\", \"title\": \"Origins\"}, \n }\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## **Line plot**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"vegalite(\n{\n \"data\": {\"values\": mpg},\n \"width\": 500,\n \"height\": 300,\n \"encoding\": {\n \"x\": {\n \"field\": \"model_year\",\n \"title\": \"Model_year→\",\n \"axis\": {\"labelAngle\": 0} //displays the x-axis label values horizontally\n // \"timeUnit\": \"year\" //displays the complete year like 1970,...\n }\n },\n \"layer\": [\n {\n \"mark\": {\"type\": \"errorband\", \"extent\": \"ci\"}, //by default, it is 95%CI\n \"encoding\": {\n \"y\": { \"field\": \"mpg\", \"type\": \"quantitative\", \"title\": \"mpg→\", \"scale\": {\"zero\": false}}\n }\n },\n {\n \"mark\": \"line\", //replacing \"line\" by \"point\" helps to figure out what points are joined to make the line\n \"encoding\": {\n \"y\": { \"aggregate\": \"mean\", \"field\": \"mpg\"} //calculates the mean of mpg values\n }\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`

${next}

${previous}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"html`\n