31:[{"id":"d0995b3c60f175315f196f3b40649c127e2560f21256c93f370795972117a9097901f7d10ac3fb9b3f0d6eff4ee70d2c30f863deb15ff2f1f2225a8140f279ee","href":"https://static.observableusercontent.com/files/d0995b3c60f175315f196f3b40649c127e2560f21256c93f370795972117a9097901f7d10ac3fb9b3f0d6eff4ee70d2c30f863deb15ff2f1f2225a8140f279ee","name":"bandcamp-oneday.csv","type":"text/csv","lastModified":1649792760962.255,"size":2878527}] 2f:{"title":"Completed Exercises","cells":[{"id":0,"value":"# Completed Exercises\nThe completed code for each exercise in the [Intro to Web Data Visualization](https://observablehq.com/@observablehq/workshop-intro-to-data-vis-plot-d3?collection=@observablehq/intro-data-vis-workshop).","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"## [Data Essentials](https://observablehq.com/@observablehq/workshop-itdvpd-data-essentials?collection=@observablehq/intro-data-vis-workshop)","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"data = FileAttachment(\"bandcamp-oneday.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof index = Inputs.range([0, data.length-1], { step: 1, value: 0, label: \"index\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"data[index]","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"import {SummaryTable} from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"SummaryTable(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"---\n## [Visualization Essentials](https://observablehq.com/@observablehq/workshop-itdvpd-visualization-essentials?collection=@observablehq/intro-data-vis-workshop)","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"sample = data.slice(0,100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"Plot.dot(sample, { x: \"utc_timestamp\", y: \"amount_paid\" }).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"Plot.plot({\n marks: [\n Plot.dot(sample, {x: \"utc_timestamp\", y: \"amount_paid\", fill: \"blue\"}),\n Plot.dot(sample, {x: \"utc_timestamp\", y: \"item_price\", stroke: \"orange\"}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"Plot.plot({\n marks: [\n Plot.dot(sample, {x: \"utc_timestamp\", y: \"item_price\", stroke: \"orange\"}),\n Plot.arrow(sample, { x1: \"utc_timestamp\", y1: \"item_price\", x2: \"utc_timestamp\", y2: \"amount_paid\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"Plot.dot(sample, { \n x: \"utc_timestamp\", \n y: d => d.amount_paid - d.item_price, \n}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"Plot.dot(sample, { \n x: \"utc_timestamp\", \n y: d => d.amount_paid - d.item_price, \n fill: d => d.amount_paid - d.item_price,\n stroke: \"gray\"\n}).plot({ \n color: { scheme: \"greens\" }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"Plot.dot(sample, { \n x: \"utc_timestamp\", \n y: d => d.amount_paid - d.item_price, \n stroke: d => d.amount_paid - d.item_price > 0 \n}).plot({ \n color: { range: [\"orange\", \"steelblue\"] }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"Plot.barX(data, Plot.groupY({x: \"mean\"}, {\n x: \"amount_paid\",\n y: \"type\",\n}))\n.plot({ marginLeft: 100 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"Plot.barX(data, Plot.groupY({x: \"mean\"}, {\n x: \"amount_paid\",\n y: \"type\",\n sort: { y: \"x\", reverse: true, limit: 3 }\n}))\n.plot({ marginLeft: 100 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"Plot.rectY(data, Plot.binX({y: \"count\"}, {\n x: d => d.amount_paid - d.item_price,\n thresholds: 40\n})).plot({ grid: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"Plot.plot({\n marks: [\n Plot.rectY(data, Plot.binX({y: \"sum\"}, { x: \"utc_timestamp\", y: \"amount_paid\", fill: \"type\", thresholds: d3.utcHour }))\n ],\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"---\n## [Dynamic Visualizations](https://observablehq.com/@observablehq/workshop-itdvpd-dynamic-visualizations?collection=@observablehq/intro-data-vis-workshop)","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"viewof groupby = Inputs.select([\"type\", \"country\"], {label: \"group by\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"viewof aggregate = Inputs.radio([\"mean\", \"sum\"], {label: \"aggregate\", value: \"mean\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"// let's update this code to change the group by and the aggregation\nPlot.barX(data, Plot.groupY({x: aggregate}, {\n x: \"amount_paid\",\n y: groupby,\n sort: { y: \"x\", reverse: true, limit: 10 }\n}))\n.plot({ \n caption: `${aggregate} amount paid by ${groupby}`,\n x: { label: `${aggregate} amount_paid`},\n marginLeft: 100 \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"data.map(d => d.country)","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"countries = new Set(data.map(d => d.country))","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof country = Inputs.select(countries, {label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"// let's update this code to change the group by and the aggregation\nPlot.barX(data.filter(d => d.country == country), Plot.groupY({x: \"sum\"}, {\n x: \"amount_paid\",\n y: \"type\",\n sort: { y: \"x\", reverse: true, limit: 10 }\n}))\n.plot({ \n marginLeft: 100 \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"// lets update this code to color dots differently above and below a minimum amount paid\nPlot.plot({\n marks: [\n Plot.dot(data, { \n x: \"utc_timestamp\", \n y: \"amount_paid\", \n fill: d => d.amount_paid > range,\n r: d => d.amount_paid > range,\n fillOpacity: d => d.amount_paid > range,\n }),\n Plot.ruleY([range], { stroke: \"orange\" })\n ],\n y: { type: \"log\" },\n r: { range: [ 2, 3 ] },\n opacity: { range: [0.25, .7 ] },\n color: { range: [ \"orange\", \"steelblue\"] }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof search = Inputs.search(data, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"Inputs.table(search)","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"chart = Plot.plot({\n marks: [\n Plot.rectY(search, Plot.binX({y: \"sum\"}, { x: \"utc_timestamp\", y: \"amount_paid\", fill: \"type\", thresholds: d3.utcHour }))\n ],\n marginLeft: 100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"chart.scale(\"color\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"chart.scale(\"x\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"---\n## [D3 Charts](https://observablehq.com/@observablehq/workshop-itdvpd-d3-charts?collection=@observablehq/intro-data-vis-workshop)\n","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"import { Treemap } from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"Treemap(d3.rollup(data, v => v.length, d => d.country), {\n value: d => d[1],\n label: d => d[0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"rolled = d3.rollup(data, v => {\n return {\n count: v.length,\n total_paid: d3.sum(v, o => o.amount_paid),\n type: v[0].type\n }},\n d => d.type)","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"treemap = Treemap(rolled, {\n value: d => d[1].count,\n group: d => d[1].type,\n label: d => d[1].type,\n title: d => `${d[1].type} ${d[1].count}`,\n fillOpacity: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"Plot.legend({\n color: {\n domain: treemap.scales.color.domain(),\n range: treemap.scales.color.range()\n },\n legend: \"swatches\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"import { BubbleChart } from \"@d3/bubble-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"BubbleChart(rolled, {\n value: d => d[1].count,\n group: d => d[1].type,\n label: d => d[1].type,\n title: d => `${d[1].type} ${d[1].count}`,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"import { BarChart } from \"@d3/bar-chart-transitions\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"bardata = Array.from(rolled.values())","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"chart2 = BarChart(bardata, {\n x: d => d.type,\n y: d => d.count,\n xDomain: typelist,\n width: 600,\n height: 400,\n color: \"steelblue\",\n duration: 750 // slow transition for demonstration\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof country2 = Inputs.select(new Set(data.map(d => d.country)), { label: \"Select country:\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"bycountry = d3.rollup(data.filter(d => d.country == country2), \n v => {\n return {\n count: v.length,\n type: v[0].type\n }},\n d => d.type\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"chart2.update(Array.from(bycountry.values()), { xDomain: typelist })","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"// we will end up wanting to keep the order of the x domain the same\ntypelist = [\"bundle\", \"merch\", \"track\", \"album\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"---\n## [D3 Essentials](https://observablehq.com/@observablehq/workshop-itdvpd-d3-essentials?collection=@observablehq/intro-data-vis-workshop)\n","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":176,"value":"import { Scatterplot, AnimatedScatterplot, BrushScatterplot} from \"@observablehq/workshop-itdvpd-d3-essentials\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"Scatterplot(data.filter(d => d.country == \"Netherlands\"), {\n x: d => d.utc_timestamp,\n y: d => d.amount_paid,\n xType: d3.scaleTime\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"chart3 = AnimatedScatterplot(data.filter(d => d.country == \"Netherlands\"), {\n x: d => d.utc_timestamp,\n y: d => d.amount_paid,\n xType: d3.scaleTime\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"viewof country3 = Inputs.select(new Set(data.map(d => d.country)), { label: \"select a country\", value: \"Netherlands\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"chart3.update(data.filter(d => d.country == country3))","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"viewof brushed = BrushScatterplot(data.filter(d => d.country == \"Netherlands\"), {\n x: d => d.utc_timestamp,\n y: d => d.amount_paid,\n xType: d3.scaleTime\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"Inputs.table(brushed)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}