3e:null 3f:["$","title",null,{"children":"Basic Libraries (Non Plotly) | Nurki Kirshenbaum's Workspace | Observable"}] 45:[{"id":"30cbc587ada34ab32c221bf6109e7ab726ac44ce8c2c4f061257b62beabb493b64c5c3d55044aeb795119e1427f19b8fa01e5d8c369738f4971a399c84f77426","href":"https://static.observableusercontent.com/files/30cbc587ada34ab32c221bf6109e7ab726ac44ce8c2c4f061257b62beabb493b64c5c3d55044aeb795119e1427f19b8fa01e5d8c369738f4971a399c84f77426","name":"classSurvey.csv","type":"text/csv","lastModified":1727158342837.416,"size":5224},{"id":"33c1528a757659d321afd7d77928134bd6897bb59c7f60849da5ccaaa94aa4ac78cb0cc56172d619170a74d983b4c3656c61a240a13c2877a5f8da9542e8bb3c","href":"https://static.observableusercontent.com/files/33c1528a757659d321afd7d77928134bd6897bb59c7f60849da5ccaaa94aa4ac78cb0cc56172d619170a74d983b4c3656c61a240a13c2877a5f8da9542e8bb3c","name":"fileattach@1.png","type":"image/png","lastModified":1727158342837.416,"size":225633}] 43:{"id":"f8a08f00b9b21b79","slug":"basic-libraries-non-plotly","title":"Basic Libraries (Non Plotly)","thumbnail":"7078fe0e5ba3a3ae1fd92f135fcdf57ca4d987e954ffcfdeacde91d030a63535","access_level":"public","create_time":"$D2026-09-17T08:06:55.276Z","update_time":"$D2026-09-22T20:06:06.831Z","view_time":null,"first_public_time":"$D2026-09-22T08:22:05.435Z","has_unpublished_edits":null,"fork":{"id":"01dde2b7e172eda7","slug":null,"title":"Basic Libraries","owner":{"id":"a03ba8d7c36f4ece","login":"nurki-kirshenbaum-ws","name":"Nurki Kirshenbaum's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a03ba8d7c36f4ece","login":"nurki-kirshenbaum-ws","name":"Nurki Kirshenbaum's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5f28bec0774ac6e0cbea5811c547c9b3f3bec2873a41ab68be5e16615ef40f44","tier":"starter_2024","bio":""},"version":453,"publish_version":453,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4cff2d12cf30147","login":"nurki-kirshenbaum","name":"Nurki Kirshenbaum","avatar_url":"https://avatars-next.observableusercontent.com/6cec06e1b4c99cbd0dc4384bbf946c15f1482285f331d6a304e57ca99aff9bb7","tier":null,"bio":""}],"members":[{"type":"team","id":"a03ba8d7c36f4ece","login":"nurki-kirshenbaum-ws","name":"Nurki Kirshenbaum's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5f28bec0774ac6e0cbea5811c547c9b3f3bec2873a41ab68be5e16615ef40f44","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":27,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Basic Libraries (Non Plotly)","cells":[{"id":218,"value":"# Basic Libraries (Non Plotly)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"powers = [\n {name: \"Invisibility\", value: 7},\n {name: \"Flying\", value: 9},\n {name: \"Super strength\", value: 2},\n {name: \"Telekinesis\", value: 12},\n {name: \"Talk to animals\", value: 2}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"## Using PlotlyJS (From Last Time)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"Last time in the other [notebook](https://observablehq.com/@nurki-kirshenbaum-ws/plotly-js-examples) we saw PlotlyJs examples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"import Plotly from \"npm:plotly.js-dist-min\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"For example this bar chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"\n let data = [{\n y: powers.map(item => item.value), // The 'y' property gets the values\n x: powers.map(item => item.name), // The 'x' property gets the labels\n type: 'bar' // We change the type to bar\n }];\n\n\n let layout = {\n height: 400,\n width: 500\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n display (div);\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"## Using ChartJS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"ChartJS is another commonly used charting library. You can read [more about it on their website](https://www.chartjs.org/docs/latest/).\n\nWe start with importing the library.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"import chart from \"npm:chart.js/auto\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"We can now make our pie chart using ChartJS (the reference I used is [here](https://www.chartjs.org/docs/latest/charts/doughnut.html#pie)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"\n// define the data\nconst data = {\n labels: powers.map(item => item.name),\n datasets: [{\n label: 'Choose your super powers',\n data: powers.map(item => item.value),\n }]\n};\n\nconst config = {\n type: 'pie', // we can easily change this to 'bar' to change the chart we draw\n data: data,\n options: {\n responsive: false // when the chart is set to responsive, it will fill the available space\n }\n};\n\nconst canvas = DOM.element('canvas'); // while PlotlyJS needed a 'div', ChartJS uses a 'canvas'\nnew chart(canvas, config)\ndisplay(canvas);\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"Try changing the 'type' in the code from 'pie' to 'bar'. Then try changing it to 'line'. What do you think of the three examples? Which one do you like, what would you change in them?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"# Using Vega-lite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"[Vega-lite](https://vega.github.io/vega-lite/) is a declarative visualization library with tighter connection to the Grammars of graphics. It was introduced in the research paper *Satyanarayan, Arvind, Dominik Moritz, Kanit Wongsuphasawat, and Jeffrey Heer. \"Vega-lite: A grammar of interactive graphics.\" IEEE transactions on visualization and computer graphics 23, no. 1 (2016): 341-350.* available [here](https://idl.cs.washington.edu/files/2017-VegaLite-InfoVis.pdf).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"To include the [embedded version](https://vega.github.io/vega-lite/usage/embed.html) of the [vega lite](https://observablehq.com/@vega/hello-vega-embed) library we will call\n\n`embed = require(\"vega-embed\");`\n\nThis will allow us to render visualizations that are given as a JSON object according to the vega-lite schema. However, there is an [api available for vega lite](https://vega.github.io/vega-lite-api/) that is more Javascript-y and let's you use JS to build the desired JSON object. You can find reference notebooks that will help you work with this api, such as [this one](https://observablehq.com/@observablehq/vega-lite).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"//embed = require(\"vega-embed\");\nimport embed from \"npm:vega-embed\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"powers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"const div1 = html`

`;\nconst bars = embed(div1,{\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v6.json\",\n\n \"data\": {\n \"values\": powers\n },\n\n \"mark\": \"bar\",\n\n \"encoding\": {\n \"x\": {\n \"field\": \"name\",\n \"type\": \"nominal\",\n \"axis\": {\"labelAngle\": 30}\n },\n \"y\": {\n \"field\": \"value\",\n \"type\": \"quantitative\"\n }\n }\n})\ndisplay(div1)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"Note that in this case, with the encoding we also need to specify the **type** of data (i.e. `\"type\": \"nominal\"` or `\"quantitative\"`).\n\nBecause this is the embedded version, we can easily see the **full** JSON object that was created for this chart (remember - all of these libraries use a lot of default values to make it easier to make quick charts and only customize as needed). To do that, click on the circle with an ellipses next to the chart and choose \"View Compiled Vega\". There should be no doubt that libraries save us a lot of hassle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"const div2 = html`

`;\n\n// For completion - here is the pie chart version\nconst pie = embed(div2, {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n \"description\": \"A simple bar chart with embedded data.\",\n \"data\": {\n \"values\": powers\n },\n \"mark\": \"arc\",\n \"encoding\": {\n \"theta\": {\"field\": \"value\", \"type\": \"quantitative\"},\n \"color\": {\"field\": \"name\", \"type\": \"nominal\"}\n }\n })\ndisplay(div2);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"If you remember, we also had an example with two classes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"const class1 = [\n {name: \"Invisibility\", value: 7},\n {name: \"Flying\", value: 9},\n {name: \"Super strength\", value: 2},\n {name: \"Telekinesis\", value: 12},\n {name: \"Talk to animals\", value: 2}\n];\nconst class2 = [\n {name: \"Invisibility\", value: 3},\n {name: \"Flying\", value: 12},\n {name: \"Super strength\", value: 6},\n {name: \"Telekinesis\", value: 15},\n {name: \"Talk to animals\", value: 0}\n];","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"What will happen if we try to 'layer' them in Vega Lite?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"const div3 = html`

`;\n\nconst multi_bars = embed(div3, {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n\n \"layer\": [\n {\n \"data\": {\"values\": class1},\n \"mark\": {\"type\": \"bar\", \"color\": \"red\", \"opacity\": 0.5},\n \"encoding\": {\n \"x\": {\"field\": \"name\", \"type\": \"nominal\", \"axis\": {\"labelAngle\": 30}},\n \"y\": {\"field\": \"value\", \"type\": \"quantitative\"}\n }\n },\n {\n \"data\": {\"values\": class2},\n \"mark\": {\"type\": \"bar\", \"color\": \"gray\", \"opacity\": 0.5},\n \"encoding\": {\n \"x\": {\"field\": \"name\", \"type\": \"nominal\"},\n \"y\": {\"field\": \"value\", \"type\": \"quantitative\"}\n }\n }\n ],\n\n \"config\": {\"view\": {\"width\": 400, \"height\": 300}}\n});\ndisplay(div3);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"When we layer we place the marks on top of each other. This is different from grouping (show multiple traces on the same chart) or faceting (show multiple plots).\n\nLet's look at another version, this time rather than having two arrays for class1 and class2, we will unify them into one dataset with a \"class\" field.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"const unified = [\n ...class1.map(d => ({...d, class: \"Class 1\"})),\n ...class2.map(d => ({...d, class: \"Class 2\"}))\n];\ndisplay(unified)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"Now we can show a chart for class1 and class2 side by side.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"const div4 = html`

`;\n\nconst facets = embed(div4,{\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n\n \"data\": {\"values\": unified},\n\n \"facet\": { // here we create two facets according to the \"class\" field\n \"column\": {\n \"field\": \"class\",\n \"type\": \"nominal\"\n }\n },\n\n \"spec\": {\n \"mark\": \"bar\",\n\n \"encoding\": {\n \"x\": {\n \"field\": \"name\",\n \"type\": \"nominal\",\n \"axis\": {\"labelAngle\": 30}\n },\n \"y\": {\n \"field\": \"value\",\n \"type\": \"quantitative\"\n }\n }\n }\n});\ndisplay(div4);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"And to get the grouped version:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"const div5 = html`

`;\n\nconst grups = embed(div5, {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n\n \"data\": {\"values\": unified},\n\n \"mark\": \"bar\",\n\n \"encoding\": {\n \"x\": {\n \"field\": \"name\",\n \"type\": \"nominal\",\n \"axis\": {\"labelAngle\": 30}\n },\n \"xOffset\": { // here we tell that the grouping is according to the \"class\" field\n \"field\": \"class\",\n \"type\": \"nominal\"\n },\n \"y\": {\n \"field\": \"value\",\n \"type\": \"quantitative\"\n },\n \"color\": {\n \"field\": \"class\",\n \"type\": \"nominal\"\n }\n }\n});\ndisplay(div5);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"# ObservableHQ Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"Observable have created their own library for simple charts they call Plot (which is not a very good name when you try to search things for it). You can read more about it [here](https://observablehq.github.io/plot/).\n\nIn Plot [faceting](https://observablehq.github.io/plot/features/facets) is done with \"fx\" and \"fy\", which is yet another naming scheme.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"Plot.plot({\n fx: {\n padding: 0.1\n },\n marks: [\n Plot.barY(unified, {\n x: \"name\",\n y: \"value\",\n fx: \"class\",\n fill: \"class\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"Plot.plot({\n fx: {\n padding: 0.1\n },\n marks: [\n Plot.barY(unified, {\n x: \"class\", // note that I flipped the fields I assigned to \"x\" and \"fx\"\n y: \"value\",\n fx: \"name\",\n fill: \"class\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"The biggest take-away from this notebook is that all libraries use similar principles but different rules, so you need to get familiar with the rules of the library you use. Choose one based on the aesthetics you like and the variety of charts available (so you can be sure it plots everything you need.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"# Practice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"This time we need to actually practice.\n\nBring in our class’ survey data from the previous notebook.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"survey = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/Survey%202026%20.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"Use Plotly.js and ChartJS to create a simple scatter plot with x-axis for Age and y-axis for height.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"If we want to show a bar or pie chart of the supermarkets near our students, we would need to count how many chose each option. Process the data for that purpose and create the chart. How should you format the data if you want to easily pass it to a library?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"You can use our map, filter, reduce function or look at d3 [group](https://d3js.org/d3-array/group) for `d3.group()` and `d3.rollup()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"Choose any library to create the supermarket chart.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"Use the ranked questions (with values from 1 to 5) as multiple traces for a stacked bar chart. The traces are \"Draw\", \"Guitar\", \"Math\", \"Debug\", and for each one you will want to count the frequency of 1's, 2's etc.\n\nUse any library you want to create the visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W45","stdlib":"2"}} 44:"$43:body"