32: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 `33:[{"id":"49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","href":"https://static.observableusercontent.com/files/49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","name":"fifaData.csv","type":"text/csv","lastModified":1635185843650.992,"size":9140113}] 30:{"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"},{"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"},{"id":57,"value":"svgEle = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"svgSel = d3.select(svgEle).selectAll(\"circle\").style(\"fill\", \"#69b3a2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"svgSel.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"attributes = Object.keys(data[0]).filter((a) => typeof data[0][a] === \"number\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof maxR = Inputs.range([2, 20], { label: \"Max Radius\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof xAttr = Inputs.select(attributes, { label: \"X Attribute\", value: \"Age\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof yAttr = Inputs.select(attributes, { label: \"Y Attribute\", value: \"Potential\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof n = Inputs.range([1, fullData.length], {\n step: 1,\n value: fullData.length\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"data = fullData.slice(0, n)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":106,"value":"rAttr = \"Age\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"maxR","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":122,"value":"margin = ({ left: 50, right: 20, top: 20, bottom: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"iwidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"iheight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"fullData = FileAttachment(\"fifaData.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Reusing D3 visualizations\n\n[New D3 examples format](https://observablehq.com/@d3/charts)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"import { Scatterplot } from \"@d3/scatterplot\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"Scatterplot(data, { x: (d) => d[xAttr], y: (d) => d[yAttr], width, height })","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"Plot.plot({\n marks: [Plot.dot(data, { x: xAttr, y: yAttr })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":191,"value":"mutable selected = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"import { Scatterplot as myscp } from \"d1b223a2656001f5\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":0,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}