Skip to main content
SimilarExport ZIP
100%

Fork of Reusable Scatter PLot

✓ Published0🌍 Public
Sserebryanaya.n@gmail.com
Last edited Mar 6, 2023
Created on Mar 6, 2023

This interactive scatter plot visualizes JavaScript libraries by their GitHub stars and minified file size, with circle radius and color encoding additional data dimensions. Built with React and D3 v7, it uses `scaleSqrt` for proportional radii, `scaleSequential` with `interpolateCool` for color mapping, and renders SVG circles with tooltips. Data loads from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`, with margins configured for layout.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Componenet

This example demonstrates a reusable D3.js chart component implemented in React, visualizing JavaScript libraries by their GitHub stars (x-axis) and minified file size (y-axis). Circle size and fill color encode star count, with a tooltip revealing library name and metrics. Built with D3's `scaleSqrt`, `scaleLinear`, `axisBottom`, and `axisLeft`, it loads data from a CSV via `d3.csv` and renders SVG, leveraging a fluent chart factory with configurable accessors for margins and data fields.

Sserebryanaya.n@gmail.com
85% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through four different feature pairs on the x-axis every few seconds. The plot uses D3.js v6 within a React framework, rendering SVG shapes for data points, axes, and a color-coded legend for species. The code implements a reusable scatterPlot function with scaleLinear scales and axis generators, while also appending custom text labels and legend markers directly to the SVG.

RRobFaj
83% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset with color-coded markers for species. Built with React and D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles for rendering. An animated `setInterval` cycles the x-axis through different flower measurements. CSS styling uses the Share Tech font, and the legend labels each species with distinctive colors.

Hhm0421
83% match
Loading thumbnail…

Java Script Libraries

This example visualizes popular JavaScript libraries as circles arranged along a horizontal axis. Each circle’s area corresponds to the library’s GitHub star count, while its lightness reflects the minified file size in kilobytes, with darker colors indicating larger codebases. Hovering reveals a tooltip with the library name, star count, and size. The code uses D3’s `csv`, `scaleSqrt`, `scaleLinear`, and `max` to load and scale data from a remote CSV, then renders SVG circles with appended `title` elements for interactivity.

Sserebryanaya.n@gmail.com
82% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis every few seconds with animated transitions. The chart uses D3.js (v6) within a React framework, rendering SVG circles colored by species (setosa, versicolor, virginica) with a custom legend and axis labels. The code leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `setInterval` to dynamically update the visualization, pulling data from a CSV via `d3.csv`. A custom reusable scatter plot module manages the chart’s core structure and rendering.

VVineela Reddy
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. It uses d3.csv to load data from a GitHub Gist, d3.scaleOrdinal for color mapping, and d3.scaleLinear for axes. A setInterval cycles through different variable pairings every two seconds, animating the chart via reusable scatterPlot component that updates SVG circles.

MMar-99
82% match
Loading thumbnail…

Fork of React & D3 Starter

A simple scatter plot displays ten labeled points from a small CSV dataset, mapping x and y coordinates with linear scales. The visualization demonstrates a modular React and D3 integration where React manages the SVG container and D3 handles the rendering logic. The `viz.js` module uses `d3.scaleLinear` and `d3.extent` to compute scales, while `axes.js` employs `d3.axisLeft` and `d3.axisBottom` for chart axes. Data flows through a custom `useData` hook that loads and parses the CSV with `d3.csv`. The code separates concerns across files, making it a practical starting template for scalable projects.

Tteissierducros
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates an interactive scatter plot of the Iris flower dataset, cycling through four different variable pairings every two seconds. Each circle's color encodes the species, with a legend identifying the three categories. Built with React and D3 v6, it uses `d3.csv` for data loading, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for the coordinate axes. The visualization renders as SVG with CSS animations, transitioning between views via `setInterval`.

MMar-99
81% match