2c:null 2d:["$","title",null,{"children":"Force Simulation to visualize word cloud - with split version | Daniele Pau | Observable"}] 32:T10c5,wordCloud = (data,word,frequency,maxSize,type) => { if (type===undefined) { data.map(d => d.type = 0) } const height = 1150; //const width = 1150; const margin = { t: 0, l: 120, r: 120, b: 0, } const padding = 2; // create the SVG container let ext = d3.extent(data, d => d[type]) //console.log(ext) let xScale = d3.scaleLinear() .domain(ext) .range([margin.l, width - margin.l - margin.r]); let svg = d3.select(html``) .attr('width', width) .attr('height', height); const colors = d3.schemeSet1 .slice(0, new Set(data.map(d=> d[type])).size) // color text black or white according to the luminance value of the node const luminance = 50; const textColor = d3.scaleQuantile().range(["#fff", "#000"]).domain([0, luminance, 100]); // define scale for radius const r = d3.scaleSqrt() .domain([0, d3.max(data, d => d[frequency])]) .range([0, maxSize]); // define the simualtion engine var simulation = d3.forceSimulation(data) .force("x", d3.forceX(width/2).strength(0.008)) .force("y", d3.forceY(height/2).strength(0.08)) .force("collide", d3.forceCollide().radius(d=> r(d[frequency]) + padding).iterations(5)) .force('center', d3.forceCenter(width/2, 1.6*height/2)) .alpha(0.7); /////////////////// function randomize() { simulation .force("x", d3.forceX(width/2).strength(0.1)) .force("y", d3.forceY(width/2).strength(0.1)) .force("collide", d3.forceCollide().radius(d=> r(d[frequency]) + padding).iterations(1)) //.force('center', d3.forceCenter(width/2, 1.6*height/2)) .alpha(0.1) .on('end', () => { simulation .alpha(0.1) .force("x", d3.forceX(width/2).strength(0.008)) .force("y", d3.forceY(width/2).strength(0.1)) .on('end', null) // .force("charge", d3.forceManyBody().strength(-1)) .restart(); }).restart(); } function split() { simulation .force("x", d3.forceX(d=> xScale(d[type])).strength(0.5)) .force("y", d3.forceY(height/2).strength(0.5)) .force("collide", d3.forceCollide().radius(d=> r(d[frequency]) + padding).iterations(5)) .alpha(0.5) .restart(); } ///////////// // create a layer or group let gBubble = svg .selectAll('gBubble') .data(data); gBubble.exit().remove(); let bubble = gBubble.enter() .append('g') .classed('gBubble', true) .attr('id',d => d[word]); bubble .append('circle') .attr('r', d => r(d[frequency])) .attr('fill', d => colors[+d[type]]) .attr('fill-opacity', 0.4) .attr('stroke', d => colors[+d[type]]) .attr('stroke-width', 1) .style("cursor", "pointer"); let text= bubble .append('text'); const textLabels = text .text( d => (d[word])) .style('text-anchor','middle') .attr("dominant-baseline", "central") .attr('font-family', 'sans-serif') .attr('font-size', d => r(d[frequency])/2+'px' ) .attr('font-weight','normal') .attr('fill', d => textColor(d3.hcl(colors[+d[type]]).l)) .style("cursor", "pointer") // const tooltip = bubble // .append('g') // .style('visibility', 'hidden'); // const tipRect = tooltip // .append('rect') // .classed('tooltip', true) // const tip = tooltip // .append('text') // .style('x', 0) // .style('y', 10) // .text(d => d[type] + ', ' + d[frequency]); // bubble // .on('mouseover', function(e,idx) { // let node = d3.select(bubble.nodes()[idx]) // node // .select('.tooltip') // .style('visibility', 'visible'); // }) // .on('mouseout', function(e,idx) { // let node = d3.select(bubble.nodes()[idx]) // node // .select('.tooltip') // .style('visibility', 'hidden'); // }); gBubble = gBubble .merge(bubble); gBubble.call(drag(simulation)); simulation.nodes(data) .on('tick', () => { gBubble .attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')'); }) return Object.assign(svg.node(), { randomize, split }); }33:[] 30:{"id":"415f2ac1bb5c98b3","slug":"force-simulation-to-visualize-word-cloud-with-split-versio","title":"Force Simulation to visualize word cloud - with split version","thumbnail":"1722a43d5a34dce580ddce8329483ffcf29232655aa41ca261844a19411375f2","access_level":"public","create_time":"$D2019-06-22T16:35:48.693Z","update_time":"$D2019-06-29T15:17:09.479Z","view_time":null,"first_public_time":"$D2019-06-27T07:50:04.531Z","fork":{"id":"500050079cc85033","slug":"force-simulation-to-visualize-word-cloud-with-split-versio","title":"Force Simulation to visualize word cloud - with split version","owner":{"id":"3f139cfa303b0c24","login":"danielefadda","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"8ccc8bdc42c3fd5a","login":"danyyyy89","name":"Daniele Pau","avatar_url":"https://avatars-next.observableusercontent.com/1f7507a69907daa62b7caa3105a085ef17a0e69742ad15dad50b84d1d4be35e1","tier":"starter_2024"},"version":1187,"publish_version":1187,"role":null,"authored":false,"authors":[{"type":"individual","id":"f97ec53c0c92088f","login":"danyyyy89","name":"Daniele Pau","avatar_url":"https://avatars-next.observableusercontent.com/1f7507a69907daa62b7caa3105a085ef17a0e69742ad15dad50b84d1d4be35e1","tier":null}],"members":[{"type":"individual","id":"f97ec53c0c92088f","login":"danyyyy89","name":"Daniele Pau","avatar_url":"https://avatars-next.observableusercontent.com/1f7507a69907daa62b7caa3105a085ef17a0e69742ad15dad50b84d1d4be35e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Force Simulation to visualize word cloud - with split version","cells":[{"id":0,"value":"md`# Force Simulation to visualize word cloud - with split version`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"md`## Data preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"md`Load a plain data file (for example .csv) with a header such as the following:\n*type, word, frequency*. \n\n*Type* can be a label used to assign a color (for example, a cluster id) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"data = d3.csv(\"https://raw.githubusercontent.com/Danyyy89/Hello-world/master/10_BubbleWords_MAX.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"letters = d3.range(26).map(i => ({\n cluster: Math.floor(Math.random()*3), \n word: String.fromCharCode(65 + i), // UTF-8 Basic Latin. Use ASCII position to generate alphabet\n frequency: Math.floor(Math.random()*1000)\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## An alternative to *word cloud*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"viewof splitElements = {\n const button = html``;\n button.onclick = () => {\n example.split();\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"viewof randomizeElements = {\n const button = html``;\n button.onclick = () => {\n example.randomize();\n }\n\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"example = wordCloud(data, 'parola', 'percentuale', 42, 'caso')\n// declare type column only if you have a label you want to use to color bubbles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`Let's construct a force simulation engine to position each circle accordingly to its radius`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md`wordCloud function arguments :\n1. *data*: your dataset\n2. *word*: the word to write inside the bubble\n3. *frequency*: the weight you assign to each word\n4. *maxsize*: a number that defines the maximum dimension of the biggest bubble (in px)\n5. *type*: a category column to color the bubble (optional)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"// ti = require(\"http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"// tip = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"drag = (simulation) => {\n function dragstarted(d){\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d){\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d){\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n \n return d3.drag()\n .on('start', dragstarted)\n .on('drag', dragged)\n .on('end', dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"