Bubble Chart

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_114":-5,"_62":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":54,"_56":57,"_58":59,"_60":61,"_62":16,"_63":-7,"_64":41,"_65":66,"_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/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/NagaBinduKondaveeti/acf29635c5ac4f6ba086b79c12285468","author","NagaBinduKondaveeti","id","86a75dc8bdbe4965ba353a79d4bd44c8","title","Hello VizHub","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-nagabindukondaveeti","accountType","user","email","nagabinduk2023@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/157336080?v=4","oauthProvider","github","oauthId","157336080","isAdmin","stripeCustomerId","handle","handleNormalized","nagabindukondaveeti","lifecycleEmailsEnabled",true,"createdAt",1791491335841,"updatedAt","acf29635c5ac4f6ba086b79c12285468","files",{"_75":76,"_77":78,"_79":80,"_81":82},"33596098",{"_83":91,"_85":92},"36162193",{"_83":89,"_85":90},"8dbc301e",{"_83":87,"_85":88},"b809c858",{"_83":84,"_85":86},"name","styles.css","text","html,\nbody {\n margin: 0;\n padding: 0;\n}\n\ntext {\n font-family: sans-serif;\n}\n\n.bubbles {\n opacity: 0.7;\n}\n\n.bubbles:hover {\n opacity: 1;\n stroke-width: 2px;\n}\n\n.tooltip {\n position: absolute;\n}\n","index.html","\n\n \n \n Bubble Chart\n \n \n \n \n

\n \n \n\n","iris.csv","sepal_length,sepal_width,petal_length,petal_width,species\n5.1,3.5,1.4,0.2,setosa\n4.9,3.0,1.4,0.2,setosa\n4.7,3.2,1.3,0.2,setosa\n4.6,3.1,1.5,0.2,setosa\n5.0,3.6,1.4,0.2,setosa\n5.4,3.9,1.7,0.4,setosa\n4.6,3.4,1.4,0.3,setosa\n5.0,3.4,1.5,0.2,setosa\n4.4,2.9,1.4,0.2,setosa\n4.9,3.1,1.5,0.1,setosa\n5.4,3.7,1.5,0.2,setosa\n4.8,3.4,1.6,0.2,setosa\n4.8,3.0,1.4,0.1,setosa\n4.3,3.0,1.1,0.1,setosa\n5.8,4.0,1.2,0.2,setosa\n5.7,4.4,1.5,0.4,setosa\n5.4,3.9,1.3,0.4,setosa\n5.1,3.5,1.4,0.3,setosa\n5.7,3.8,1.7,0.3,setosa\n5.1,3.8,1.5,0.3,setosa\n5.4,3.4,1.7,0.2,setosa\n5.1,3.7,1.5,0.4,setosa\n4.6,3.6,1.0,0.2,setosa\n5.1,3.3,1.7,0.5,setosa\n4.8,3.4,1.9,0.2,setosa\n5.0,3.0,1.6,0.2,setosa\n5.0,3.4,1.6,0.4,setosa\n5.2,3.5,1.5,0.2,setosa\n5.2,3.4,1.4,0.2,setosa\n4.7,3.2,1.6,0.2,setosa\n4.8,3.1,1.6,0.2,setosa\n5.4,3.4,1.5,0.4,setosa\n5.2,4.1,1.5,0.1,setosa\n5.5,4.2,1.4,0.2,setosa\n4.9,3.1,1.5,0.1,setosa\n5.0,3.2,1.2,0.2,setosa\n5.5,3.5,1.3,0.2,setosa\n4.9,3.1,1.5,0.1,setosa\n4.4,3.0,1.3,0.2,setosa\n5.1,3.4,1.5,0.2,setosa\n5.0,3.5,1.3,0.3,setosa\n4.5,2.3,1.3,0.3,setosa\n4.4,3.2,1.3,0.2,setosa\n5.0,3.5,1.6,0.6,setosa\n5.1,3.8,1.9,0.4,setosa\n4.8,3.0,1.4,0.3,setosa\n5.1,3.8,1.6,0.2,setosa\n4.6,3.2,1.4,0.2,setosa\n5.3,3.7,1.5,0.2,setosa\n5.0,3.3,1.4,0.2,setosa\n7.0,3.2,4.7,1.4,versicolor\n6.4,3.2,4.5,1.5,versicolor\n6.9,3.1,4.9,1.5,versicolor\n5.5,2.3,4.0,1.3,versicolor\n6.5,2.8,4.6,1.5,versicolor\n5.7,2.8,4.5,1.3,versicolor\n6.3,3.3,4.7,1.6,versicolor\n4.9,2.4,3.3,1.0,versicolor\n6.6,2.9,4.6,1.3,versicolor\n5.2,2.7,3.9,1.4,versicolor\n5.0,2.0,3.5,1.0,versicolor\n5.9,3.0,4.2,1.5,versicolor\n6.0,2.2,4.0,1.0,versicolor\n6.1,2.9,4.7,1.4,versicolor\n5.6,2.9,3.6,1.3,versicolor\n6.7,3.1,4.4,1.4,versicolor\n5.6,3.0,4.5,1.5,versicolor\n5.8,2.7,4.1,1.0,versicolor\n6.2,2.2,4.5,1.5,versicolor\n5.6,2.5,3.9,1.1,versicolor\n5.9,3.2,4.8,1.8,versicolor\n6.1,2.8,4.0,1.3,versicolor\n6.3,2.5,4.9,1.5,versicolor\n6.1,2.8,4.7,1.2,versicolor\n6.4,2.9,4.3,1.3,versicolor\n6.6,3.0,4.4,1.4,versicolor\n6.8,2.8,4.8,1.4,versicolor\n6.7,3.0,5.0,1.7,versicolor\n6.0,2.9,4.5,1.5,versicolor\n5.7,2.6,3.5,1.0,versicolor\n5.5,2.4,3.8,1.1,versicolor\n5.5,2.4,3.7,1.0,versicolor\n5.8,2.7,3.9,1.2,versicolor\n6.0,2.7,5.1,1.6,versicolor\n5.4,3.0,4.5,1.5,versicolor\n6.0,3.4,4.5,1.6,versicolor\n6.7,3.1,4.7,1.5,versicolor\n6.3,2.3,4.4,1.3,versicolor\n5.6,3.0,4.1,1.3,versicolor\n5.5,2.5,4.0,1.3,versicolor\n5.5,2.6,4.4,1.2,versicolor\n6.1,3.0,4.6,1.4,versicolor\n5.8,2.6,4.0,1.2,versicolor\n5.0,2.3,3.3,1.0,versicolor\n5.6,2.7,4.2,1.3,versicolor\n5.7,3.0,4.2,1.2,versicolor\n5.7,2.9,4.2,1.3,versicolor\n6.2,2.9,4.3,1.3,versicolor\n5.1,2.5,3.0,1.1,versicolor\n5.7,2.8,4.1,1.3,versicolor\n6.3,3.3,6.0,2.5,virginica\n5.8,2.7,5.1,1.9,virginica\n7.1,3.0,5.9,2.1,virginica\n6.3,2.9,5.6,1.8,virginica\n6.5,3.0,5.8,2.2,virginica\n7.6,3.0,6.6,2.1,virginica\n4.9,2.5,4.5,1.7,virginica\n7.3,2.9,6.3,1.8,virginica\n6.7,2.5,5.8,1.8,virginica\n7.2,3.6,6.1,2.5,virginica\n6.5,3.2,5.1,2.0,virginica\n6.4,2.7,5.3,1.9,virginica\n6.8,3.0,5.5,2.1,virginica\n5.7,2.5,5.0,2.0,virginica\n5.8,2.8,5.1,2.4,virginica\n6.4,3.2,5.3,2.3,virginica\n6.5,3.0,5.5,1.8,virginica\n7.7,3.8,6.7,2.2,virginica\n7.7,2.6,6.9,2.3,virginica\n6.0,2.2,5.0,1.5,virginica\n6.9,3.2,5.7,2.3,virginica\n5.6,2.8,4.9,2.0,virginica\n7.7,2.8,6.7,2.0,virginica\n6.3,2.7,4.9,1.8,virginica\n6.7,3.3,5.7,2.1,virginica\n7.2,3.2,6.0,1.8,virginica\n6.2,2.8,4.8,1.8,virginica\n6.1,3.0,4.9,1.8,virginica\n6.4,2.8,5.6,2.1,virginica\n7.2,3.0,5.8,1.6,virginica\n7.4,2.8,6.1,1.9,virginica\n7.9,3.8,6.4,2.0,virginica\n6.4,2.8,5.6,2.2,virginica\n6.3,2.8,5.1,1.5,virginica\n6.1,2.6,5.6,1.4,virginica\n7.7,3.0,6.1,2.3,virginica\n6.3,3.4,5.6,2.4,virginica\n6.4,3.1,5.5,1.8,virginica\n6.0,3.0,4.8,1.8,virginica\n6.9,3.1,5.4,2.1,virginica\n6.7,3.1,5.6,2.4,virginica\n6.9,3.1,5.1,2.3,virginica\n5.8,2.7,5.1,1.9,virginica\n6.8,3.2,5.9,2.3,virginica\n6.7,3.3,5.7,2.5,virginica\n6.7,3.0,5.2,2.3,virginica\n6.3,2.5,5.0,1.9,virginica\n6.5,3.0,5.2,2.0,virginica\n6.2,3.4,5.4,2.3,virginica\n5.9,3.0,5.1,1.8,virginica","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('iris.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('Sepal Length vs. Sepal Width by Species');\n\n // add x axis with descriptive label\n const x = d3\n .scaleLinear()\n .domain([3, 8])\n .range([0, bc_width]);\n bc_svg\n .append('g')\n .attr('transform', `translate(0, ${bc_height})`)\n .call(d3.axisBottom(x).ticks(8).tickSizeOuter(0))\n .append('text')\n .attr('x', bc_width / 2)\n .attr('y', 40)\n .attr('text-anchor', 'middle')\n .text('Sepal Length (cm)'); // Update x-axis label\n\n // add y axis with descriptive label\n const y = d3\n .scaleLinear()\n .domain([1.5, 5])\n .range([bc_height, 0]);\n bc_svg\n .append('g')\n .call(d3.axisLeft(y).ticks(6).tickSizeOuter(0))\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('x', -bc_height / 2)\n .attr('y', -50)\n .text('Sepal Width (cm)') // Update y-axis label\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.petal_length)])\n .range([1, 40]);\n\n // add a scale for bubble color\n const species = Array.from(\n new Set(data.map((d) => d.species)),\n );\n const speciesColors = d3\n .scaleOrdinal()\n .domain(species)\n .range(d3.schemeCategory10);\n\n // 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 // functions to show / update / hide the tooltip\n const showTooltip = (event, d) => {\n tooltip.transition().duration(200);\n tooltip\n .style('opacity', 1)\n .html(\n `Species: ${d.species}
Sepal Length: ${d.sepal_length}
Sepal Width: ${d.sepal_width}`,\n )\n .style('left', event.x + 25 + 'px')\n .style('top', event.y + 25 + 'px');\n };\n\n const moveTooltip = (event, d) => {\n tooltip\n .style('left', event.x + 25 + 'px')\n .style('top', event.y + 25 + 'px');\n };\n\n const hideTooltip = (event, d) => {\n tooltip.transition().duration(200).style('opacity', 0);\n };\n\n // add dots\n bc_svg\n .selectAll('dot')\n .data(data)\n .join('circle')\n .attr('class', 'bubbles')\n .attr('cx', (d) => x(d.sepal_length))\n .attr('cy', (d) => y(d.sepal_width))\n .attr('r', (d) => z(d.petal_length))\n .style('fill', (d) => speciesColors(d.species))\n .attr('stroke', 'black')\n .attr('stroke-width', 1)\n .style('opacity', 0.7)\n .on('mouseover', showTooltip)\n .on('mousemove', moveTooltip)\n .on('mouseleave', hideTooltip);\n\n // add legend: circles\n const legend = bc_svg\n .selectAll('.legend')\n .data(species)\n .enter()\n .append('g')\n .attr('class', 'legend')\n .attr('transform', (d, i) => `translate(0,${i * 20})`);\n\n legend\n .append('circle')\n .attr('cx', bc_width + 100)\n .attr('cy', 0)\n .attr('r', 6)\n .style('fill', (d) => speciesColors(d));\n\n legend\n .append('text')\n .attr('x', bc_width + 120)\n .attr('y', 5)\n .text((d) => d)\n .style('font-size', '14px')\n .attr('alignment-baseline', 'middle');\n});\n","slug","DV TASK-8 Q4","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","34d93596c0a9445e87928f81822d6c77","startCommitId","795f6405fc2a4020a707eeb70ccb7a56","forkedFrom","forkedFromVisibility",1712792137000,1712792294000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]