Skip to main content
SimilarExport ZIP
100%

Fork of Responsive Scatter Plot

✓ Published0🌍 Public
RRakesh Kumar Chekuri
Last edited Mar 21, 2024
Created on Mar 21, 2024

This example visualizes global GDP data as a responsive scatter plot using Chart.js, rendering points on a canvas. It shows yearly GDP values fetched from a CSV file hosted on GitHub, with point colors encoding value ranges: orange below 30 trillion, blue between 30 and 60 trillion, and green above 60 trillion. The code parses the CSV with `split` and `parseInt`/`parseFloat`, filters invalid rows, and configures axes labeled "Year" and "Value". The chart uses the `scatter` type, with `backgroundColor` set per data point for categorical coloring.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter project

This scatter plot visualizes the relationship between country code (on the x-axis) and GDP (on the y-axis) for a dataset of international tourism receipts, with each country represented as a semi-transparent red circle. The visualization uses the D3 v5 library, specifically importing functions like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scale the data. The data is loaded from a CSV file and processed in JavaScript, with the GDP values converted to numbers before being rendered as SVG circles within a 960x500 pixel canvas.

Rrallabandisushen@gmail.com
78% match
Loading thumbnail…

Fork of line chart

This example shows how a line chart can be used to display country GDP over time, with each line representing a different country. It uses Chart.js to render the chart on an HTML canvas element, fetching CSV data from a remote URL and parsing it into datasets. The chart is configured with labeled axes for GDP and Year, and the code explicitly sets axis labels via both Chart.js options and DOM manipulation. The rendering approach relies on Canvas 2D through Chart.js, with a fixed chart size of 800 by 400 pixels.

Mmukundakrishna.r@gmail.com
77% match
Loading thumbnail…

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Aadventuresenglish.info@gmail.com
77% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example displays a scatter plot of annual gold prices, charting Date on the x-axis against USD on the y-axis. It uses d3.csv to load the data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render the axes. The SVG circles are appended using a data join with attributes for position and fill. The chart is styled with a custom background color and large tick labels via CSS.

Ttejasviteegala@my.unt.edu
76% match
Loading thumbnail…

Fork of Fork of 3D Scatter Plot

A 3D scatter plot visualizes economic indicators as colored spheres positioned by x, y, and z attributes from a CSV file. The visualization slowly rotates continuously, while users can pan to adjust the viewing angle. Built with Three.js for WebGL rendering and D3 for data loading and scaling, the example uses D3's `scaleLinear`, `extent`, `csv`, `schemeCategory10`, and `zoom` APIs. Points are rendered as canvas-generated sprites with distinct colors from D3's categorical color scheme.

RRahulSai05
76% match
Loading thumbnail…

Scatter Plot of Loading US GDP Data with axes

This example uses a D3.js scatter plot to visualize annual US GDP data, plotting the year on the x-axis against GDP in current dollars on the y-axis. The visualization loads data from a GitHub-hosted CSV file sourced from the Bureau of Economic Analysis. The code leverages D3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs to build scales and axes, with data parsed via `csvParse` and rendered as circles. A title labels the chart, and axes are annotated with descriptive text.

SSeekerzero
75% 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
75% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of the reusable scatter plot visualizes average wage data by country, comparing annual values from 2000 to 2010. It employs a `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a CSV using `d3.csv` and rendered as steelblue circles using SVG. The chart is structured as a reusable function with getter/setter methods for configuration, following the Towards Reusable Charts pattern.

Nnagasai.mandalapu@gmail.com
75% match