2f:null 30:["$","title",null,{"children":"Let's create custom made and interactive visualizations using D3 | John Alexis Guerra Gómez | Observable"}] 35:Ta93, md` |Related resources | | -- | -- | | Introduction to D3 in Observable | | | From Marks and Channels to D3 | | | D3 v6 Sections Explained | | | D3 Data Binding | | | D3 Step by Step Histogram | | | D3 Faceting | | | D3 Transitions and Animations | | | Networks with D3 | | | Trees with D3 | | | Maps with D3 | | _Break_ 12:50 - 13:00 `36:[{"id":"49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","href":"https://static.observableusercontent.com/files/49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","name":"fifaData.csv","type":"text/csv","lastModified":1635185843650.992,"size":9140113}] 33:{"id":"8948015ba6709a2d","slug":"lets-create-custom-made-and-interactive-visualizations-us","title":"Let's create custom made and interactive visualizations using D3","thumbnail":"301c9b944e85573804e23b706bd95cbd5b16340e05c596b380139c52215793c5","access_level":"public","create_time":"$D2021-10-25T00:06:03.298Z","update_time":"$D2021-10-25T18:54:31.106Z","view_time":null,"first_public_time":"$D2021-10-25T00:06:24.943Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":200,"publish_version":200,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"0790790d65d985d4","slug":"observable-ieeevis-tutorial","title":"Observable IEEEVIS Tutorial","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Let's create custom made and interactive visualizations using D3","cells":[{"id":5,"value":"md`# Let's create custom made and interactive visualizations using D3\n\n_ For who: _ Visualization researchers that want to create more complex systems and visualizations\n\n\n13:00 - 13:50\n For when you want to create more custom made or more advanced visualizations or reuse examples from the D3 community.\n\n_Objectives_\n* Understand D3 inside Observable\n* Building larger applications\n* Force Simulations and other concurrent processes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## The very basics of D3\n\n* Basic HTML/SVG\n* Selections\n* Data Binding\n* Scales\n* Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"svgEle = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"svgSel = d3.select(svgEle).selectAll(\"circle\").style(\"fill\", \"#69b3a2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"svgSel.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"attributes = Object.keys(data[0]).filter((a) => typeof data[0][a] === \"number\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof maxR = Inputs.range([2, 20], { label: \"Max Radius\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof xAttr = Inputs.select(attributes, { label: \"X Attribute\", value: \"Age\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof yAttr = Inputs.select(attributes, { label: \"Y Attribute\", value: \"Potential\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"viewof n = Inputs.range([1, fullData.length], {\n step: 1,\n value: fullData.length\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"data = fullData.slice(0, n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.right})`);\n\n g.append(\"g\").call(d3.axisLeft(yScale));\n g.append(\"g\")\n .call(d3.axisBottom(xScale))\n .attr(\"transform\", `translate(0, ${iheight})`);\n\n g.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cy\", 0)\n .attr(\"cx\", (d) => xScale(d[xAttr]))\n .attr(\"r\", (d) => rScale(d[rAttr]))\n .transition()\n .duration(1000)\n .attr(\"cy\", (d) => yScale(d[yAttr]));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"rAttr = \"Age\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"maxR","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"rScale = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[rAttr]))\n .range([0, maxR])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[xAttr]))\n .range([0, iwidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[yAttr]))\n .range([iheight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"margin = ({ left: 50, right: 20, top: 20, bottom: 50 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"iwidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"iheight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"fullData = FileAttachment(\"fifaData.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Reusing D3 visualizations\n\n[New D3 examples format](https://observablehq.com/@d3/charts)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"import { Scatterplot } from \"@d3/scatterplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"Scatterplot(data, { x: (d) => d[xAttr], y: (d) => d[yAttr], width, height })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Plot.plot({\n marks: [Plot.dot(data, { x: xAttr, y: yAttr })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"myscp(data, {\n x: (d) => d[xAttr],\n y: (d) => d[yAttr],\n width,\n height,\n onHover: (evt, i) => (mutable selected = data[i])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"mutable selected = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"import { Scatterplot as myscp } from \"d1b223a2656001f5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## Building Larger Applications\n\n\n* Modularization to the extreme\n* Build separate reusable modules, document them\n* [Unit Visualization](https://observablehq.com/d/a578473b724795d5)\n* [D3 Tree Visualizations](https://observablehq.com/@john-guerra/try-d3-tree-visualizations)\n* [UMAP Playground](https://observablehq.com/@john-guerra/umap-playground)\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"