Skip to main content
SimilarExport ZIP
100%

Activity6_Task4_Question

✓ Published0🌍 Public
VVarshith Peddineni
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example presents a bubble chart visualizing coffee consumption across ten countries, plotting per capita consumption on the x-axis against total consumption on the y-axis. Each circle’s radius encodes population size, with a tooltip showing the country name on hover. The visualization loads data from an inline CSV string, parsed with d3.csvParse, and renders as SVG using D3 v7 scales and selection methods. A legend identifies each country by color, and axis labels clarify the measured variables.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6-Q4

This bubble chart visualizes coffee production data from a CSV file, showing yield (kg per hectare) on the x-axis, area harvested (hectares) on the y-axis, and production volume (kg) encoded by bubble size and color. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleSqrt for scaling axes and bubble radii, and d3.scaleSequential with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, displaying each country’s production details. The chart also includes a bubble-size legend (500k, 1M, 2M kg) and is rendered with SVG elements and animation-ready transition support.

Tthoutunikhitha@gmail.com
83% match
Loading thumbnail…

Task_8_Q4

This bubble chart displays the population of the first ten countries from a CSV dataset, with each circle’s position on the x-axis representing the country and the y-axis showing population value, while the radius and color encode the same population figure and the country’s numeric code, respectively. A categorical color legend maps country codes to distinct hues. Built with D3 v7, the visualization uses `d3.csv` for loading data, `scaleBand` and `scaleLinear` for axes, `scaleSqrt` for circle size, and `scaleOrdinal` with `d3.schemeCategory10` for coloring. SVG rendering includes rotated country labels on the bottom axis, a left population axis, chart titles, and a custom legend.

DDipesh
81% match
Loading thumbnail…

Activity6_Question4.9

This example displays a bubble chart comparing GDP and average life expectancy across ten countries, with bubble size scaled to population and colors mapped to country-specific values. Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load the dataset, `scaleLinear` and `scaleSqrt` for positioning and radius, and `d3.axisBottom`/`axisLeft` for axes. A custom legend lists each country with its corresponding color swatch, and labels identify the axes and chart title.

Mmasters200128@gmail.com
80% match
Loading thumbnail…

Activity6_Task4_Qus4

This bubble chart visualizes the correlation between GDP per capita, population, and life expectancy across ten countries using D3 v7’s `d3.csv`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs. Bubbles are positioned by GDP (x-axis) and life expectancy (y-axis), with radius encoding population and color assigned per country. Animated SVG circles support interactive tooltips on mouseover and mouseleave events, revealing detailed numeric values for each nation. The visualization reads from the included `countries.csv` dataset and renders entirely in the browser via SVG.

Aamarnadhkari98@gmail.com
80% match
Loading thumbnail…

Activity6_Task4

This interactive D3 bubble chart visualizes global population data from a `countries.csv` file, representing each country as a circle whose radius encodes population via a square-root scale. Users can switch between grouping modes—combining all countries, grouping by continent, anchoring at country centers, or sorting by population—and toggle between color-coded continents and country flag patterns. The visualization leverages `d3.forceSimulation` for physics-based layout, with dynamic translation of the continent legend and animated transitions between groupings, all rendered as SVG with event-driven mouseover tooltips displaying country names and formatted population values.

Hhemanthdummy999@gmail.com
80% match
Loading thumbnail…

Activity6_Task4_Q4_9

This bubble chart visualizes the relationship between daily coding hours, coffee consumption, and age range for a group of respondents from Lebanon. Each circle represents a person, positioned by their reported hours and coffee cups per day, with size scaled to coffee intake and color indicating age group. The visualization uses D3.js loaded via CDN, employing `d3.select`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csvParse` to process inline data. Hovering reveals a tooltip with detailed information, rendered as an SVG with animated chart elements.

HHema Tummapala
80% match
Loading thumbnail…

Activity6_Task4

This example shows a bubble chart comparing beverages on glucose levels (x-axis) and rating (y-axis), with bubble size representing calories and color indicating beverage brand across seven groups like Sprite, Fanta, and Pepsi. It loads data from a CSV file using `d3.csv` and renders in SVG via D3 v7, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.schemeSet1` for color encoding, and includes separate legends for calorie sizes and brand colors.

Hhemanthmaddila13@gmail.com
79% match
Loading thumbnail…

Activity6_Task4

This bubble chart example visualizes data from a CSV file, encoding two quantitative variables as plot positions and point sizes. The implementation uses the D3.js library’s scale functions and SVG circle elements. The code reads `bubblechart.csv` to load the underlying dataset, then maps rows to circles whose x/y coordinates and radii reflect measured values. The rendering relies on standard SVG coordinate attributes and D3’s data-binding methods. The interactive viewport is set up with a fixed width and height.

Kkeerthanachinthalapally@gmail.com
79% match