2e:null 2f:["$","title",null,{"children":"Visualizing d3.js | Giorgi Ghviniashvili | Observable"}] 34:Tf19,{ let height = 600 let svgNode = DOM.svg(width, height) let searchNode = html`` let circlePad = 1; let nodes = Object.keys(d3).map(d => { return { name: d, isFunc: typeof d3[d] === 'function', codeLen: d3[d] ? d3[d].toString().length : 0 } }) let svg = d3.select(svgNode) let minMax = [d3.min(nodes, d => d.codeLen), d3.max(nodes, d => d.codeLen)] let scaleRadius = d3.scaleLinear().range([10, 40]).domain(minMax) let interpolate = d3.scaleLinear().range([1, 0]).domain(minMax) let chart = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`) let radius = 10; let simulation = d3.forceSimulation(nodes) .force('collide', d3.forceCollide().iterations(2).radius(d => scaleRadius(d.codeLen) + circlePad)) // .force('x', d3.forceX()) // .force('y', d3.forceY()) .on('tick', tick) let node = chart.selectAll('.node') .data(nodes) .enter() .append('circle') .attr('class', 'node') .attr('r', d => scaleRadius(d.codeLen)) .attr('fill', (d,i) => d3.interpolateViridis(interpolate(d.codeLen))) .attr('stroke-width', 0) .attr('title', d => { return `

d3.${d.isFunc ? d.name + '()' : d.name}\n

code length: ${d.codeLen} characters

` }) .attr('cursor', 'pointer') .call(d3.drag().on('start', dragstarted).on('drag', dragging).on('end', dragended)) tippy.defaults.arrow = true node.each(function(d) { tippy(this) }) let currentNodes = null; d3.select(searchNode) .on("keypress", function() { if(d3.event.keyCode === 13 && this.value.length > 2) { if (currentNodes) node.filter(d => currentNodes.indexOf(d) > -1) .transition().duration(500) .attr('stroke', 'none').attr('stroke-width', 0) let circles = nodes.filter(d => d.name.toLowerCase().includes(this.value.toLowerCase())) if (circles.length) { node.filter(d => circles.indexOf(d) > -1) .transition().duration(500) .attr('stroke', '#E7505A') .attr('stroke-width', 2) zoomToCenter(circles) currentNodes = circles } } }) .on("input", function(){ if (this.value == '') { chart .transition() .duration(1000) .attr('transform', `translate(${width / 2}, ${height / 2}) scale(1)`) node.transition().duration(500) .attr('stroke', 'none').attr('stroke-width', 0) } }) function zoomToCenter (circles) { let realCoords = circles.map(d => { return { x: width / 2 - d.x, y: height / 2 - d.y, r: scaleRadius(d.codeLen) } }) let encloseCircle = d3.packEnclose(realCoords); chart .transition() .duration(1000) .attr('transform', `translate(${encloseCircle.x}, ${encloseCircle.y}) scale(1.2)`) } function tick () { node.attr('cx', d => d.x) .attr('cy', d => d.y) } function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.1).restart() d.fx = d.x d.fy = d.y } function dragging(d) { d.fx = d3.event.x d.fy = d3.event.y } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0) d.fx = null d.fy = null } return html`

${svgNode}${searchNode}

` }35:[] 32:{"id":"dbf7503a9cb7dd37","slug":"visualizing-d3-js-lib","title":"Visualizing d3.js","thumbnail":"d0e63a6ff152d0f54beb293a4764bedf3ac0436dc846afc842b10fa8f0ad3251","access_level":"public","create_time":"$D2018-11-07T13:06:16.764Z","update_time":"$D2023-03-30T15:18:37.167Z","view_time":null,"first_public_time":"$D2018-11-07T14:02:28.847Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a072e28fa6ba7108","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili","avatar_url":"https://avatars-next.observableusercontent.com/b624b114af61edb30c3cde2c45d2a17aa19bfa9f7e5e48169e3b0c0680ba77d1","tier":"starter_2024"},"version":247,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b3e040b79540575","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili","avatar_url":"https://avatars-next.observableusercontent.com/b624b114af61edb30c3cde2c45d2a17aa19bfa9f7e5e48169e3b0c0680ba77d1","tier":null}],"members":[{"type":"individual","id":"0b3e040b79540575","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili","avatar_url":"https://avatars-next.observableusercontent.com/b624b114af61edb30c3cde2c45d2a17aa19bfa9f7e5e48169e3b0c0680ba77d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"b939195325412cdb","slug":"visualizations","title":"Visualizations","owner":{"id":"a072e28fa6ba7108","login":"giorgi-ghviniashvili","name":"Giorgi Ghviniashvili"}},"type":"notebook","body":{"title":"Visualizing d3.js","cells":[{"id":0,"value":"md`# Visualizing d3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`### Each node is a property of d3 object. Radius is based on the length of property's source code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`#### d3.zoom is longest function!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"html` [tippy css]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"tippy = require(\"https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"