31:Tb81,chart = { const svg = d3 .create("svg") .attr("width", ancho) .attr("height", height) .style("overflow", "visible"); svg.append("g").call(xAxis); //sim const simulation = d3 .forceSimulation(vaccinedLatest) .force( "x", d3.forceX((d) => x(d.people_fully_vaccinated_per_hundred)).strength(2) ) .force("y", d3.forceY((d) => y(d.continent)).strength(0.3)) .force( "collide", d3 .forceCollide((d) => size(d.people_fully_vaccinated) + padding + 0.8) .strength(0.7) ) .stop(); let i = 0; while (simulation.alpha() > 0.01 && i < 200) { simulation.tick(); i++; console.log(`${Math.round((100 * i) / 200)}%`); } //circles svg .selectAll("circle") .data(vaccinedLatest) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y + 5) .attr("r", (d) => size(d.people_fully_vaccinated)) .attr("fill", "rgb(87,183,163, .3)") .attr("stroke", "#57B7A3") .attr("stroke-opacity", 1) .attr("stroke-width", 1) .classed("bubbles", true) .on("click", function (event, d) { d3.selectAll(".bubbles") .attr("fill", "rgb(87,183,163, .3)") .attr("stroke", "#57B7A3"); d3.select(this) .attr("fill-opacity", 1) .attr("fill", "#8a9ace") .attr("stroke", "#8a9ace") .raise(); d3.select(".tooltipBubble").html( `In ${d.location} ${d.people_fully_vaccinated_per_hundred}% of its population is fully vaccinated` ); }) .on("mouseenter", function (event, d) { d3.selectAll(".bubbles") .attr("fill", "rgb(87,183,163, .3)") .attr("stroke", "#57B7A3"); d3.select(this) .attr("fill-opacity", 1) .attr("fill", "#8a9ace") .attr("stroke", "#8a9ace") .raise(); d3.select(".tooltipBubble").html( `In ${d.location} ${d.people_fully_vaccinated_per_hundred}% of its population is fully vaccinated` ); }); //names svg .selectAll(".grupo") .data(groups) .join("text") .attr("class", "grupo") .attr("x", 0) .attr("y", (d) => y(d) - 33) .attr("font-family", "'Open Sans', sans-serif") .style("font-size", "14px") .style("font-weight", "bold") .attr("text-align", "right") .attr("alignment-baseline", "right") .attr("z-index", -1000) .text((d) => d); //legend svg .append("g") .attr("transform", `translate(${ancho - 55},0)`) .call(legend); //title const ytitle = svg .append("text") .attr("y", height) .attr("x", (ancho - margin.right) / 2 + margin.left) .style("font", "12px 'Open Sans', sans-serif") .style("font-weight", "bold") .style("text-anchor", "middle") .text("% fully vaccinated →"); return svg.node(); }32:T8e2,// imported from @harrystevens/circle-legend for changing the font size legendCircle = function(context) { let scale, tickValues, tickFormat = d => d, tickSize = 5; function legend(context) { let g = context.select("g"); if (!g._groups[0][0]) { g = context.append("g"); } g.attr("transform", `translate(${[1, 1]})`); const ticks = tickValues || scale.ticks(); const max = ticks[ticks.length - 1]; g.selectAll("circle") .data(ticks.slice().reverse()) .enter() .append("circle") .attr("fill", "white") .attr("stroke", "#446078") .attr("cx", scale(max)) .attr("cy", scale) .attr("r", scale) .attr("align"); g.selectAll("line") .data(ticks) .enter() .append("line") .attr("stroke", "#446078") .attr("stroke-dasharray", "4, 2") .attr("x1", scale(max)) .attr("x2", tickSize - scale(max)) .attr("y1", d => scale(d) * 2) .attr("y2", d => scale(d) * 2); g.append("g") .selectAll("text") .data(ticks) .enter() .append("text") .attr("font-family", "'Open Sans', sans-serif") .attr("font-size", ".7em") .attr("text-anchor", "end") .style("fill", "#446078") .attr("dx", 3) .attr("dy", 4) .attr("x", tickSize - scale(max) - 5 ) .attr("y", d => scale(d) * 2) .text(tickFormat); g.append("g") .selectAll("text") .data(ticks.slice(0,1)) .enter() .append("text") .attr("font-family", "'Open Sans', sans-serif") .attr("font-size", ".7em") .attr("font-weight", "bold") .attr("text-anchor", "middle") .style("fill", "#446078") .attr("x", scale(max)) .attr("y", d => scale(d) - 15) .text("Immunized pop."); } legend.tickSize = function(_) { return arguments.length ? ((tickSize = +_), legend) : tickSize; }; legend.scale = function(_) { return arguments.length ? ((scale = _), legend) : scale; }; legend.tickFormat = function(_) { return arguments.length ? ((tickFormat = _), legend) : tickFormat; }; legend.tickValues = function(_) { return arguments.length ? ((tickValues = _), legend) : tickValues; }; return legend; }33:[] 2f:{"title":"Vaccination progress 💉","cells":[{"id":568,"value":"html`

Vaccination progress 💉

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"intro = html`\n

There are ${\n vaccinedLatest.length\n} countries or territories with part of their population vaccinated (2 doses)

\n\n

By continent, the distribution is as follows:\n

${group[0]}: ${group[1]}`\n)}

\n\n

As of ${d3.timeFormat(\"%B %e\")(\n total.date\n)} there are ${total.people_fully_vaccinated.toLocaleString(\n \"en-US\"\n)} people fully vaccinated 🥳

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"info = html`

Click ot hover a bubble for more information:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"credits = html`\n

\n Data from: \n \n Our World In Data\n \n dataset\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"ancho = d3.min([width, 950])","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"// Create a legend generator like so:\nlegend = legendCircle()\n .scale(\n d3\n .scaleSqrt()\n .domain([0, d3.max(vaccinedLatest, d => d.people_fully_vaccinated)])\n .range([2.5, 13])\n )\n .tickValues([2000000, d3.max(vaccinedLatest, d => d.people_fully_vaccinated)])\n .tickFormat(d => d3.format(\".2s\")(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"margin = ({\n left: 30,\n right: 10,\n top: 0,\n bottom: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"size = d3\n .scaleSqrt()\n .domain(pob_domain)\n .nice()\n .range([2.5, 13])","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom - 15})`)\n .call(d3.axisBottom(x).ticks(6))\n .call(g =>\n g\n .selectAll(\".tick line\")\n .clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"y2\", -height + 60)\n )\n .call(g => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"x = d3\n .scaleLinear()\n .domain([0, 100])\n .nice()\n .rangeRound([margin.left, ancho - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"y = d3.scalePoint()\n .domain(groups)\n .range([margin.top, height - margin.bottom - 15])\n .padding(.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"total = Object.assign({}, ...world)","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"world = rawData\n.filter(d => d.location === \"World\")\n.filter(d => d.people_fully_vaccinated > 0)\n.slice(length-1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"pob_domain = d3.extent(vaccinedLatest, d => d.people_fully_vaccinated)","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"conteo = d3.rollups(vaccinedLatest, v => v.length, d => d.continent).sort(([, a], [, b]) => d3.descending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"groups = d3.map(d3.group(vaccinedLatest, d => d.continent), d => d[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"vaccinedLatest = vaccinesRaw\n .map(d => d[d.length - 1])\n .sort((a, b) => b.people_fully_vaccinated_per_hundred - a.people_fully_vaccinated_per_hundred)","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"vaccinesRaw = d3\n .groups(vaccines, d => d.location)\n .map(([, rows]) => rows)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"vaccines = rawData\n .filter(d => d.people_fully_vaccinated_per_hundred > 0)\n .filter(d => d.iso_code.length === 3)\n .filter(d => d.location !== \"World\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"rawData = d3.csv(\n \"https://covid.ourworldindata.org/data/owid-covid-data.csv\",\n (d) => ({\n iso_code: d.iso_code,\n continent: d.continent,\n location: d.location,\n date: new Date(d.date),\n people_fully_vaccinated_per_hundred: +d.people_fully_vaccinated_per_hundred,\n population: +d.population,\n people_fully_vaccinated: +d.people_fully_vaccinated,\n pobreza: +d.extreme_poverty\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 590","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"padding = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"radius = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}