2d:null 2e:["$","title",null,{"children":"Visualizing Amounts and Distribution | ic-dataviz | Observable"}] 33:T499,vegalite( { "data": {"values": data}, //passes on the diamond dataset we previously defined "mark": { "type": "bar", "opacity": 0.6, "strokeWidth": 1.5}, //indicates we are drawing a bar-chart, with overall opacity of bar color as 0.6 and the strokeWidth or marker_line width is 1.5 "height": 300, "width": 400, "title": "The number of diamonds for cut quality", "encoding": { "x": { "field": "cut", "title": "Cut→", "type": "ordinal", "axis": { "labelAngle": 0}, //makes the labels' text horizontal //"sort":"y" //sorts the plot in ascending order of y; put "-y" for the descending order }, "y": { "aggregate": "count", "field": "cut", "type": "quantitative", "title": "Count of Diamonds→", }, //obtains the count of diamonds at each cut quality "color": {"value": "rgb(158,158,225)"}, //sets the color of bars "stroke": {"value": "rgb(8,48,107)"}, //sets the stroke color of bars }, }) //Note that: The vegalite has many defaults so in the x,y encoding section, code runs even if you don't write "type" of x and y fields but it is a good practice to write it.34:Ta11,importedColor = ["#440154","#440256","#450457","#450559","#46075a","#46085c","#460a5d","#460b5e","#470d60","#470e61","#471063","#471164","#471365","#481467","#481668","#481769","#48186a","#481a6c","#481b6d","#481c6e","#481d6f","#481f70","#482071","#482173","#482374","#482475","#482576","#482677","#482878","#482979","#472a7a","#472c7a","#472d7b","#472e7c","#472f7d","#46307e","#46327e","#46337f","#463480","#453581","#453781","#453882","#443983","#443a83","#443b84","#433d84","#433e85","#423f85","#424086","#424186","#414287","#414487","#404588","#404688","#3f4788","#3f4889","#3e4989","#3e4a89","#3e4c8a","#3d4d8a","#3d4e8a","#3c4f8a","#3c508b","#3b518b","#3b528b","#3a538b","#3a548c","#39558c","#39568c","#38588c","#38598c","#375a8c","#375b8d","#365c8d","#365d8d","#355e8d","#355f8d","#34608d","#34618d","#33628d","#33638d","#32648e","#32658e","#31668e","#31678e","#31688e","#30698e","#306a8e","#2f6b8e","#2f6c8e","#2e6d8e","#2e6e8e","#2e6f8e","#2d708e","#2d718e","#2c718e","#2c728e","#2c738e","#2b748e","#2b758e","#2a768e","#2a778e","#2a788e","#29798e","#297a8e","#297b8e","#287c8e","#287d8e","#277e8e","#277f8e","#27808e","#26818e","#26828e","#26828e","#25838e","#25848e","#25858e","#24868e","#24878e","#23888e","#23898e","#238a8d","#228b8d","#228c8d","#228d8d","#218e8d","#218f8d","#21908d","#21918c","#20928c","#20928c","#20938c","#1f948c","#1f958b","#1f968b","#1f978b","#1f988b","#1f998a","#1f9a8a","#1e9b8a","#1e9c89","#1e9d89","#1f9e89","#1f9f88","#1fa088","#1fa188","#1fa187","#1fa287","#20a386","#20a486","#21a585","#21a685","#22a785","#22a884","#23a983","#24aa83","#25ab82","#25ac82","#26ad81","#27ad81","#28ae80","#29af7f","#2ab07f","#2cb17e","#2db27d","#2eb37c","#2fb47c","#31b57b","#32b67a","#34b679","#35b779","#37b878","#38b977","#3aba76","#3bbb75","#3dbc74","#3fbc73","#40bd72","#42be71","#44bf70","#46c06f","#48c16e","#4ac16d","#4cc26c","#4ec36b","#50c46a","#52c569","#54c568","#56c667","#58c765","#5ac864","#5cc863","#5ec962","#60ca60","#63cb5f","#65cb5e","#67cc5c","#69cd5b","#6ccd5a","#6ece58","#70cf57","#73d056","#75d054","#77d153","#7ad151","#7cd250","#7fd34e","#81d34d","#84d44b","#86d549","#89d548","#8bd646","#8ed645","#90d743","#93d741","#95d840","#98d83e","#9bd93c","#9dd93b","#a0da39","#a2da37","#a5db36","#a8db34","#aadc32","#addc30","#b0dd2f","#b2dd2d","#b5de2b","#b8de29","#bade28","#bddf26","#c0df25","#c2df23","#c5e021","#c8e020","#cae11f","#cde11d","#d0e11c","#d2e21b","#d5e21a","#d8e219","#dae319","#dde318","#dfe318","#e2e418","#e5e419","#e7e419","#eae51a","#ece51b","#efe51c","#f1e51d","#f4e61e","#f6e620","#f8e621","#fbe723","#fde725"]35:T450,vegalite({ "data": {"values": flights}, "mark": "rect", // represents an arbitrary rectangle "encoding": { "y": {"field": "month", "type": "ordinal", "sort": null, "title": "Month→"}, //sort: null helps to arrange the data in the original order (no-sort) "x": {"field": "year", "type": "ordinal", "title": "Year→"}, "color": { "field": "passengers", "type": "quantitative", "scale": { "type": "quantitative", "range": importedColor, /*reverse: true*/ }, //Putting "reverse: true" reverses the order of colors in the continous color label "legend": {"type": "gradient"} //"gradient" is used for continuous data and "symbol" is used for representing discrete ones } }, "config": { "axis": {"grid": true, "tickBand": "extent"} //setting grid true gives a fine white border of small rectangles, set grid to false to find difference //tickBand as extent indicates the ticks and grid lines are at the band extents to indicate intervals. Set tickBand: "center" to observe the difference. } })36:T562,vegalite( { data: { values: data}, width: 500, "transform": [ { "quantile": "carat", //performs quantile estimation on "carat" field // "quantile": "price", //substituting "carat" by "price" gives the q-q plot of price of diamonds. Try it! "as": ["prob","value"] //["probability", "quantile value"] contains the output field names }, { "calculate": "quantileNormal(datum.prob)", //estimates normal quantiles and store it to "norm" "as": "norm" } ], "layer": [ //draws both qq-plot and regression line on the same plot { "mark": {type: "circle", size: 80}, "encoding": { "x": {"field": "norm", "type": "quantitative", "title": "Theoretical Quantiles→"}, "y": { "field": "value", "type": "quantitative", "title": "Ordered Values→"} } }, { mark: {type: "line", color: "red"}, transform: [ { "regression" : "value", //takes dependent variable to predict "on": "norm", //takes independent variable to use a predictor //No need to write as:[] because the default values is the original field names of the x and y values i.e "norm" and "value" } ], "encoding": { "x": {"field": "norm", "type": "quantitative"}, "y": { "field": "value", "type": "quantitative"} } }, ] })37:T609,vegalite( { data: { values: data }, "mark": { "type": "line", "fillOpacity": 0.5, "strokeOpacity": 0.8, "strokeWidth":1, }, "width": 700, "height": 40, //we can alter the height to keep the desired amount of intersection between graphs "transform": [ { "density": "carat", "groupby": ["color"], "extent": [0, 4] }, //{"filter" : {"field": "color", "oneOf": ['D', 'E', 'F', 'G', 'H', 'I', 'J']}} //Choose any color you want to display ], encoding: { "x": { "field": "value", "type": "quantitative", "axis": {"grid": false, "title": "Carat of diamonds→"} }, "y": { "field": "density", "type": "quantitative", "scale": {"range": [40,-80]}, //scale({range: [step, -overlap * step]}) "axis": false }, "row": { "field": "color", "type": "nominal", "title": "Colors→", "spacing": 0, //reduces the space between curves "header": { //Puts the color-labels on y-axis in appropriate positions "labelAngle": 0, "labelAlign":"left", "labelPadding":0 }, "axis": false, "sort": { "field": "color", "op": "max", "order": "ascending" } }, "fill": { "field": "color", "type": "nominal", "legend": null }, "stroke": {"field": "color"} }, "bounds": "flush", //uses facet cell height for layout, not the full mark bounds "view": { "stroke": "transparent" } })38:[{"id":"e70c788491fcdd11616f56d2d36678ad4b563f0dc174d9dc8fd52e3bf3bd699b85a4e2577893556da30a8bb4d0781cdd8bd1458e75d29cc6318ccd6c2e676b4b","href":"https://static.observableusercontent.com/files/e70c788491fcdd11616f56d2d36678ad4b563f0dc174d9dc8fd52e3bf3bd699b85a4e2577893556da30a8bb4d0781cdd8bd1458e75d29cc6318ccd6c2e676b4b","name":"diamonds-2.csv","type":"text/csv","lastModified":1629729297329.339,"size":3192560}] 31:{"id":"7e6bcd29afaef502","slug":"visualizing-amounts-and-distribution","title":"Visualizing Amounts and Distribution","thumbnail":"1ccf588595f44674f8f1798e8fb426e6c6f0c8417666dd6d860e297c107680b8","access_level":"public","create_time":"$D2021-08-23T14:34:57.329Z","update_time":"$D2021-08-26T08:01:55.357Z","view_time":null,"first_public_time":"$D2021-09-12T05:30:42.163Z","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":263,"publish_version":263,"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 Amounts and Distribution","cells":[{"id":0,"value":"md`# Visualizing Amounts and Distribution\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":43,"value":"vegalite = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md `## Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"//Diamonds dataset\ndata = FileAttachment(\"diamonds-2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"//Flights dataset\nflights = d3.csv(\"https://raw.githubusercontent.com/mwaskom/seaborn-data/master/flights.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Bar Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`> **For drawing the horizontal bar-plots, simply exchange *'x'* and *'y'* in the above code.**
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Grouped Bar Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`Displays the distribution of prices with respect to color for each cut quality using the diamonds dataset. We would like to look at the variation among cut quality group (Fair, Good, Ideal, Premium, Very Good).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"vegalite({\n \"data\": {values: data},\n \"mark\": \"bar\",\n \"height\": 300,\n \"encoding\": {\n \"column\": {\"field\": \"color\", \"type\": \"nominal\", \"spacing\": 10, \"title\": false}, \n //seperates each color fieds columnwise\n \"y\": {\"aggregate\": \"count\", \"field\": \"cut\", \"title\": \"Cut of diamonds→\", type: \"quantitative\"},\n //obtains the count of the cut of diamonds\n \"x\": {\"field\": \"cut\", \"axis\": false, \"sort\": \"-y\"}, \n //Setting [\"axis\": false] doesn't display any axis elements on x-axis\n \"color\": {\"field\": \"cut\",\n \"scale\": {\"range\": [\"rgb(203, 203, 227)\",\"rgb(160, 182, 215)\",\"rgb(114, 162, 202)\",\"rgb(65, 137, 186)\",\"rgb(35, 89, 135)\"]},\n \"legend\": {\"orient\": \"right\", \"title\": \"Cut Quality\"} //Put the legend in the right position\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Heatmap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`> To use any colorset of your choice, have a look at [color-schemes](https://observablehq.com/@d3/color-schemes) You just need to copy (which copies the array) and use that array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Histogram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`Represents the distribution of diamond along carat on the x-axis:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"vegalite(\n{\n \"data\": {\"values\": data},\n \"mark\": \n {\"type\": \"bar\", \"width\": 18}, \n //here width means the width of the bars. Try changing its value to observe\n \"encoding\": {\n \"x\": {\"bin\": true, \"field\": \"carat\", \"title\": \"Carat→\"}, \n //When setting bin as true, default binning parameters are applied on carat\n //Try [\"bin\": 50] to observe the difference\n \"y\": {\"aggregate\": \"count\", \"field\": \"carat\", \"title\": \"Count of Diamonds→\"}, \n //counts the number of diamonds that falls under each binning group of carat\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## Density Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`> For plotting density plot, density transform is used. It performs one-dimensional kernel density estimation over an input data stream and generates a new data stream of samples of the estimated densities.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`Displays the density plot of carets according to color (E, I, J).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"vegalite(\n {\n \"width\": 400,\n \"data\": { \"values\": data },\n \"mark\": {\"type\": \"line\", \"fillOpacity\": 0.5}, \n //or can use (\"type\": \"area\") too. Try to see what happens! \n \"transform\": [\n {\n \"density\": \"carat\", \n \"groupby\": [\"color\"], // means groups the density plots by field \"color\"\n \"extent\": [0, 5],\n //(\"extent\": [min, max]) array indicates the range of domain values to display (extent is required to be written in most cases)\n \"as\": [\"value\", \"density\"] //[The output fields for the sample value, associated probability] \n },\n {\"filter\" : {\"field\": \"color\", \"oneOf\": ['E', 'I', 'J']}} //only chooses 3 mentioned colors to display\n ],\n encoding: {\n \"x\": {\"field\": \"value\", \"type\": \"quantitative\", \"title\": \"Value→\"},\n \"y\": {\"field\": \"density\", \"type\": \"quantitative\", \"title\": \"Density→\"},\n \"fill\": {\"field\": \"color\"},\n \"stroke\": {\"field\": \"color\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`## Q-Q Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`Represents the Q-Q Plot of the carat of diamonds:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## Ridgeline Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`Displays the density of carat of diamonds at each colors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`

${next}

${previous}

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