3e:null 3f:["$","title",null,{"children":"Exploring data visualization with D3 | ClaraPT's Workspace | Observable"}] 45:[{"id":"c0199d267f37005c43598013a3ae065e48fbea13af6c8401d24b6498008e2b9eef269f4b13107cb8556a23951247b1d144e0609be5155464c52833203911db0b","href":"https://static.observableusercontent.com/files/c0199d267f37005c43598013a3ae065e48fbea13af6c8401d24b6498008e2b9eef269f4b13107cb8556a23951247b1d144e0609be5155464c52833203911db0b","name":"aggregateOccurrences2014.csv","type":"text/csv","lastModified":1705622444491.883,"size":49339493}] 43:{"id":"3f2d56330a651c55","slug":null,"title":"Exploring data visualization with D3","thumbnail":"ed9695767fa99b07cef411ea45cc6ab5c523bf690f90d0c70fd80736801c9a9f","access_level":"public","create_time":"$D2024-01-18T23:37:01.680Z","update_time":"$D2024-01-31T00:17:47.865Z","view_time":null,"first_public_time":"$D2024-01-19T01:00:32.041Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","bio":"","following":false},"version":277,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"role":"editor"},{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"c3092cc076c029d0","slug":"ecoassets-visualisations","title":"EcoAssets visualisations","owner":{"id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace"}},"type":"notebook","body":{"titling":"auto","title":"Exploring data visualization with D3","cells":[{"id":0,"value":"# Exploring data visualization with D3\n\nUsing a subset of the EcoAssets Biodiversity aggregate dataset: year 2014.\n\nFollowing the tutorial from this notebook: https://observablehq.com/@observablehq/workshop-intro-to-data-vis-plot-d3?collection=@observablehq/intro-data-vis-workshop ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"aggregateoccurrences2014 = await FileAttachment(\"aggregateOccurrences2014.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"aggregateoccurrences2014","database":"$undefined"},{"id":8,"value":"data = FileAttachment(\"aggregateOccurrences2014.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"data.map(d => d.occurrenceCount)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3.max(data, d => d.occurrenceCount)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3.extent(data, d => d.occurrenceCount)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof index = Inputs.range([0, data.length - 1], {label: \"Amount\", step: 1, value: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"data[index]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"import {SummaryTable} from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"SummaryTable(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"## Explore the dataset with plot\n\n- Marks and channels\n- Scales\n- Transforms\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"sample = data.filter(d => d.stateTerritory == \"New South Wales\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"Plot.dot(sample, {x: \"ibraRegion\", y: \"occurrenceCount\", fill: \"occurrenceCount\", stroke: \"gray\"}).plot({color : {range:[\"red\", \"blue\"]}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Plot.plot({\n marks: [\n Plot.dot(sample, {x: \"ibraRegion\", y: \"occurrenceCount\", fill: \"blue\"}),\n Plot.dot(sample, {x: \"ibraRegion\", y: \"capadStatus\", stroke: \"orange\"}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"## D3 Charts\n\n- Treemaps\n- Bubble Chart\n- Bar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"### Group vs Rollup in d3\n\n**Group** : group values by key. Returns a map from key to the corresponding array of values from the input. You can then query the map for a particular group, or iterate over groups to construct a table.\nUse groups instead of group to get a nested array instead of a map\n\n**Rollup** : reduce each group by computing a corresponding summary value eg count, sum. Returns a map from key to reduced value. Need to include an added reducer value when called.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"d3.group(data, d => d.stateTerritory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"d3.group(data, d => d.stateTerritory).get(\"New South Wales\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"d3.group(data, d => d.stateTerritory, d => d.capadStatus).get(\"Northern Territory\").get(\"IPA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"d3.rollup(data, v => v.length, d => d.stateTerritory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"d3.rollup(data, v => d3.sum(v, val => val.occurrenceCount), d => d.stateTerritory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"import {Treemap} from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"treemap = Treemap(d3.rollup(data, v => v.length, d => d.stateTerritory),\n {value: d => d[1],\n label: d => d[0], \n fillOpacity: 1\n }\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import {BubbleChart} from \"@d3/bubble-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"bubbles = BubbleChart(d3.rollup(data, v => v.length, d => d.stateTerritory),\n {value: d => d[1],\n label: d => d[0], \n fillOpacity: 0.5,\n // group: v => v.length,\n // fill : d => d3.scaleOrdinal()\n }\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"