30:T102b,chart = { const svg = this ? d3.select(this) : create_svg(); function create_svg() { const svg = d3.select(DOM.svg(width, height)).style("font", "14px Montserrat"); //background svg .append("rect") .attr("width", "100%") .attr("height", "100%") .style("fill", "#F5F5F2"); svg.append("g"); return svg; } const t = svg.transition() .duration(1000); const g = svg.select("g"); g.selectAll('circle') .data(freedom_year, d => d.countries) //is this right? maybe this is why update doesn't work? .join( enter => enter.append("circle") .attr("class", "bubble") .attr("id", (d, i) => "point-" + i) .attr("fill-opacity", 0) .attr("fill", d => colorScale(d.region_simple)) .attr("cx", width/2 - margin.left) .attr("cy", height/2 - margin.bottom) .attr("r", 0) .call(enter => enter.transition(t) .attr("fill-opacity", 0.75) .attr("cx", d => xScale(d.population)) .attr("cy", d => yScale(d.gdp_ppp_cap)) .attr("r", d => aScale(d.pf_score))), update => update .call(update => update.transition(t) .attr("cx", d => xScale(d.population)) .attr("cy", d => yScale(d.gdp_ppp_cap)) .attr("r", d => aScale(d.pf_score))), exit => exit .call(exit => exit.transition(t) .attr("r", 0) .style("fill-opacity", 0) .remove()) ); let limVoronoi = d3.distanceLimitedVoronoi() .x(d => xScale(d.population)) .y(d => yScale(d.gdp_ppp_cap)) .limit(25) svg.append("g") .selectAll("path") .data(limVoronoi(freedom_year)) .join("path") .attr("d", (d, i) => d.path) //.datum((d, i) => d.point) //what is this for? .attr("id", (d, i) => "voronoi-" + i) //.style("stroke", "steelblue") .style("fill", "none") .style("pointer-events", "all") .on("mouseover", tooltipMouseOver) .on("mouseout", tooltipMouseOut) //x axis svg.append("g") .call(xAxis); //y axis svg.append("g") .call(yAxis); /* //x grid lines svg.append("g") .attr("class", "grid") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .attr("stroke-opacity", 0.1) .call(make_x_gridlines() .tickSize(-height+margin.top+margin.bottom) .tickFormat("") ) //y grid lines svg.append("g") .attr("class", "grid") .attr("transform", "translate(" + margin.left + ",0)") .attr("stroke-opacity", 0.1) .call(make_y_gridlines() .tickSize(-width + margin.left + margin.right) .tickFormat("") ) */ yield svg.node(); //color legend svg.append("g") .attr("transform", "translate(" + (width - margin.right + 20) + ",100)") .call(legend) //x axis label svg.append("text") .attr("class", "text") .attr("transform", "translate(" + (width/2) + "," + (height - 20) + ")") .style("text-anchor", "middle") .style("font-size", "20px") .text("Population"); //y axis label svg.append("text") .attr("class", "text") .attr("transform", "translate(" + (margin.left/4) + "," + (height/2) + ")rotate(-90)") .style("text-anchor", "middle") .style("font-size", "20px") .text("GDP (PPP) per capita"); //title svg.append("text") .attr("class", "text") .attr("transform", "translate(0," + margin.top/3 + ")") .style("text-anchor", "left") .style("font-size", "25px") .text("Personal freedom score for world countries") //subtitle svg.append("text") .attr("class", "text") .attr("transform", "translate(0," + margin.top/1.6 + ")") .style("text-anchor", "left") .style("font-size", "20px") .style("font-style", "italic") .text("Bubbles are colored by region and sized by personal freedom score") }31:Taf6,//bubble legend, from Nadieh Bremer //http://bl.ocks.org/nbremer/801c4bb101e86d19a1d0 function bubbleLegend(wrapperVar, scale, sizes, titleName) { let legendSize1 = sizes[0], legendSize2 = sizes[1], legendSize3 = sizes[2], legendCenter = 0, legendBottom = 50, legendLineLength = 25, textPadding = 5, numFormat = d3.format(","); wrapperVar.append("text") .attr("class","legendTitle") .attr("transform", "translate(" + legendCenter + "," + 0 + ")") .attr("x", 0 + "px") .attr("y", 0 + "px") .attr("dy", "1em") .text(titleName); wrapperVar.append("circle") .attr('r', scale(legendSize1)) .attr('class',"legendCircle") .attr('cx', legendCenter) .attr('cy', (legendBottom-scale(legendSize1))); wrapperVar.append("circle") .attr('r', scale(legendSize2)) .attr('class',"legendCircle") .attr('cx', legendCenter) .attr('cy', (legendBottom-scale(legendSize2))); wrapperVar.append("circle") .attr('r', scale(legendSize3)) .attr('class',"legendCircle") .attr('cx', legendCenter) .attr('cy', (legendBottom-scale(legendSize3))); wrapperVar.append("line") .attr('class',"legendLine") .attr('x1', legendCenter) .attr('y1', (legendBottom-2*scale(legendSize1))) .attr('x2', (legendCenter + legendLineLength)) .attr('y2', (legendBottom-2*scale(legendSize1))); wrapperVar.append("line") .attr('class',"legendLine") .attr('x1', legendCenter) .attr('y1', (legendBottom-2*scale(legendSize2))) .attr('x2', (legendCenter + legendLineLength)) .attr('y2', (legendBottom-2*scale(legendSize2))); wrapperVar.append("line") .attr('class',"legendLine") .attr('x1', legendCenter) .attr('y1', (legendBottom-2*scale(legendSize3))) .attr('x2', (legendCenter + legendLineLength)) .attr('y2', (legendBottom-2*scale(legendSize3))); wrapperVar.append("text") .attr('class',"legendText") .attr('x', (legendCenter + legendLineLength + textPadding)) .attr('y', (legendBottom-2*scale(legendSize1))) .attr('dy', '0.25em') .text("$ " + numFormat(Math.round(legendSize1/1e9)) + " B"); wrapperVar.append("text") .attr('class',"legendText") .attr('x', (legendCenter + legendLineLength + textPadding)) .attr('y', (legendBottom-2*scale(legendSize2))) .attr('dy', '0.25em') .text("$ " + numFormat(Math.round(legendSize2/1e9)) + " B"); wrapperVar.append("text") .attr('class',"legendText") .attr('x', (legendCenter + legendLineLength + textPadding)) .attr('y', (legendBottom-2*scale(legendSize3))) .attr('dy', '0.25em') .text("$ " + numFormat(Math.round(legendSize3/1e9)) + " B"); }32:T610,function tooltipMouseOver(d, i) { let el = d3.select("body"); let div = el .append("g") .append("div") .attr("class", "tooltip") .style("opacity", 0); div .html(` Country: ${d.datum['countries']}
Personal Freedom Score: ${decFormat(d.datum['pf_score'])}
Population: ${bigFormat(d.datum['population'])}
GDP per capita: ${bigFormat(d.datum['gdp_ppp_cap'])} `) .style("opacity", 0.9) .style("left", (d3.event.pageX + 28) + "px") .style("top", (d3.event.pageY - 28) + "px"); let el2 = d3.selectAll("circle#point-"+i); el2 .transition() .duration(100) .style("fill-opacity", 0.9) .style("stroke", "black") .style("stroke-width", "1px") .style("stroke-opacity", 0.7); let guides = d3.select("svg") .append("g") .attr("class", "guides") .style("pointer-events", "none"); guides .append("line") .attr("x1", el2.attr("cx")) .attr("x2", el2.attr("cx")) .attr("y1", el2.attr("cy")) .attr("y2", height - margin.bottom) .style("stroke", el2.attr("fill")) .style("opacity", 0) .transition() .duration(200) .style("opacity", 0.7); guides .append("line") .attr("x1", el2.attr("cx")) .attr("x2", margin.left) .attr("y1", el2.attr("cy")) .attr("y2", el2.attr("cy")) .style("stroke", el2.attr("fill")) .style("opacity", 0) .transition() .duration(200) .style("opacity", 0.7); } 33:T258b,d3.distanceLimitedVoronoi = function () { /////// Internals /////// var voronoi = d3.voronoi().extent([[-1e6,-1e6], [1e6,1e6]]); var limit = 20; // default limit var context = null; // set it to render to a canvas' 2D context function _distanceLimitedVoronoi (data) { if (context!=null) { //renders into a Canvas context.beginPath(); voronoi.polygons(data).forEach(function(cell) { distanceLimitedCell(cell, limit, context); }); return true; } else { //final viz is an SVG return voronoi.polygons(data).map(function(cell) { return { path: distanceLimitedCell(cell, limit, d3.path()).toString(), datum: cell.data }; }); } } /////////////////////// ///////// API ///////// /////////////////////// _distanceLimitedVoronoi.limit = function(_) { if (!arguments.length) { return limit; } if (typeof _ === "number") { limit = Math.abs(_); } return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.x = function(_) { if (!arguments.length) { return voronoi.x(); } voronoi.x(_); return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.y = function(_) { if (!arguments.length) { return voronoi.y(); } voronoi.y(_); return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.extent = function(_) { if (!arguments.length) { return voronoi.extent(); } voronoi.extent(_); return _distanceLimitedVoronoi; }; //exposes the underlying d3.geom.voronoi //eg. allows to code 'limitedVoronoi.voronoi().triangle(data)' _distanceLimitedVoronoi.voronoi = function(_) { if (!arguments.length) { return voronoi; } voronoi = _; return _distanceLimitedVoronoi; }; _distanceLimitedVoronoi.context = function(_) { if (!arguments.length) { return context; } context = _; return _distanceLimitedVoronoi; }; /////////////////////// /////// Private /////// /////////////////////// function distanceLimitedCell (cell, r, context) { var seed = [voronoi.x()(cell.data), voronoi.y()(cell.data)]; if (allVertecesInsideMaxDistanceCircle(cell, seed, r)) { context.moveTo(cell[0][0], cell[0][1]); for (var j = 1, m = cell.length; j < m; ++j) { context.lineTo(cell[j][0], cell[j][1]); } context.closePath(); return context; } else { var pathNotYetStarted = true; var firstPointTooFar = pointTooFarFromSeed(cell[0], seed, r); var p0TooFar = firstPointTooFar; var p0, p1, intersections; var openingArcPoint, lastClosingArcPoint; var startAngle, endAngle; //begin: loop through all segments to compute path for (var iseg=0; isegMath.pow(r, 2)); } function angle(seed, p) { var v = [p[0] - seed[0], p[1] - seed[1]]; // from http://stackoverflow.com/questions/2150050/finding-signed-angle-between-vectors, with v1 = horizontal radius = [seed[0]+r - seed[0], seed[0] - seed[0]] return Math.atan2( v[1], v[0]); } } function segmentCircleIntersections (A, B, C, r) { /* from http://stackoverflow.com/questions/1073336/circle-line-segment-collision-detection-algorithm */ var Ax = A[0], Ay = A[1], Bx = B[0], By = B[1], Cx = C[0], Cy = C[1]; // compute the euclidean distance between A and B var LAB = Math.sqrt(Math.pow(Bx-Ax, 2)+Math.pow(By-Ay, 2)); // compute the direction vector D from A to B var Dx = (Bx-Ax)/LAB; var Dy = (By-Ay)/LAB; // Now the line equation is x = Dx*t + Ax, y = Dy*t + Ay with 0 <= t <= 1. // compute the value t of the closest point to the circle center (Cx, Cy) var t = Dx*(Cx-Ax) + Dy*(Cy-Ay); // This is the projection of C on the line from A to B. // compute the coordinates of the point E on line and closest to C var Ex = t*Dx+Ax; var Ey = t*Dy+Ay; // compute the euclidean distance from E to C var LEC = Math.sqrt(Math.pow(Ex-Cx, 2)+Math.pow(Ey-Cy, 2)); // test if the line intersects the circle if( LEC < r ) { // compute distance from t to circle intersection point var dt = Math.sqrt(Math.pow(r, 2)-Math.pow(LEC, 2)); var tF = (t-dt); // t of first intersection point var tG = (t+dt); // t of second intersection point var result = []; if ((tF>0)&&(tF0)&&(tG d.population)).nice()\n .range([margin.left, width-margin.right]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"yScale = d3.scaleLog()\n .domain(d3.extent(freedom_year, d => d.gdp_ppp_cap)).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"aScale = d3.scaleSqrt()\n .domain([3, d3.max(freedom_year, d => d.pf_score)])\n .range([0, 12]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"pf_min = d3.min(freedom_year, d=>d.pf_score)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"//this is too many colors, change somehow later\ncolorScale = d3.scaleOrdinal()\n .domain(d3.map(freedom_year, d => d.region_simple).keys())\n .range(colors);","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(xScale))\n .call(g => g.select(\".domain\").remove());","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yScale))\n .call(g => g.select(\".domain\").remove());","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"function make_x_gridlines() {\t\t\n return d3.axisBottom(xScale)\n .ticks(5)\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"function make_y_gridlines() {\t\t\n return d3.axisLeft(yScale)\n .ticks(3)\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"width = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"margin = ({top:100, right:250, bottom: 70, left: 60})","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"colors = [\"#596F7E\", \"#168B98\", \"#ED5B67\", \"#fd8f24\",\"#919c4c\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"minYear = d3.min(freedom, d => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"maxYear = d3.max(freedom, d => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"decFormat = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"bigFormat = d3.format(\",.0f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`## Legends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"legend = d3_legend.legendColor()\n .scale(colorScale)\n .title(\"Region\")\n //.labelWrap(30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"md`## Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"function tooltipMouseOut(d, i) {\n let el = d3.selectAll(\".tooltip\");\n \n el.each(function() {\n\t\tel.remove();\n\t}); \n let el2 = d3.selectAll(\"circle#point-\"+i);\n \n el2\n .transition()\n .duration(100)\n .style(\"fill-opacity\", 0.75)\n .style(\"stroke-width\", \"0px\");\n \n d3.select(\".guides\").remove();\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Data and libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"d3_legend = require('https://bundle.run/d3-svg-legend@2.25.6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"import { slider, radio, text } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`### Distance limited voronoi\n\nCouldn't get require to work for this`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`I'm going to filter the data so we're only looking at the values for 2016.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"freedom = d3.csv(\"https://gist.githubusercontent.com/will-r-chase/16827fa79e02af9e3a0651fb0d79b426/raw/92b321a8bc4d98e463156ef03a5da5cf05065704/freedom_clean.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"freedom_year = freedom.filter(obj => {return obj.year === selectedYear})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}