31:Tce7,bubble_chart = (rawData) => { function createNodes(rawData) { const maxSize = d3.max(rawData, d => +d.amount); const radiusScale = d3.scalePow() .exponent(1/2.8) .domain([0, maxSize]) .range([0, 80]) const myNodes = rawData.map(d => ({ ...d, radius: radiusScale(+d.amount), value: +d.amount, x: Math.random() * 900, y: Math.random() * 800 })) return myNodes; } const width = 800; const height = 800; const centre = { x: width/2, y: height/2 }; let svg = null; let bubbles = null; let labels = null; let tooltip = null; let nodes = createNodes(rawData); function charge(d) { return Math.pow(d.radius, 2.0) * 0.01 } const forceStrength = 0.01*Math.sqrt(nodes.length); const rFactor = 1.5; const simulation = d3.forceSimulation() .force('charge', d3.forceManyBody().strength(charge)) .force('center', d3.forceCenter(centre.x, centre.y)) .force('x', d3.forceX().strength(forceStrength).x(centre.x)) .force('y', d3.forceY().strength(forceStrength).y(centre.y)) .force('collision', d3.forceCollide().radius(d => d.radius*rFactor)); simulation.stop(); const colorScale = d3.scaleLinear() .domain(d3.extent(nodes, d => d.radius)) .range(["#80D8FF", "#01579B"]) var showTooltip = function(event, d) { console.log(d3.pointer(event)) console.log(d) tooltip .transition() .duration(200) tooltip .style("opacity", 1) .html("Recipient: " + d.recipient) .style("left", (d3.pointer(event)[0]+10) + "px") .style("top", (d3.pointer(event)[1]+10) + "px") } var moveTooltip = function(event, d) { tooltip .style("left", (d3.pointer(event)[0]+10) + "px") .style("top", (d3.pointer(event)[1]+10) + "px") } var hideTooltip = function(d) { tooltip .style("left", -1000) .transition() .duration(200) .style("opacity", 0) } svg = d3.create("svg")//select("#svgContainer").append("svg") // .attr("viewBox", [0, 0, width, height]) .attr('width', width) .attr('height', height) tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("left", -1000) .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "black") .style("border-radius", "5px") .style("padding", "10px") .style("color", "white") const elements = svg.selectAll('.bubble') .data(nodes) .enter().append('g') .on("mouseover", showTooltip) .on("mousemove", moveTooltip) .on("mouseleave", hideTooltip) bubbles = elements .append('circle') .classed('bubble', true) .attr('r', d => d.radius*rFactor) .attr('fill', d => colorScale(d.radius)) .on("mouseover", function(d) { }) labels = elements .append('text') .attr('dy', '.3em') .style('text-anchor', 'middle') .style('font-size', 14) .style('fill', 'white') .text(d => d3.format("($,.2f")(d.amount)) simulation.nodes(nodes) .on('tick', ticked) .restart(); function ticked() { bubbles .attr('cx', d => d.x) .attr('cy', d => d.y) labels .attr('x', d => d.x) .attr('y', d => d.y) } return svg.node(); }32:T62a,data_map = [ 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=0&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=1208955486&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=1595990377&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=1540870297&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=1847422676&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=1813188786&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=1534724786&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=1233398269&single=true&output=csv', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTo3mgwCnvDwp0wMbVcW3eLLKOZxWFTKm3XHfEeQVy2nFEDgTCEtzPRYMirFd5pNJjAAabIizcAJfJP/pub?gid=534854169&single=true&output=csv' ]33:[] 2f:{"title":"Board of Curators","cells":[{"id":0,"value":"md`# Board of Curators`","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`# Charting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"viewof greenLength = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"render","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"render = {\n let person = 0;\n return html`\n\n\n

\n ${bubble_chart(bubble_data[`${greenLength}`])}\n

\n\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"cleaned = getData(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`# Data Wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"coors = 'https://cors-anywhere.herokuapp.com/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"getData = function(index) { \n return d3.csv(coors+data_map[index]).then((raw) => {\n return raw.map((function(d) {\n return {\n amount: +d.Amount,\n date: d.Date,\n recipient: d.Recipient\n }\n }))\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"buildOut = async function() {\n let out = [];\n data_map.forEach(async function(d, i) {\n await(getData(i)).then(function(d) {out.push(d)});\n })\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"data = buildOut()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"function combineRows(data) {\n \n var output = [];\n \n data.forEach(function(e) {\n var row = [];\n e.forEach(function(item) {\n var existing = row.filter(d => d.recipient === item.recipient);\n if (existing.length) {\n var existingIndex = row.indexOf(existing[0]);\n row[existingIndex].amount = +row[existingIndex].amount + +item.amount;\n } else {\n item.amount = +item.amount;\n row.push(item);\n }\n });\n output.push(row);\n });\n \n return output\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"bubble_data = combineRows(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}