Skip to main content
SimilarExport ZIP
100%

6th visualisation

✓ Published2🌍 Public
Vvenkatabhaskaratetali@my.unt.edu
Last edited Apr 21, 2024
Created on Apr 18, 2024
Forked from 5th visualisation

This responsive scatter plot visualizes waste collection and treatment data across countries, comparing total waste collection coverage percentages against compost treatment percentages. The visualization uses d3.csv to load an integrated dataset from GitHub, then renders SVG rectangles with d3.scaleBand and d3.scaleLinear to create a grouped bar chart. Steelblue bars represent waste collection coverage, while orange bars show compost treatment rates, with tooltips via SVG title elements providing precise percentage values. The chart includes margins and axis styling for readability, and the total height calculation determines the y-axis domain.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot - RDG2018

This scatter plot displays monthly waste measurements in kilograms (WasteKgs) for 2018, sorted by month. The visualization uses React with D3 v6 for scales and SVG rendering, loading CSV data from a GitHub gist. It employs `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with reusable axis components and circle marks that include native SVG tooltips via the `<title>` element. Custom Poppins typography and teal circle styling give the chart a clean, modern appearance.

AAndres de la Garza
76% match
Loading thumbnail…

RESIDUOS

This visualization displays the composition of waste found on beaches, using a bubble chart where each circle represents a specific item and its size corresponds to the count of that item found. The data is grouped and colored by its broader category, such as plastics, paper, or metal, and hovering over a bubble reveals its exact category, subcategory, and count. The chart is built with D3.js v4, using the `d3.pack()` API to create the circle-packing layout and scaling the radii from the data's `N_item` values. The visualization also includes interactive mouseover effects that enlarge the circle and display a tooltip with the waste details, all rendered as SVG elements with custom styling and transitions.

IIzaskunLS
73% match
Loading thumbnail…

RESIDUOS

This visualization displays the composition of waste found on beaches, using a bubble chart where each circle represents a specific item and its size corresponds to the count of that item found. The data is grouped and colored by its broader category, such as plastics, paper, or metal, and hovering over a bubble reveals its exact category, subcategory, and count. The chart is built with D3.js v4, using the `d3.pack()` API to create the circle-packing layout and scaling the radii from the data's `N_item` values. The visualization also includes interactive mouseover effects that enlarge the circle and display a tooltip with the waste details, all rendered as SVG elements with custom styling and transitions.

IIzaskunLS
73% match
Loading thumbnail…

3rd visualisation

This example shows a grouped bar chart comparing coal consumption and greenhouse gas emissions across different years. Using D3.js v7, the code loads data from a CSV file, groups it by year, and renders steelblue bars for coal consumption alongside orange bars for emissions. The SVG chart uses d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, with d3.axisBottom and d3.axisLeft for tick marks.

Vvenkatabhaskaratetali@my.unt.edu
72% match
Loading thumbnail…

RESIDUOS

This visualization shows what types of waste are abandoned on beaches, using a bubble chart where each circle represents a specific item category. The size of each circle corresponds to the number of items found, and colors distinguish waste categories such as plastic, metal, paper, and sanitary products. The code uses D3.js v4 with the `d3.pack` layout to create the circle packing, and `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring. The data comes from a CSV file of beach sampling counts. Interactive mouseover effects enlarge circles and display a tooltip with the category, subcategory, and item count.

IIzaskunLS
72% match
Loading thumbnail…

RESIDUOS

This visualization shows the different types of waste found on beaches, categorized by material and item, using a bubble chart. The size of each circle corresponds to the number of items found, and the color indicates the category (e.g., plastic, metal). The code uses the `d3.csv` and `d3.hierarchy` APIs to process the data, while the `d3.pack()` layout arranges the bubbles. Hovering over a circle triggers a tooltip that displays the specific category and count. The chart is rendered as an SVG with animated mouseover effects.

IIzaskunLS
72% match
Loading thumbnail…

Activity 6

The visualization displays a horizontal bar chart ranking the populations of 30 countries in 2020, using a green fill for each bar and blue tick marks on a white background. Built with React and D3 version 5, it loads CSV data from a GitHub repository, transforms it with the `csv` function, and renders SVG rectangles via the `scaleBand` and `scaleLinear` scales, with axes drawn by custom `AxisBottom` and `AxisLeft` components.

KKritin Kesav
71% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of waste-collection metrics from a municipal dataset, showing how values like houses reached or dry waste collected are spread across recorded observations. The chart uses D3.js v6 to generate a bar chart, with React managing the component state and data loading via the `d3.json` method. The histogram displays frequency counts for each bin on the y-axis, while the x-axis represents the numeric range of the selected variable.

AAnimesh Nautiyal
71% match