2d:null 2e:["$","title",null,{"children":"Creating Charts with D3 | HDBW Dataviz | Observable"}] 33:[{"id":"b0436004e5670bc668845a848857e5f32310520a2ebc2c667e72e7198571bde46fe043be4b9ba4ad445590e79bad6f9a45080fa85e0ea158bf486d242a16c2e5","href":"https://static.observableusercontent.com/files/b0436004e5670bc668845a848857e5f32310520a2ebc2c667e72e7198571bde46fe043be4b9ba4ad445590e79bad6f9a45080fa85e0ea158bf486d242a16c2e5","name":"multiline2.png","type":"image/png","lastModified":1639679396040.786,"size":40239},{"id":"9c421434fe766a4acd2a6df9b1860f4164bc0eeea2cd90ac864457be4ce53281957a8c9056ac2167fb62c3fc01b0ca593125c5dc11c69200287f1eb1c1952111","href":"https://static.observableusercontent.com/files/9c421434fe766a4acd2a6df9b1860f4164bc0eeea2cd90ac864457be4ce53281957a8c9056ac2167fb62c3fc01b0ca593125c5dc11c69200287f1eb1c1952111","name":"rat-burrough-heatmap-1.png","type":"image/png","lastModified":1639679396040.786,"size":16855},{"id":"377cdf4d4f8c856070f0df62c9b8df8bb49d1be48e67cc483f1288e114090450de1989937f2ba4bb8005a487fdac6e8937f8b160385a8e29f2ed41cc0aa26673","href":"https://static.observableusercontent.com/files/377cdf4d4f8c856070f0df62c9b8df8bb49d1be48e67cc483f1288e114090450de1989937f2ba4bb8005a487fdac6e8937f8b160385a8e29f2ed41cc0aa26673","name":"Some Sample - Superstore Sales (Excel) (2).xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1639679396040.786,"size":1181390}] 31:{"id":"3c5550b09a18df57","slug":"creating-charts-with-d3","title":"Creating Charts with D3","thumbnail":"f505dc47f2f6766721a39722f5b2bb68f5050b8ed0c0250a43f6c515340546e9","access_level":"public","create_time":"$D2021-12-16T18:29:56.040Z","update_time":"$D2021-12-16T18:29:56.040Z","view_time":null,"first_public_time":"$D2022-01-04T23:17:33.999Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a46b119f62bc7330","login":"hdbw-dataviz","name":"HDBW Dataviz","avatar_url":null,"tier":"pro_2024"},"version":607,"publish_version":607,"role":null,"authored":false,"authors":[{"type":"individual","id":"07291767133ad90f","login":"utkucakir1","name":"","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Creating Charts with D3","cells":[{"id":0,"value":"# Creating Charts with D3\n\nIn a [previous exercise](https://observablehq.com/d/9d61ea934029d5c1) you have translated domain questions into data questions and wrote the code to generate the information needed to answer the questions (data transformations).\n\nNow, we will use this preparation work to answer those domain questions using visualizations.\n\nHelpful Resources on D3: https://observablehq.com/@hdbw-dataviz/js-observable-d3?collection=@hdbw-dataviz/helpful-resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"assignment_instructions(\"From Questions and Data to Charts -\", true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"## Dataset\n\nThe dataset used for this exercise is the Superstore Orders data set.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"workbook = FileAttachment(\n \"Some Sample - Superstore Sales (Excel) (2).xlsx\"\n).xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = workbook.sheet(\"Orders\", { headers: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"selectedRows = Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"### 1. Dataset Analysis\n\n* **data item identifier**: Order Id and Product Name (each order is uniquely identified via the order id and has multiple line items)\n* **items**: line items of orders at the superstore (each row represents one line item of an order)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### 2. Attributes Analysis\n\n* **type**: nominal, ordinal, quantitative\n* **semantics**: temporal, spatial\n* **cardinality/range**: unique values / min-max\n* **for quantitative attributes**: which aggregation method is used (sum, avg, ...)?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`#### Attribute: Order Priority\n\n* type: ordinal (Not Specified < Low < Medium < High < Critical)\n* semantics: -\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"uniqueValues = new Set(data.map((row) => row[\"Order Priority\"]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"cardinality = uniqueValues.size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`#### Attribute: Order Date\n\n* type: quantitative\n* semantics: temporal\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"rangeOfValues = d3.extent(data.map((row) => row[\"Order Date\"]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"## Tasks:\n\nFor each domain question below you will see the concrete data question, the attribute analysis and needed data transformations to answer the question.
**Your task:** create a chart that visualizes the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`### Q1: How does the profit vary across the country?\n\nTranslate the domain question into a data question. To do that, ask yourself the following: What do you mean by across the country? What do you mean by vary?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`\n**Data Question: **\nWhat is the sum of all profits for each state?\n\n**Attribute Analysis:**\n* state\n * type nominal\n * semantics: geographic\n * *${new Set(data.map((d) => d.State)).size}* unique states\n\n* profit\n * type quantitative\n * semantics: -\n * range: *[${d3\n .extent(stateProfits, ([state, profit]) => profit)\n .join(\", \")}]*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`**Data**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"stateProfits = d3.rollup(\n data,\n (group) => d3.sum(group, (d) => d.Profit),\n (d) => d.State\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"stateProfitsSorted = [...stateProfits.entries()]\n .map((d) => ({ State: d[0], Profit: d[1] }))\n .sort((a, z) => z.Profit - a.Profit);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"**Potential Visualization:** \n\n1x Nominal + 1x Quantitative => Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"// TODO: make a horizontal bar chart that shows the profit by state","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"### Q2: How do we commonly ship to different types of customers?\n\nTranslate the domain question into a data question. To do that, ask yourself the following: What do you mean by common? What do you mean by type of customer? And what do you mean by \"how we ship\"?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`**Data question:** How often do we use each ship mode for different customer segments?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`**Attributes:**\n* Ship Mode\n * type nominal\n * semantics: -\n * *${new Set(data.map((d) => d[\"Ship Mode\"])).size}* unique ship modes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"uniqueShipModes = new Set(data.map((d) => d[\"Ship Mode\"]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`\n* Customer Segments\n * type nominal\n * semantics: -\n * *${\n new Set(data.map((d) => d[\"Customer Segment\"])).size\n }* unique customer segments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"uniqueCustomerSegments = new Set(data.map((d) => d[\"Customer Segment\"]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`**Data**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"ordersByShipModeAndCustomerSeg = d3.rollup(\n data,\n (group) => group.length,\n (d) => d[\"Customer Segment\"],\n (d) => d[\"Ship Mode\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"**Potential Visualization:** \n\n2x Nominal + 1x Quantitative => Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"// TODO: make a heatmap that shows Customer Segment on the y axis and Ship Mode on the x axis. Each cell is colored according to the number of orders","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`### Q3: How does the monthly revenue develop for different customer segments?\n\nTranslate the domain question into a data question. To do that, ask yourself the following: What do you mean by monthly revenue? What do you mean by develop?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`**Data question:** For each month, what is the sum of sales made in each customer segment on orders with an order date in that month?\n\n**Attributes:**\n* Order Month\n * type: ordinal/quantitative\n * semantics: temporal\n * range: *[${d3.extent(dataWithMonths, (d) => d[\"Order Month\"]).join(\", \")}]*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"dataWithMonths = data.map((d) => ({\n ...d, // take all properties of d (spread operator)\n \"Order Month\": new Date(\n d[\"Order Date\"].getFullYear(),\n d[\"Order Date\"].getMonth()\n ) // rounding the order date to the month\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"rangeOfMonths = d3.extent(dataWithMonths, (d) => d[\"Order Month\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`\n* Customer Segment\n * type nominal\n * semantics: -\n * *${uniqueCustomerSegments.size}* unique customer segments\n* Sales\n * type quantitative\n * semantics: -\n * range: *[${rangeOfSales.join(\", \")}]*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"rangeOfSales = d3.extent(monthlySalesByCustomerSegment, (d) => d.sales)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`**Data**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"monthlySalesByCustomerSegment = d3\n .flatRollup(\n dataWithMonths,\n (group) => d3.sum(group, (d) => d.Sales),\n (d) => d[\"Order Month\"],\n (d) => d[\"Customer Segment\"]\n )\n .map((d) => ({\n month: d[0],\n customerSegment: d[1],\n sales: d[2]\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"**Potential Visualization:**\n\n1x Temporal + 1x Quantitative + 1x Nominal => Multi-Line Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"// TODO: make a multi-line chart that shows one line per Customer Segment that shows the sales (y) development over time (x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`-----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"-------\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"import { assignment_instructions } from \"e1180caac2b6fce3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"