31: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}

` }32:[] 2f:{"title":"Visualizing d3.js","cells":[{"id":0,"value":"md`# Visualizing d3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":107,"value":"md`#### d3.zoom is longest function!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"html` [tippy css]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"tippy = require(\"https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}