Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot

✓ Published1🌍 Public
Kkhushburajan2015@gmail.com
Last edited Oct 26, 2025
Created on Oct 26, 2025

This reusable D3 scatter plot visualizes cryptocurrency market capitalization against 24-hour trading volume for ten major assets, with circle size encoding market dominance percentage. It uses logarithmic scales for both axes to accommodate the wide value ranges, while a square-root scale maps dominance to circle radius. The chart is built as a reusable factory function following the Bostock pattern, utilizing D3 v7's `scaleLog`, `scaleSqrt`, `scaleLog` APIs, and feature-based selection for efficient SVG updates. The code includes data parsing via `d3.csvParse` and `d3.autoType`, with hover tooltips displaying asset-specific details.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A D3.js v6 scatter plot visualizes the relationship between trading volume and market capitalization for Bitcoin, using data loaded from a remote CSV file. The chart renders as an SVG with circle marks, linear scales for both axes, and formatted tick labels using `d3.format`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while rotated x-axis labels and a bold chart title are added via SVG text elements. The plot reveals the correlation between these two cryptocurrency metrics across the dataset.

Ssenthilrajendran1
82% match
Loading thumbnail…

Multi Cryptocurrency - Volume vs Market Cap

This interactive scatter plot visualizes the relationship between trading volume and market capitalization for selected cryptocurrencies (BTC, AAVE, XMR, LTC). Built with D3 v6 and SVG, it uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Users select a cryptocurrency via radio buttons, triggering a redraw through `d3.selectAll` and `.remove()`. The plot includes rotated x-axis tick labels and a color-coded legend. Data is loaded via `d3.csv` from a remote dataset, with axes formatted using `d3.format(".2s")`.

Ssenthilrajendran1
77% match
Loading thumbnail…

Pie Chart with Labels & Legend

This pie chart displays the market share of major cryptocurrencies by market capitalization, with labels and a legend identifying each asset. It uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme to generate SVG paths and text labels. Labels for slices under 4% are hidden to reduce clutter, while a legend on the right lists all assets. The data is parsed inline from a CSV snapshot using `d3.csvParse` and `d3.autoType`.

Kkhushburajan2015@gmail.com
76% match
Loading thumbnail…

Fork of Fork of Dataset1_crypto_analysis

This horizontal bar chart visualizes the market capitalization of various cryptocurrencies, sorted in descending order from Bitcoin to The Graph. Built with D3 v7, the visualization uses `scaleBand` and `scaleLinear` to map data from a CSV file containing cryptocurrency metrics. The code employs `axisTop` and `axisBottom` to display market cap labels, while `selectAll` and `.join()` efficiently render the bars and their corresponding name and value labels.

BBismark Kofi Owusu Sarfo
75% match
Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the relationship between trading dataset attributes, cycling through variable pairs every three seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. The chart animates by dynamically updating its `xValue` and `yValue` accessors, demonstrating the flexibility of a chainable scatter plot function. Data loads from a CSV via `d3.csv` with numeric parsing.

UUday Kiran
75% match
Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the relationship between trading dataset attributes, cycling through variable pairs every three seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. The chart animates by dynamically updating its `xValue` and `yValue` accessors, demonstrating the flexibility of a chainable scatter plot function. Data loads from a CSV via `d3.csv` with numeric parsing.

UUday Kiran
75% match
Loading thumbnail…

Greater than 100k Alexa Rank and less 10m market cap

This scatterplot maps cryptocurrencies whose Alexa rank exceeds 100,000 against their market cap, which is under $10 million. Each circle is sized by market cap and colored by coin, with a smooth animated transition between the v2 and v3 datasets when the user clicks a button. Built with D3 v4, the SVG visualization uses logarithmic axes to accommodate the wide range of values, and the animation highlights changes in the crypto landscape over time.

WWill Carter
74% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes daily metrics from a CSV file, letting users map any numeric column to the X, Y, and size channels and a categorical column to color. Built with D3 v7, the visualization uses `d3.zoom` for pan-and-zoom with scale extent bounds, `d3.scaleLinear` and `d3.scaleSqrt` for axes and point sizing, and `d3.scaleOrdinal` with the `schemeSet2` palette for coloring. Hovering a point triggers a tooltip with the row’s values, while the axis labels update dynamically based on selected column names. The chart resets to its original view when the user clicks the "Reset Zoom" button.

Mmaddulanagasanjana@gmail.com
74% match