2b:null 2c:["$","title",null,{"children":"D3 Force Layout, Draggable Particles, Quantized Colors | Cameron Yick | Observable"}] 31:T754,chart_cluster_drag2 = { const svg = d3.select(DOM.svg(width, height)); // Let's add some text attributes for each country const labels = svg.selectAll('text') .data(countries) .enter() .append('text') .attr('x', d => xScale(d) + 10) .attr('y', height/2 +40) .text(d => d); const nodes = svg .selectAll('circle').data(data) .enter() .append('circle') .attr('fill', d => color(d.launchCountry)) .attr('r', 5); // Make a function that will rerun on each tick of the simulation const ticked = () => { nodes .attr('cx', d => d.x) .attr('cy', d => d.y) } // Then, we need some drag event handlers const dragstarted = (d) => { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } const dragged = (d) => { d.fx = d3.event.x; d.fy = d3.event.y; } const dragended = (d) => { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } // Lastly, we attach them nodes.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const simulation = d3.forceSimulation(data) .force("charge", d3.forceManyBody() // this pushes points (+together,-apart) .strength(-5) .distanceMax(100)) .force('collision', d3.forceCollide() .radius(5)) .force("center", d3.forceCenter(width / 2, height / 2)) // align clump based on category .force('x', d3.forceX().x(d=> xScale(d.launchCountry))) // we can blind align the y axis to 0 so that things are single file .force('y', d3.forceY().y(0)) .on('tick', ticked) return svg.node() }32:T77e,chart_cluster_drag = { const svg = d3.select(DOM.svg(width, height)); // Let's add some text attributes for each country const labels = svg.selectAll('text') .data(countries) .enter() .append('text') .attr('x', d => xScale(d) + 10) .attr('y', height/2 +40) .attr('font-size', 14) .text(d => d); const nodes = svg .selectAll('circle').data(data) .enter() .append('circle') .attr('fill', d => color(d.launchCountry)) .attr('r', 5); // Make a function that will rerun on each tick of the simulation const ticked = () => { nodes .attr('cx', d => d.x) .attr('cy', d => d.y) } // Then, we need some drag event handlers const dragstarted = (d) => { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } const dragged = (d) => { d.fx = d3.event.x; d.fy = d3.event.y; } const dragended = (d) => { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } // Lastly, we attach them nodes.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const simulation = d3.forceSimulation(data) .force("charge", d3.forceManyBody() // this pushes points (+together,-apart) .strength(-5) .distanceMax(100)) .force('collision', d3.forceCollide() .radius(5)) .force("center", d3.forceCenter(width / 2, height / 2)) // align clump based on category .force('x', d3.forceX().x(d=> xScale(d.launchCountry))) // we can blind align the y axis to 0 so that things are single file .force('y', d3.forceY().y(0)) .on('tick', ticked) return svg.node() }33:T6be,chart_cluster_drag_gooey = { const svg = d3.select(DOM.svg(width, height)); // add labels to each cluster! const group = svg .append("g") // .attr("filter", filter) //Set the filter on the container... it's too large const nodes = group .selectAll('circle').data(data) .enter() .append('circle') .attr('r', 5); // Make a function that will rerun on each tick of the simulation const ticked = () => { nodes .attr('cx', d => d.x) .attr('cy', d => d.y) } // Then, we need some drag event handlers const dragstarted = (d) => { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } const dragged = (d) => { d.fx = d3.event.x; d.fy = d3.event.y; } const dragended = (d) => { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } // Lastly, we attach the drag handlers nodes.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const simulation = d3.forceSimulation(data) .force("charge", d3.forceManyBody() // this pushes points (+together,-apart) .strength(-10) .distanceMax(100)) .force('collision', d3.forceCollide() .radius(5)) .force("center", d3.forceCenter(width / 2, height / 2)) .force('x', d3.forceX().x(d=> xScale(d.launchCountry)) // .strength(0.2)// keep between 0 and 1 ) .force('y', d3.forceY().y(0)) // .force('r', d3.forceRadial(width / 2, height / 2)) .on('tick', ticked) return svg.node() }34:[] 2f:{"id":"91e563a65442e17c","slug":"d3-force-layout-draggable-particles-quantized-colors","title":"D3 Force Layout, Draggable Particles, Quantized Colors","thumbnail":"ef271c019928d2df28e69d200826fa51f5b9a41c1685206e75bae81b2293d5ec","access_level":"public","create_time":"$D2018-04-21T20:51:23.346Z","update_time":"$D2021-12-16T19:55:03.103Z","view_time":null,"first_public_time":"$D2018-04-22T00:21:55.475Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"0b7d18f7496397ee","login":"hydrosquall","name":"Cameron Yick","avatar_url":"https://avatars-next.observableusercontent.com/834e6a5adc91d41ae48913d9cff19b149ea71b11ce0bad9743f08428cbd59334","tier":"starter_2024"},"version":381,"publish_version":381,"role":null,"authored":false,"authors":[{"type":"individual","id":"51f06cf9c5905378","login":"hydrosquall","name":"Cameron Yick","avatar_url":"https://avatars-next.observableusercontent.com/834e6a5adc91d41ae48913d9cff19b149ea71b11ce0bad9743f08428cbd59334","tier":null}],"members":[{"type":"individual","id":"51f06cf9c5905378","login":"hydrosquall","name":"Cameron Yick","avatar_url":"https://avatars-next.observableusercontent.com/834e6a5adc91d41ae48913d9cff19b149ea71b11ce0bad9743f08428cbd59334","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"efc5052eee277c78","slug":"tutorials","title":"Visualization Tutorials - D3 and Vega-Lite","owner":{"id":"0b7d18f7496397ee","login":"hydrosquall","name":"Cameron Yick"}},"type":"notebook","body":{"titling":"auto","title":"D3 Force Layout, Draggable Particles, Quantized Colors","cells":[{"id":0,"value":"md`# D3 Force Layout, Draggable Particles, Quantized Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`_This is not a tutorial yet, just a sandbox for an article in progress._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`Let's start with the rockets dataset that we've been using in this series. First we'll plot everything, and then we'll look into grouping by country.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`We'll hoist the country code up into a top-level attribute.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data = rocketLaunchesTable.map(d => {\n return {\n ...d,\n launchCountry: d.location.country\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`Next, we set up some colors and the force simulation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"// This is one of the meeks-lu palettes\n// http://projects.susielu.com/viz-palette\ncbrewer = [\"#ffd700\",\n\"#ffb14e\",\n\"#fa8775\",\n\"#ea5f94\",\n\"#cd34b5\",\n\"#9d02d7\",\n\"#0000ff\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"// cbrewer = chroma.scale(['#fafa6e','#2A4858'])\n// .mode('lch').colors(9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"cbrewer.toString()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// We define a scale\ncolor = d3.scaleOrdinal()\n .domain(countries)\n .range(cbrewer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`This is our first chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"data.map(d => d.launchCountry)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"color(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height)); \n \n // Make a function that will rerun on each tick of the simulation\n const ticked = () => {\n const u = svg\n .selectAll('circle')\n .data(data, d => d.name)\n u.enter()\n .append('circle')\n .attr('r', 5)\n .merge(u)\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n u.exit()\n .remove()\n }\n \n const simulation = d3.forceSimulation(data)\n .force(\"charge\", d3.forceManyBody() // this pushes points (+together,-apart)\n .strength(10))\n .force('collision', d3.forceCollide() // this e\n .radius(5))\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on('tick', ticked)\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`Now, we will split the dots into lanes based on country of launch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"xRange = [margin.left, width - margin.right]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"xScale = d3.scaleBand()\n .domain(data.map(d => d.launchCountry))\n .range(xRange)\n .padding(200) // use to spread out ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"chart_cluster = {\n const svg = d3.select(DOM.svg(width, height)); \n \n // Make a function that will rerun on each tick of the simulation\n const ticked = () => {\n const u = svg\n .selectAll('circle')\n .data(data)\n u.enter()\n .append('circle')\n .attr('r', 5)\n .merge(u)\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n u.exit().remove()\n }\n \n const simulation = d3.forceSimulation(data)\n .force(\"charge\", d3.forceManyBody() // this pushes points (+together,-apart)\n .strength(-5))\n .force('collision', d3.forceCollide()\n .radius(5))\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n // align clump based on category\n .force('x', d3.forceX().x(d=> xScale(d.launchCountry)))\n // we can blind align the y axis to 0 so that things are single file\n .force('y', d3.forceY().y(0))\n .on('tick', ticked)\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`We'll cover a bit of practice with making labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"countries = _.uniq(data.map(d => d.launchCountry))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"chart_cluster_labels = {\n const svg = d3.select(DOM.svg(width, height)); \n \n // Let's add some text attributes for each country\n const labels = svg.selectAll('text')\n .data(countries)\n .enter()\n .append('text')\n .attr('x', d => xScale(d))\n .attr('y', height / 2)\n .attr('font-size', 12)\n .text(d => d);\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`Let's label each cluster, and make it draggable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`I wasn't really able to get the gooey working, but here are notes + Nadieh's filter from her tutorial.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`Here's Kelley VanEvert's Filter: (https://beta.observablehq.com/@kelleyvanevert/gooey-filter-via-a-data-url)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"filter = {\n const svg = ``;\n \n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n\n const filter = `url('${url}#gooey')`;\n return filter;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## Imports: \n\nCode from other places`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`We should investigate the usage of forces further in the future, as well as how to add/remove forces as state changes. https://github.com/d3/d3-force`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margin = ({top: 20, left: 40, bottom: 40, right: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import { rocketLaunchesTable } from \"@hydrosquall/d3js-bar-charts-lollipops-and-nesting\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"