31:T66d,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); const yG = svg.append("g").attr("stroke-width", 0); let node = svg.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.employee)) .attr("cy", d => y(d.country) + y.bandwidth() / 2) .attr("r", d => r(d[varSelector])) .attr("stroke", "#4d4d4d") .attr("stroke-width", 1) .attr("fill", d => colour(d.change)) .attr("opacity", 0.8); const simulation = d3.forceSimulation() .force("x", d3.forceX(d => x(d.employee))) .force("y", d3.forceY(d => y(d.country) + y.bandwidth() / 2)) .force("collide", d3.forceCollide(d => r(d[varSelector]) + 1).strength(0.3)); simulation.on("tick", () => { node .transition() .delay((d, i) => d.x) .ease(d3.easeLinear) .attr("cx", d => d.x) .attr("cy", d => d.y) }); invalidation.then(() => simulation.stop()); return Object.assign(svg.node(), { update(split) { let height = split ? 600 : 300; y.domain(split ? groups : groups.concat("ALL")); // workaround for updating the yAxis y.range(split ? [margin.top, height - margin.bottom] : [height / 2, height / 2]); let ticks = split ? groups : ["ALL"]; const t = svg.transition().duration(750); svg.transition(t).attr("viewBox", [0, 0, width, height]) ; yG.transition(t).call(yAxis, y, ticks); simulation.nodes(data); // update nodes simulation.alpha(1).restart(); // restart simulation } }); }32:T67a,

## Data Collection by Python
**1. Load packages** ~~~{.python} import requests from bs4 import BeautifulSoup import numpy as np import pandas as pd import re ~~~ **2. Collect data from the basic ranking table (Company names and 2021 revenues) from MPO website.** ~~~{.python} url = 'https://www.mpo-mag.com/issues/2021-07-01/view_top30/the-2021-mpo-top-30-medical-device-companies-report/' headers = {'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36'} result = requests.get(url, headers=headers) soup = BeautifulSoup(result.content, 'html.parser') ~~~ **3. Use the url in each cell to collect detailed information. Then put them together in one row for each company.** ~~~{.python} arr = [] rows = soup.find('table').find('tbody').find_all('tr') for row in rows: cols = row.find_all('td') p1, p2 = [e.text for e in cols] url = 'https://www.mpo-mag.com/' + cols[0].find('a')['href'] page = BeautifulSoup(requests.get(url, headers=headers).content, "html.parser") eles = [e for e in page.select_one('strong').children] total,preFiscal,pChange,employee,HQ = sum([x.split(':') for x in eles[2:11:2]], [])[::2] arr.append({ 'name':p1, 'revenue':p2, 'preFiscal':preFiscal, 'pChange' :pChange, 'employee':employee, 'headquarter':HQ, 'url':url}) ~~~ **4. Data cleaning and export as a CSV file (Attachment)**

33:T41d,tooltip = { chart const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("font-family", "roboto") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border-width", "1px") .style("border-radius", "0.6px") .style("padding", "5px") .style("opacity", 0.8); d3.selectAll("circle") .on("mouseover", function(){ return tooltip.style("visibility", "visible"); }) .on("mousemove", function(d){ return tooltip .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+10)+"px") .style("border", "4px solid #E0E0E0") .html(html_conv( d.company, d.rev2021, d.rev2020, d.change, d.employee, d.revpc ) )}) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }) .on('click', function(d){ window.open( d.url, '_blank' ) }); }34:T474,html ` pillCSS `35:[{"id":"fb554151a303ac868db96e8bea63654861334f391c8104f830b7fef22873f4dc5a7f3b3d967d462cc017b293bd961b8b830e8007687cb0bad9a03c8f04a69aaa","href":"https://static.observableusercontent.com/files/fb554151a303ac868db96e8bea63654861334f391c8104f830b7fef22873f4dc5a7f3b3d967d462cc017b293bd961b8b830e8007687cb0bad9a03c8f04a69aaa","name":"md_top30@3.csv","type":"text/csv","lastModified":1643076259795.744,"size":2697}] 2f:{"title":"2021 Top 30 Medical Device Companies","cells":[{"id":0,"value":"# 2021 Top 30 Medical Device Companies","pinned":false,"hidden":false,"mode":"md"},{"id":440,"value":"pills = {\n const pillData = ['d3.force', 'd3 Animation', 'Python Web Scraping'];\n return html `\n

\n ${pillData.map(d => '

'+d+'

')}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"> Medical Product Outsourcing (MPO) magazine recently released *\"The 2021 MPO Top 30 Medical Device Companies Report\"*. This visualization shows the detailed information of these companies - total revenue, profit change, revenue per capita, etc. MPO analyst insights and reports can be viewed by clicking each circle.\n\n> Python web scraping codes are provided in the \"Data Collection\" section.
\n\n> *Visualization idea borrowed from Splitting the bunch (V2)*","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"viewof varSelector = {\n const varSelector = select({\n title: \"Circle Size:\",\n options: [\n { label: \"Total Revenue\", value: \"rev2021\" },\n { label: \"Revenue per capita\", value: \"revpc\" }\n ],\n value: \"rev2021\"\n });\n // dd3.input.style.fontSize = \"30px\";\n // dd3.input.style.marginTop = \"8px\";\n return varSelector;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"toggle = {\n chart.update(false)\n return htl.html` chart.update(false)}>All Top 30\n chart.update(true)}>Split by Country`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"legend = Legend(d3.scaleSequential()\n .interpolator(d3.interpolateRdYlGn)\n .domain(d3.extent(data, d => d.change/100)), \n {title: 'Revenue Percentage Change Compared to 2020', \n tickFormat: \"+%\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"## Chart Elements","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"height = 300 // initial height","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"margin = ({top: 50, right: 150, bottom: 100, left: 120})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"groups = [...new Set(data.map(d => d.country))].sort((a,b) => b.localeCompare(a))","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.employee))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"y = d3.scaleBand()\n .domain(groups)\n .range([height / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0, ${margin.top})`)\n .call(d3.axisTop(x).ticks(4).tickFormat(d=>d/1000+'K'))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"fill\", \"#333\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Number of Employees →\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"yAxis = (g, scale = y, ticks = y.domain()) =>\n g\n .attr(\"transform\", `translate(${30}, 0)`)\n .call(d3.axisLeft(scale).tickValues(ticks))\n .call(g => g.style(\"text-anchor\", \"start\"))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"r = d3.scaleLinear()\n .domain(d3.extent(data, d => d[varSelector]))\n .range([4, 24])","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"colour = d3.scaleSequential().interpolator(d3.interpolateRdYlGn).domain(d3.extent(data, d => d.change))","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"function html_conv(company, rev2021, rev2020, change, employee, revpc) {\n const html_text = `\n \n\n

\n ${company}

\n Revenue 2021: ${rev2021}B
\n Revenue 2020: ${rev2020}B
\n Percent Change: 0 ? 'green': 'red'}>${change}%
\n Number of Employees: ${(employee/1000).toFixed(1)}K
\n Revenue per capital: ${revpc}K\n

\n \n

\n `\n return html_text\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"

\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"data = raw.map(d => ({...d, revpc: +(d.rev2021/d.employee*1000000).toFixed(1) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"raw = FileAttachment(\"md_top30@3.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"HTML = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"html`css\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"import { circleLegend } from \"@bayre/circle-legend\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}