Bubble chart

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_114":-5,"_63":16,"_115":-5,"_116":117,"_118":119},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":72,"_93":72,"_44":94,"_95":-7,"_96":52,"_97":50,"_98":-5,"_99":100,"_101":16,"_102":103,"_104":105,"_106":43,"_107":-7,"_69":108,"_71":109,"_110":-5,"_111":68,"_112":113},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":41,"_67":68,"_69":70,"_71":70},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/images/de97d8ab7555819592d52783947ee7f1255862caa1849f38a255514d21e0754b.png","sourceType","v3","originalUrl","https://vizhub.com/lakshmi-keerthi/b7fe1b3214f74dd4a17a0e03afc864d9","author","lakshmi-keerthi","id","86a75dc8bdbe4965ba353a79d4bd44c8","title","Hello VizHub","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-lakshmi-keerthi","accountType","user","email","keerthi16101996@gmail.com","displayName","Lakshmi Keerthi","avatar","https://avatars.githubusercontent.com/u/37924779?v=4","oauthProvider","github","oauthId","37924779","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791491328402,"updatedAt","b7fe1b3214f74dd4a17a0e03afc864d9","files",{"_75":76,"_77":78,"_79":80,"_81":82},"13913728",{"_83":91,"_85":92},"22993953",{"_83":89,"_85":90},"98593208",{"_83":87,"_85":88},"8dbc301e",{"_83":84,"_85":86},"name","index.html","text","\n\n\n \n \n Bubble chart\n \n \n \n \n

\n \n \n\n","bubbleChart.js","// set the dimensions and margins of the graph\nconst bc_margin = {\n top: 50,\n right: 400,\n bottom: 45,\n left: 75,\n },\n bc_width = 945 - bc_margin.left - bc_margin.right,\n bc_height = 472 - bc_margin.top - bc_margin.bottom;\n\n// append the svg object to the body of the page\nconst bc_svg = d3\n .select('#bubble_chart')\n .append('svg')\n .attr(\n 'width',\n bc_width + bc_margin.left + bc_margin.right,\n )\n .attr(\n 'height',\n bc_height + bc_margin.top + bc_margin.bottom,\n )\n .append('g')\n .attr(\n 'transform',\n `translate(${bc_margin.left},${bc_margin.top})`,\n );\n\n// read the data\nd3.csv('bubblechart.csv').then((data) => {\n // add chart title\n bc_svg\n .append('text')\n .attr('x', bc_width / 2)\n .attr('y', -20)\n .attr('text-anchor', 'middle')\n .style('font-size', '22px')\n .text(\n 'Correlation Between Torque, Horsepower, and MPG',\n );\n\n // add x axis\n const x = d3\n .scaleLinear()\n .domain([100, 700])\n .range([0, bc_width]);\n bc_svg\n .append('g')\n .attr('transform', `translate(0, ${bc_height})`)\n .call(d3.axisBottom(x));\n\n // add x axis label\n bc_svg\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('x', bc_width / 2)\n .attr('y', bc_height + 40)\n .text('Avg. Horsepower');\n\n // add y axis\n const y = d3\n .scaleLinear()\n .domain([0, 800])\n .range([bc_height, 0]);\n bc_svg.append('g').call(d3.axisLeft(y));\n\n // add y axis label:\n bc_svg\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('x', -bc_height / 2)\n .attr('y', -50)\n .text('Avg. Torque')\n .attr('transform', 'rotate(-90)');\n\n // add a scale for bubble size\n const z = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => +d.highway_mpg)])\n .range([1, 40]);\n\n // add a scale for bubble color\n const makes = Array.from(data, (d) => d.make);\n const makeColors = makes.map((el, i, arr) =>\n d3.interpolateTurbo(i / arr.length),\n );\n const myColor = d3\n .scaleOrdinal()\n .domain(makes)\n .range(makeColors);\n\n // ---------------------------//\n // tooltip //\n // ---------------------------//\n\n // -1- create a tooltip div that is hidden by default:\n const tooltip = d3\n .select('#bubble_chart')\n .append('div')\n .style('opacity', 0)\n .attr('class', 'tooltip')\n .style('background-color', 'black')\n .style('border-radius', '5px')\n .style('padding', '10px')\n .style('color', 'white')\n .style('font-family', 'sans-serif');\n\n // -2- create 3 functions to show / update (when mouse moves but stay on same circle) / hide the tooltip\n const showTooltip = (event, d) => {\n tooltip.transition().duration(200);\n tooltip\n .style('opacity', 1)\n .html('Make: ' + d.make)\n .style('left', event.x + 25 + 'px')\n .style('top', event.y + 25 + 'px');\n };\n const moveTooltip = (event, d) => {\n tooltip\n .style('left', event.x + 25 + 'px')\n .style('top', event.y + 25 + 'px');\n };\n const hideTooltip = (event, d) => {\n tooltip.transition().duration(200).style('opacity', 0);\n };\n\n // add dots\n\n bc_svg\n .append('g')\n .selectAll('dot')\n .data(data)\n .join('circle')\n .attr('class', 'bubbles')\n .attr('cx', (d) => x(d.horsepower))\n .attr('cy', (d) => y(d.torque))\n .attr('r', (d) => z(d.highway_mpg))\n .style('fill', (d) => myColor(d.make))\n .attr('stroke', 'black')\n .on('mouseover', showTooltip)\n .on('mousemove', moveTooltip)\n .on('mouseleave', hideTooltip);\n\n // ---------------------------//\n // legend //\n // ---------------------------//\n\n // add legend: circles\n const valuesToShow = [20, 40];\n const xCircle = 745;\n const xLabel = 810;\n bc_svg\n .selectAll('legend')\n .data(valuesToShow)\n .join('circle')\n .attr('cx', xCircle)\n .attr('cy', (d) => bc_height - 100 - z(d))\n .attr('r', (d) => z(d))\n .style('fill', 'none')\n .attr('stroke', 'black');\n\n // add legend: segments\n bc_svg\n .selectAll('legend')\n .data(valuesToShow)\n .join('line')\n .attr('x1', (d) => xCircle + z(d))\n .attr('x2', xLabel)\n .attr('y1', (d) => bc_height - 100 - z(d))\n .attr('y2', (d) => bc_height - 100 - z(d))\n .attr('stroke', 'black')\n .style('stroke-dasharray', '2,2');\n\n // add legend: labels\n bc_svg\n .selectAll('legend')\n .data(valuesToShow)\n .join('text')\n .attr('x', xLabel)\n .attr('y', (d) => bc_height - 100 - z(d))\n .text((d) => d)\n .style('font-size', '14px')\n .attr('alignment-baseline', 'middle');\n\n // legend title\n bc_svg\n .append('text')\n .attr('x', xCircle)\n .attr('y', bc_height - 100 + 30)\n .text('Highway MPG')\n .attr('text-anchor', 'middle');\n\n // add one dot in the legend for each name\n const size = 5;\n const allgroups = makes;\n bc_svg\n .selectAll('myrect')\n .data(allgroups)\n .join('circle')\n .attr('cx', 550)\n .attr('cy', (d, i) => 6 + i * (size + 7))\n .attr('r', 3)\n .style('fill', (d) => myColor(d));\n\n // add labels beside legend dots\n bc_svg\n .selectAll('mylabels')\n .data(allgroups)\n .enter()\n .append('text')\n .attr('x', 550 + size * 2)\n .attr('y', (d, i) => 10 + i * (size + 7))\n .style('fill', (d) => myColor(d))\n .text((d) => d)\n .attr('text-anchor', 'left')\n .style('alignment-baseline', 'middle')\n .style('font-size', '13px');\n});\n","style.css","html,\nbody {\n margin: 0;\n padding: 0;\n}\ntext {\n font-family: sans-serif;\n}\n\n.bubbles {\n opacity: 0.7;\n}\n.bubbles:hover {\n opacity: 1;\n stroke-width: 2px;\n}\n.tooltip {\n position: absolute;\n}\n","bubblechart.csv","make,horsepower,torque,highway_mpg\nScion,156.6153846,156,29.84615385\nMINI,160.9677419,155.0322581,33.87096774\nKia,179.7407407,170.6740741,30.94814815\nHonda,188.225,175.27,30.41\nVolkswagen,192.496124,210.4883721,30.19379845\nMitsubishi,195.3529412,196.1960784,26.68627451\nSubaru,205.2095238,200.8666667,26.53333333\nSaab,222.5423729,236.1864407,27.52542373\nLotus,231,168.0909091,26.36363636\nVolvo,247.2427184,254.2038835,25.7184466\nToyota,253.4492308,257.1446154,23.93846154\nAcura,262.8484848,239.2727273,25.84848485\nMercedes,280.21875,298.875,23.15625\nAudi,300.183908,297.908046,25.17241379\nLexus,301.6153846,278.9230769,25.25\nInfiniti,322.1294118,281.4235294,24.29411765\nCadillac,340.98,324.76,22.52\nBMW,347.1804511,349.5338346,24.32330827\nLand Rover,373.8571429,363.2857143,19.54285714\nPorsche,376.5490196,330.0588235,24\nMercedes-Benz,388.4285714,421.1428571,20.42857143\nMaserati,422.5,353.6666667,19.41666667\nJaguar,448.75,418.7954545,22.18181818\nAston Martin,470,413.6511628,18.44186047\nRolls-Royce,475,539.8,18.4\nMercedes-AMG,494.8333333,512.6666667,16.83333333\nAMG,525.9,527.7,18.9\nFerrari,540,434,16\nLamborghini,554.8,398,20\nBentley,577.4444444,576.3333333,16.22222222\nMaybach,599.8461538,720.9230769,16","slug","Exercise8_Tutorial4","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","e93a5afa39e647f7aebbe4b19f543f12","startCommitId","a89e19d89b3640a8b7d8a9338c33bf30","forkedFrom","forkedFromVisibility",1712740687000,1712745203000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]