3e:null 3f:["$","title",null,{"children":"7. Position film flowers by the genres they share | Samuel Eke | Observable"}] 45:T867,slide` This is the relevant code from the *Les Mis* example above: ~~~js const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .on("tick", () => { // update node and link positions }) ~~~

**Let's break down what D3.js is doing underneath the hood:** 1. Takes array of nodes and assigns a random *x, y*-position to each of them 2. Loops through each node and applies the series of forces specified in \`.force()\`: - *Attractive forces* pull nodes together to conserve space (*e.g.* links between nodes) - *Negative forces* push nodes apart to avoid overlap between them (*e.g.* negative charges and collision forces) - All of these forces together nudge the node positions slightly, and these series of calculations happen in one "tick" 3. Runs thousands of "ticks" until the nodes are nudged to their "optimal" positions To use the calculated node and link positions, we update the corresponding DOM elements either on each "tick" (\`.on('tick', () => ...)\`) or on simulation end (\`.on('end', () => ...)\`).

Here is [my blog post](https://medium.com/@sxywu/understanding-the-force-ef1237017d5) that explains all of the above steps in great detail. It explains a previous version of the D3.js force layout implementation, but many of the concepts remain the same.

**Some fun applications of D3.js force in my own work**: - [Interactive Visualization of Every Line in Hamilton](https://pudding.cool/2017/03/hamilton/) - [People of the Pandemic](https://peopleofthepandemicgame.com/) - San Francisco visualization in [Bussed Out](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study) - [Four Years of Vacations in 20,000 Colors](https://sxywu.com/travel) Most of these examples take advantage of [positioning nodes around certain focal points](https://github.com/d3/d3-force#positioning), and [avoiding collision](https://github.com/d3/d3-force#collision). `46:T990,{ // this line is a little bit of Observable magic to make sure that every time // our filter cells update, we use the existing SVG element instead of trashing it and creating a new one // if you're working in your index.html, you'd create your svg element and select it as we did before const svg = this || html``; mutable graph = calculateGraph(graph); // ✨ OUR CODE HERE const link = d3 .select(svg) .selectAll(".link") .data(graph.nodes, (d) => d.title) .join("line") .classed("link", true) .attr("stroke", "#ccc") .attr("opacity", 0.3); // create flowers const flower = d3 .select(svg) .selectAll(".flower") .data(graph.nodes, (d) => d.title) .join((enter) => { const g = enter.append("g").classed("flower", true); // create petals & titles g.selectAll("path") .data((d) => _.times(d.numPetals, (i) => Object.assign({}, d, { rotate: i * (360 / d.numPetals) }) ) ) .join("path") .attr("transform", (d) => `rotate(${d.rotate})scale(${0.5 * d.scale})`) .attr("fill-opacity", 0.5) .attr("d", (d) => d.path) .attr("fill", (d) => d.color) .attr("stroke", (d) => d.color); g.append("text") .attr("text-anchor", "middle") .attr("dy", ".35em") .style("font-size", ".5em") .style("font-style", "italic") .text((d) => _.truncate(d.title, { length: 20 })); return g; }); const genres = d3 .select(svg) .selectAll(".genre") .data(graph.genres, (d) => d.label) .join("text") .classed("genre", true) .text((d) => d.label) .attr("text-anchor", "middle"); const nodes = _.union(graph.nodes, graph.genres); const simulation = d3 .forceSimulation(nodes) .force("link", d3.forceLink(graph.links)) .force( "collide", d3.forceCollide((d) => d.scale * 120) ) .force("center", d3.forceCenter(width / 2, width / 4)) .on("tick", () => { flower.attr("transform", (d) => `translate(${d.x}, ${d.y})`); genres.attr("transform", (d) => `translate(${d.x}, ${d.y})`); link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); }); invalidation.then(() => simulation.stop()) return svg; }47:Tb33,// final = { // // this line is a little bit of Observable magic to make sure that every time // // our filter cells update, we use the existing SVG element instead of trashing it and creating a new one // // if you're working in your index.html, you'd create your svg element and select it as we did before // const svg = this || html`` // mutable graph = calculateGraph(graph) // // create links // const link = d3.select(svg).selectAll('.link') // .data(graph.links, d => d.id) // .join('line') // .classed('link', true) // .attr('stroke', '#ccc') // .attr('opacity', 0.5) // // create flowers // const flower = d3.select(svg).selectAll('.flower') // .data(graph.nodes, d => d.title) // .join( // enter => { // const g = enter.append('g') // .classed('flower', true) // // create petals & titles // g.selectAll('path') // .data(d => _.times(d.numPetals, i => // Object.assign({}, d, {rotate: i * (360 / d.numPetals)}))) // .join('path') // .attr('transform', d => `rotate(${d.rotate})scale(${0.5 * d.scale})`) // .attr('fill-opacity', 0.5) // .attr('d', d => d.path) // .attr('fill', d => d.color) // .attr('stroke', d => d.color) // g.append('text') // .attr('text-anchor', 'middle') // .attr('dy', '.35em') // .style('font-size', '.5em') // .style('font-style', 'italic') // .text(d => _.truncate(d.title, {length: 20})) // return g // } // ) // // create genres // const genre = d3.select(svg).selectAll('.genre') // .data(graph.genres, d => d.label) // .join('text') // .classed('genre', true) // .attr('text-anchor', 'middle') // .attr('dy', '.35em') // .text(d => d.label) // // now create force simulation // const nodes = _.union(graph.nodes, graph.genres) // const simulation = d3.forceSimulation(nodes) // .force('charge', d3.forceManyBody(-300)) // .force('collide', d3.forceCollide(d => 150 * d.scale || 50)) // .force('link', d3.forceLink(graph.links).distance(100)) // .force('center', d3.forceCenter(width / 2, width / 2)) // .alpha(0.5).alphaMin(0.1) // .on('tick', () => { // console.log('tick') // // update flower position // flower.attr('transform', d => `translate(${d.x}, ${d.y})`) // // genre position // genre.attr('transform', d => `translate(${d.x}, ${d.y})`) // // and links // link.attr('x1', d => d.source.x) // .attr('y1', d => d.source.y) // .attr('x2', d => d.target.x) // .attr('y2', d => d.target.y) // }) // invalidation.then(() => simulation.stop()) // return svg // }48:[{"id":"961de0818ecca4a1f2b695455c863d4da00246e3407f450689a4e85ee09d8188db893499f28ec46cd420560e2fba1ac526fb4ed459b6c26e506d43eb1f20077a","href":"https://static.observableusercontent.com/files/961de0818ecca4a1f2b695455c863d4da00246e3407f450689a4e85ee09d8188db893499f28ec46cd420560e2fba1ac526fb4ed459b6c26e506d43eb1f20077a","name":"shirley.png","type":"image/png","lastModified":1673114905677.358,"size":86750}] 43:{"id":"a1bc616a0607a573","slug":null,"title":"7. Position film flowers by the genres they share","thumbnail":"30b8ffead826d6c73d77cbeac6695db7a1c1d8599a4246294f51a589ec3e402e","access_level":"public","create_time":"$D2023-01-07T18:08:25.677Z","update_time":"$D2023-01-07T18:35:54.880Z","view_time":null,"first_public_time":"$D2023-01-07T18:08:25.677Z","has_unpublished_edits":null,"fork":{"id":"a25aafa93f553da6","slug":"7-position-film-flowers-by-the-genres-they-share","title":"7. Position film flowers by the genres they share","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9cff1469f56395da","login":"samuel2000eke","name":"Samuel Eke","avatar_url":"https://avatars-next.observableusercontent.com/68b9820c7ce7e27ee6b0cd4e28ec3bf92e9bc930b9d0daaf90658e01254d68e5","tier":"starter_2024","bio":"","following":false},"version":359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9802abf1278f4b05","login":"samuel2000eke","name":"Samuel Eke","avatar_url":"https://avatars-next.observableusercontent.com/68b9820c7ce7e27ee6b0cd4e28ec3bf92e9bc930b9d0daaf90658e01254d68e5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9802abf1278f4b05","login":"samuel2000eke","name":"Samuel Eke","avatar_url":"https://avatars-next.observableusercontent.com/68b9820c7ce7e27ee6b0cd4e28ec3bf92e9bc930b9d0daaf90658e01254d68e5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"7. Position film flowers by the genres they share","cells":[{"id":0,"value":"md`\n

\nThis notebook was created as workshop material for the *Introduction to SVG and D3.js* course on Frontend Masters. Watch the [full video course here](https://frontendmasters.com/courses/d3/)!\n

\n\n# 7. Position film flowers by the genres they share\nSo far we've only talked about D3.js scales to help us position our data, but D3.js gives us many more options to help us position and layout our data.\n\nBelow, I'll highlight a few of my favorites.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\n## ✨ D3.js shape\n\n[D3.js shape](https://github.com/d3/d3-shape) functions help us calculate the **path strings** we need to draw line charts, area charts, pie charts, etc. They take in raw data and return path strings.\n\nTake for example, this raw data for Apple's daily closing price:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"lineData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`\nWhen we pass the data array into \\`d3.line()\\`, we get this path string:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"line(lineData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`\nAnd we can set that string on a \\`\\` element and add some axes to create the line chart below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"lineChart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`\n## ✨ D3.js hierarchy\n\n[D3.js hierarchy](https://github.com/d3/d3-hierarchy) helps us calculate the *x, y*-positions and (where applicable) the *width*, *height*, *radius* for trees, tree maps, circle maps, etc. They also take in the raw data and return new objects without mutating the original data.\n\nHere's a nested dataset:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"treeData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`\nWhen we pass it into \\`d3.tree()\\`, we get back this new nested object with *x, y*-positions (and a few other pieces of information) and the original data array remains untouched:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"tree(treeData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`\nWe can use this object to position each of the nodes in this tree, and a D3.js shape to calculate the path for the links:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"treeChart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`\n## ✨ D3.js force\n\nThe [D3.js force layout](https://github.com/d3/d3-force) is probably my favorite layout module because of how powerful it is. It's a little bit different from the others I've already mentioned, because it directly mutates the data we pass in and requires upwards of thousands of calculations instead of one single one.\n\nThe force layout is used to calculate positions for a node-and-link graph.\n\nHere is a very classic D3.js force example with a dataset from *Les Mis*:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"forceData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"forceGraph","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`\n## 🔥 exercise time 🔥\nLet's use D3.js force and position all of our film flowers by the genres that they share. Bonus points for making it work with our filters 😆\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof filteredGenres = checkbox({\n title: \"Genres\",\n options: _.map(topGenresOther, genre => {\n return {value: genre, label: genre}\n }),\n value: topGenresOther,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof filteredPG = checkbox({\n title: \"Parental Guidance Ratings\",\n options: _.map(rated, d => {\n return {value: d, label: d}\n }),\n value: rated,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`\nHere's what the end result should look like:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"filtered = _.filter(movies, d => {\n // either the genre is in the filtered genres\n return (_.includes(filteredGenres, d.genres[0]) ||\n // OR the movie's genre isn't one of the top genres, and \"Other\" is toggled\n (_.includes(filteredGenres, 'Other') && !_.includes(topGenres, d.genres[0]))) &&\n // AND movie's pg rating is in filtered pg\n _.includes(filteredPG, d.rated)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"filteredFlowers = calculateData(filtered)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"mutable graph = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"calculateGraph = (prevGraph) => {\n const genres = {}\n const nodes = []\n const links = []\n \n _.each(filtered, (d, i) => {\n let flower = prevGraph && _.find(prevGraph.nodes, ({title}) => title === d.title)\n flower = flower || filteredFlowers[i]\n \n // insert flower into nodes\n nodes.push(flower)\n \n // loop through genres and link the movie flower to the genre\n _.each(d.genres, genre => {\n if (prevGraph) {\n genres[genre] = _.find(prevGraph.genres, ({label}) => label === genre)\n }\n if (!genres[genre]) {\n // if genre doesn't yet exist, create it\n genres[genre] = {\n label: genre,\n size: 0,\n }\n }\n genres[genre].size += 1\n \n // then create a new link\n links.push({\n source: genres[genre],\n target: flower,\n id: `${genre}-movie${i}`,\n })\n })\n })\n \n return {nodes, genres: _.values(genres), links}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`\n## ✨ some final notes\n\nWe've been doing all of our exercises in Observable, but let's translate both our simple bar chart and our film flowers over to an \\`index.html\\` file. We'll use codesandbox for this:\n- [bar chart file](https://codesandbox.io/s/objective-rubin-luc9f?file=/barChart.html)\n- [film flowers file](https://codesandbox.io/s/objective-rubin-luc9f?file=/filmflowers.html)\n\nAnd if you're looking for next steps, here are my other workshops on Frontend Masters:\n- [Building Custom Data Visualizations](https://frontendmasters.com/courses/d3-js-custom-charts/)\n- [Data Visualization for React Developers](https://frontendmasters.com/courses/d3-js-react/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`\n

\n${Object.assign(await FileAttachment(\"shirley.png\").image(), {\n style: 'width; 100%; max-width: 640px;',\n})}\n\n

thank you!

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`\n### ~appendix~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {\n movies, slide, slide_style,\n svgHeight, scrollSVG, textWidth,\n topGenres, rated,\n} from '@sxywu/workshop-utility-functions'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {calculateData} from '2683357905679f61'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"topGenresOther = _.union(topGenres, ['Other'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {data as lineData, line, chart as lineChart} from '@d3/line-chart'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import {data as treeData, tree, chart as treeChart} from '@d3/tidy-tree'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"import {data as forceData, chart as forceGraph} from '@d3/force-directed-graph'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {map} from '@d3/u-s-map'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"slide_style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"