Skip to main content
SimilarExport ZIP
100%

reusable

✓ Published0🌍 Public
Sshreelasya.bezawada@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025

This interactive scatter plot visualizes city-level energy metrics, comparing population against CO₂ emissions while using color to represent renewable energy adoption buckets (low, medium, high). The chart cycles through five different x-axis variables every three seconds, including electricity consumption, renewable percentage, and temperature, with smooth updates via D3’s data joins. Built with d3.v7, the reusable scatterPlotFactory pattern manages scales, axes, and a categorical color legend, rendering animated SVG marks that re-position as the axis changes. The dataset is fetched from a remote CSV and parsed client-side.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot

This visualization explores global city energy and demographic data using a reusable D3 scatter plot component. It displays cities as colored symbols (triangles, squares, diamonds, circles) based on their renewable energy adoption, with a legend categorizing values from low to very high. The example animates by cycling the X-axis through population, temperature, CO2 emissions, and renewable energy percentage every three seconds, while the Y-axis remains electricity consumption. The code imports D3 v6 modules via `select`, `text`, `csvParse`, `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` to build the custom SVG visualization, reading data from a gist-hosted CSV.

Sshreelasya.bezawada@gmail.com
91% match
Loading thumbnail…

reusable

This reusable scatter plot shows the relationship between electricity consumption, average temperature, population size, and renewable energy percentage across a dataset of countries. The visualization uses SVG circles whose x and y positions map to electricity consumption and temperature, while circle radius encodes population and color encodes renewable energy share through a green quantized scale. The chart is built with D3 v7, featuring axes with grid lines, axis labels, and hover tooltips. The code implements a factory function that encapsulates margins, scales, and rendering logic, making the chart configuration-driven and reusable for different datasets.

Sshreelasya.bezawada@gmail.com
89% match
Loading thumbnail…

Reusable Scatter Plot (CO₂ vs GDP, 2025)

This reusable scatter plot compares GDP per capita against CO₂ emissions for countries in 2025, with circle size encoding population and color distinguishing regions. Built with D3 v7, the chart renders as SVG and uses d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to map data dimensions. Interactive tooltips appear on mouseover, showing country details such as renewable energy percentage, while data is loaded from a CSV file.

Vvunnamnandini13@gmail.com
79% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive visualization presents a reusable scatter plot comparing healthy lifestyle metrics from a 2021 dataset of 44 cities, including sunshine hours, pollution index, and life expectancy. Built with React and D3 v7, the chart renders as SVG and uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for gridlines. The reusable `reusableScatterPlot` function accepts configurable accessors for x and y values, labels, and tooltips, allowing multiple charts to be generated from the same dataset. A hover tooltip displays city-specific values for the selected variables.

Ssravya7136@gmail.com
78% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an animated scatter plot of temperature data over time, cycling through multiple cities from the Iris Dataset. It visualizes yearly temperature readings (in Kelvin) for each city, with circles colored by city and positioned along the x-axis for year and y-axis for temperature. The visualization uses D3.js v7, loading data via `d3.csv`, parsing dates with `d3.timeParse`, and rendering SVG circles with scales like `d3.scaleLinear` and `d3.scaleOrdinal`. A `setInterval` triggers periodic updates, redrawing the plot for each city every two seconds.

YYashwanth0311
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot uses D3.js to visualize global population data, cycling through life expectancy, GDP per capita, population, and year on the x-axis every two seconds. The plot leverages `scaleLinear` for axes, animated circles with `attr`, and dynamic re-rendering via the `scatterPlot` component, which updates scales and axes through `svg.call()` as the x-value changes.

Ppavan vasamsetti
77% match
Loading thumbnail…

Reusable Bar Chart

This reusable bar chart, built with D3 v3, visualizes CO2 emissions, education levels, and employment-to-population ratios across 24 countries, using an animated, multi-series dataset. It is implemented as a configurable D3 plugin via d3.svg.barchart, rendering to SVG with smooth transitions. The chart supports customization of margins, dimensions, scales, padding, animation duration, tick formatting, and accessor functions for the x- and y-values, as well as optional domain setters. A subtle animation introduces bars, which rise with a transition, and axes animate into place, including rotated x-axis labels. Hovering reveals values. This example was forked from Doug Dowson's reusable chart pattern.

AAdlopez2016
77% match
Loading thumbnail…

Reusable Bar Chart

This reusable bar chart, built with D3 v3, visualizes CO2 emissions, education levels, and employment-to-population ratios across 24 countries, using an animated, multi-series dataset. It is implemented as a configurable D3 plugin via d3.svg.barchart, rendering to SVG with smooth transitions. The chart supports customization of margins, dimensions, scales, padding, animation duration, tick formatting, and accessor functions for the x- and y-values, as well as optional domain setters. A subtle animation introduces bars, which rise with a transition, and axes animate into place, including rotated x-axis labels. Hovering reveals values. This example was forked from Doug Dowson's reusable chart pattern.

AAdlopez2016
77% match