2c:null 2d:["$","title",null,{"children":"Force Simulation to visualize bikesharing network | danielefadda | Observable"}] 32:T701,{ let height = 500; // create the SVG container let svg = d3.select(html``) .attr('width', width) .attr('height', height); // define scale for radius const r = d3.scaleSqrt() .domain([0, d3.max(volumesOut, d => d.value)]) .range([0, 70]); // define the simualtion engine const simulation = d3.forceSimulation(volumesOut) .force('charge', d3.forceManyBody().strength(90)) // .force("x", d3.forceX().strength(0.008)) // .force("y", d3.forceY().strength(0.008)) .force("collide", d3.forceCollide().radius(d=> r(d.value) + 0.5).iterations(2)) .force('center', d3.forceCenter(width/2, height/2)); // create a layer or group let gStations = svg .selectAll('g.station') .data(volumesOut); gStations.exit().remove(); let eStations = gStations.enter() .append('g') .classed('station', true); eStations .append('circle') // .attr('cx', d => Math.random()*width) // we use an accessor function here // .attr('cy', height/2) .attr('r', d => r(d.value)) .attr('fill', 'red') .attr('fill-opacity', 0.4) .attr('stroke', 'red') .attr('stroke-width', 1) let text= eStations .append('text'); var textLabels = text .text( d => (d.key)) .style('text-anchor','middle') .attr('font-family', 'sans-serif') .attr('font-size', d => r(d.value)/5+'px') .attr('fill', 'white'); gStations = gStations .merge(eStations); // gStations // .attr('transform', d => 'translate('+ (Math.random()*width) +','+ (height / 2)+')'; simulation.on('tick', () => { gStations .attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')'); }) return svg.node(); }33:T76b,{ let height = 500; // create the SVG container let svg = d3.select(html``) .attr('width', width) .attr('height', height); // define scale for radius const r = d3.scaleSqrt() .domain([0, d3.max(volumesOut, d => d.value)]) .range([0, 50]); // define the simualtion engine const simulation = d3.forceSimulation(volumesOut) // .force('charge', d3.forceManyBody().strength(90)) // .force("x", d3.forceX().strength(0.008)) // .force("y", d3.forceY().strength(0.008)) .force("collide", d3.forceCollide().radius(d=> r(d.value) + 0.5).iterations(2)) // .force('center', d3.forceCenter(width/2, height/2)) .force('radial', d3.forceRadial(150, width/2, height/2)); // create a layer or group let gStations = svg .selectAll('g.station') .data(volumesOut); gStations.exit().remove(); let eStations = gStations.enter() .append('g') .classed('station', true); eStations .append('circle') // .attr('cx', d => Math.random()*width) // we use an accessor function here // .attr('cy', height/2) .attr('r', d => r(d.value)) .attr('fill', 'red') .attr('fill-opacity', 0.4) .attr('stroke', 'red') .attr('stroke-width', 1); let text= eStations .append('text'); var textLabels = text .text( d => (d.key)) .style('text-anchor','middle') .attr('font-family', 'sans-serif') .attr('font-size', d => r(d.value)/5+'px') .attr('fill', 'white'); gStations = gStations .merge(eStations); gStations.call(drag(simulation)); // gStations // .attr('transform', d => 'translate('+ (Math.random()*width) +','+ (height / 2)+')'; simulation.on('tick', () => { gStations .attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')'); }) return svg.node(); }34:Tb13,{ let height = 700; // create the SVG container let svg = d3.select(html``) .attr('width', width) .attr('height', height); const nodes = volumesOut.map(d => Object.create(d)); // make a copy of each of the original objects const links = cNetwork.map(d => ({ source: d.StazPrelievo, target: d.StazDeposito, count: d.count, })); console.log(links); // define scale for radius const r = d3.scaleSqrt() .domain([0, d3.max(volumesOut, d => d.value)]) .range([0, 50]); const e = d3.scaleLinear() .domain([0, d3.max(links, d => d.count)]) .range([0, 20]); const link = svg.append('g') .attr('stroke', '#999') .attr('stroke-opacity', 0.6) .selectAll('line') .data(links) .join('line') .attr('stroke-width', d=>e(d.count)); // create a layer or group let gStations = svg .selectAll('g.station') .data(nodes); gStations.exit().remove(); let eStations = gStations.enter() .append('g') .classed('station', true); eStations .append('circle') // .attr('cx', d => Math.random()*width) // we use an accessor function here // .attr('cy', height/2) .attr('r', d => r(d.value)) .attr('fill', 'red') .attr('fill-opacity', 0.4) .attr('stroke', 'red') .attr('stroke-width', 1); let text= eStations .append('text'); var textLabels = text .text( d => (d.key)) .style('text-anchor','middle') .attr('font-family', 'sans-serif') .attr('font-size', d => r(d.value)/5+'px') .attr('fill', 'white'); gStations = gStations .merge(eStations); // const simulation = d3.forceSimulation(nodes) // // .force('charge', d3.forceManyBody().strength(90)) // // .force("x", d3.forceX().strength(0.008)) // // .force("y", d3.forceY().strength(0.008)) // .force("collide", d3.forceCollide().radius(d=> r(d.value) + 0.5).iterations(2)) // // .force('center', d3.forceCenter(width/2, height/2)) // .force('link', d3.forceLink(links).id(d => d.key).strength(0)) // .force('radial', d3.forceRadial(300, width/2, height/2)); const simulation = d3.forceSimulation(nodes) .force('link', d3.forceLink(links).id(d => d.key)) .force('charge', d3.forceManyBody().strength(d => -100*r(d.value))) .force('center', d3.forceCenter(width/2, height/2)); gStations.call(drag(simulation)); // gStations // .attr('transform', d => 'translate('+ (Math.random()*width) +','+ (height / 2)+')'; simulation.on('tick', () => { gStations .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); }) return svg.node(); }35:Tca4,{ let height = 800; // create the SVG container let svg = d3.select(html``) .attr('width', width) .attr('height', height); const nodes = volumesOut.map(d => Object.create(d)); // make a copy of each of the original objects const links = cNetwork.map(d => ({ source: d.StazPrelievo, target: d.StazDeposito, count: d.count, })); console.log(links); // define scale for radius const r = d3.scaleSqrt() .domain([0, d3.max(volumesOut, d => d.value)]) .range([0, 50]); const e = d3.scaleLinear() .domain([0, d3.max(links, d => d.count)]) .range([0, 20]); const link = svg.append('g') .attr('stroke', '#999') .attr('stroke-opacity', 0.6) .attr('fill', 'none') .selectAll('path') // we use PATH object instead of line .data(links) .join('path') .attr('stroke-width', d=>e(d.count)); // create a layer or group let gStations = svg .selectAll('g.station') .data(nodes); gStations.exit().remove(); let eStations = gStations.enter() .append('g') .classed('station', true); eStations .append('circle') // .attr('cx', d => Math.random()*width) // we use an accessor function here // .attr('cy', height/2) .attr('r', d => r(d.value)) .attr('fill', 'red') .attr('fill-opacity', 0.8) .attr('stroke', 'red') .attr('stroke-width', 1); let text= eStations .append('text'); var textLabels = text .text( d => (d.key)) .style('text-anchor','middle') .attr('font-family', 'sans-serif') .attr('font-weight','bold') .attr('font-size', 12) .attr('fill', 'black') ; gStations = gStations .merge(eStations); // const simulation = d3.forceSimulation(nodes) // // .force('charge', d3.forceManyBody().strength(90)) // // .force("x", d3.forceX().strength(0.008)) // // .force("y", d3.forceY().strength(0.008)) // .force("collide", d3.forceCollide().radius(d=> r(d.value) + 0.5).iterations(2)) // // .force('center', d3.forceCenter(width/2, height/2)) // .force('link', d3.forceLink(links).id(d => d.key).strength(0)) // .force('radial', d3.forceRadial(300, width/2, height/2)); const simulation = d3.forceSimulation(nodes) .force('link', d3.forceLink(links).id(d => d.key)) .force('charge', d3.forceManyBody().strength(d => -100*r(d.value))) .force('center', d3.forceCenter(width/2, height/2)); gStations.call(drag(simulation)); // gStations // .attr('transform', d => 'translate('+ (Math.random()*width) +','+ (height / 2)+')'; function path(link){ // return 'M' + link.source.x+','+link.source.y+ // 'L'+ link.target.x+','+link.target.y; const dx = link.target.x - link.source.x, dy = link.target.y - link.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + link.source.x + "," + link.source.y + "A" + dr + "," + dr + " 0 0,1 " + link.target.x + "," + link.target.y; } simulation.on('tick', () => { gStations .attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')'); link.attr('d', path); }) return svg.node(); }36:[] 30:{"id":"d3141f6943a157b4","slug":"force-simulation-data-visualization-with-d3","title":"Force Simulation to visualize bikesharing network","thumbnail":"2332af167010c2406c9c891ddbef28db8c1ab228092fa00fa9fb5b31442b185f","access_level":"public","create_time":"$D2019-04-18T05:53:09.885Z","update_time":"$D2021-04-28T10:38:25.476Z","view_time":null,"first_public_time":"$D2019-04-18T05:54:08.742Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"3f139cfa303b0c24","login":"danielefadda","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2e4d5f1c8929dbcff080c076f08005795f71679d9246ee69d8e5111b06834b6c","tier":"starter_2024"},"version":237,"publish_version":237,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7b357fa951249c6","login":"danielefadda","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2e4d5f1c8929dbcff080c076f08005795f71679d9246ee69d8e5111b06834b6c","tier":null}],"members":[{"type":"individual","id":"e7b357fa951249c6","login":"danielefadda","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2e4d5f1c8929dbcff080c076f08005795f71679d9246ee69d8e5111b06834b6c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"eb8a56fab81f377e","slug":"dvva","title":"DVVA","owner":{"id":"3f139cfa303b0c24","login":"danielefadda","name":""}},"type":"notebook","body":{"title":"Force Simulation to visualize bikesharing network","cells":[{"id":0,"value":"md`# Force Simulation to visualize bikesharing network`","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":2,"value":"cNetwork = {\n let net = await d3.csv('https://raw.githubusercontent.com/rinziv/DVVA-2019/master/data_in/ciclipi_network.csv');\n return net\n .filter(d => d.StazPrelievo !== d.StazDeposito)\n .map(d => ({\n StazPrelievo: d.StazPrelievo,\n StazDeposito: d.StazDeposito,\n count: +d.count,\n idPrelievo : Math.round(+d.id_StazPrelievo),\n idDeposito: Math.round(+d.id_StazDeposito) \n }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`Simple aggregation of data accordingly to a key function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"volumesOut = d3.nest()\n.key(d => d.StazPrelievo)\n.rollup(v => d3.sum(v, d => d.count))\n.entries(cNetwork)\n.sort((a,b) => d3.descending(a.value, b.value));\n//.sort((a,b) => d3.ascending(a.value, b.value));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## Visualization in D3\nWe map each station count to a basic shape, a circle with area proportional to the volumes of bikes\n\nLet's start with the visualization of some figures on a SVG context`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"{\n let height = 300;\n // create the SVG container\n let svg = d3.select(html``)\n .attr('width', width)\n .attr('height', height);\n \n // create a layer or group\n let g = svg.append('g');\n g.append('circle')\n .attr('cx', width/2)\n .attr('cy', height/2)\n .attr('r', height/3);\n \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`We now add a distinct circle for each of our stations, using D3 paradigm: Enter, Exit, Update`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"{\n let height = 300;\n // create the SVG container\n let svg = d3.select(html``)\n .attr('width', width)\n .attr('height', height);\n \n // create a layer or group\n let gStations = svg.selectAll('g.station').data(volumesOut);\n gStations.exit().remove();\n \n let eStations = gStations.enter()\n .append('g')\n .classed('station', true);\n \n eStations\n .append('circle')\n .attr('cx', d => Math.random()*width) // we use an accessor function here\n .attr('cy', height/2)\n .attr('r', height/12);\n \n gStations = gStations\n .merge(eStations);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\n let height = 300;\n // create the SVG container\n let svg = d3.select(html``)\n .attr('width', width)\n .attr('height', height);\n \n // create a layer or group\n let gStations = svg.selectAll('g.station').data(volumesOut);\n gStations.exit().remove();\n \n let eStations = gStations.enter()\n .append('g')\n .classed('station', true);\n \n eStations\n .append('circle')\n .attr('cx', d => Math.random()*width) // we use an accessor function here\n .attr('cy', height/2)\n .attr('r', height/12)\n .attr('fill', 'red')\n .attr('fill-opacity', 0.4)\n .attr('stroke', 'red')\n .attr('stroke-width', 1);\n \n gStations = gStations\n .merge(eStations);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"{\n let height = 300;\n // create the SVG container\n let svg = d3.select(html``)\n .attr('width', width)\n .attr('height', height);\n \n // define scale for radius\n const r = d3.scaleSqrt()\n .domain([0, d3.max(volumesOut, d => d.value)])\n .range([0, 50]);\n \n // create a layer or group\n let gStations = svg.selectAll('g.station').data(volumesOut);\n gStations.exit().remove();\n \n let eStations = gStations.enter()\n .append('g')\n .classed('station', true);\n \n eStations\n .append('circle')\n .attr('cx', d => Math.random()*width) // we use an accessor function here\n .attr('cy', height/2)\n .attr('r', d => r(d.value))\n .attr('fill', 'red')\n .attr('fill-opacity', 0.4)\n .attr('stroke', 'red')\n .attr('stroke-width', 1);\n \n gStations = gStations\n .merge(eStations);\n\n return svg.node();\n}","pinned":false,"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":107,"value":"$32","pinned":false,"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"},{"id":135,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"volumesOut","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"