31: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(); }32: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(); }33: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(); }34: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(); }35:[] 2f:{"title":"Force Simulation to visualize bikesharing network","cells":[{"id":0,"value":"md`# Force Simulation to visualize bikesharing network`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":19,"value":"md`Simple aggregation of data accordingly to a key function`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":107,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":135,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"volumesOut","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}