Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

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

This scatter plot compares yearly theater and concert visitor numbers in millions, using data embedded from a culture.csv file to reveal a general decline in both over time. It renders on a Canvas element using the Chart.js library, mapping theater visitors to the x-axis and concert visitors to the y-axis. The chart includes point labels in its tooltip callbacks, which display the year alongside the corresponding values, and uses axes with explicit titles for clarity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot that maps daily visitors on the x-axis against sales on the y-axis, with each point sized by a fixed radius. The visualization loads CSV data from a GitHub gist, parsing numeric fields for day, sales, profit, orders, and visitors. Built with D3 v6, the code uses scaleLinear for axes, extent to compute domains, and axisLeft/axisBottom for rendering ticks. The scatterPlot function follows a reusable pattern, making it configurable via method chaining for width, height, margins, and data accessors, while SVG circles are joined to the DOM using selectAll and data.

HHariniPotla@my.unt.edu
79% match
Loading thumbnail…

Fork of D3 scatterplot

This example presents three pie charts showing tourist visitor numbers for 2019, 2020, and 2021, with each chart displaying the distribution of visitors across different tourist places. It uses Chart.js to render the charts onto canvas elements, fetching the dataset from a remote text file and parsing the comma-separated values to extract yearly visitor counts. The code creates a separate chart for each year, assigning random background colors to each slice and placing the legend on the right side. The visualization highlights the relative popularity of tourist destinations across the three years.

Ssrividyamadas@gmail.com
78% match
Loading thumbnail…

Fork of Reusable Scatter Plot

This interactive scatter plot visualizes library book data, showing relationships between numeric attributes like borrow count, rating, pages, and year, with points colored by genre. Users can dynamically switch the X and Y axes via dropdown menus and adjust point radius with a slider control. The visualization is built using a reusable D3.js module with a closure-based API for configuring scales, axes, and accessors. It employs D3's `d3.csvParse` for data loading, `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for color encoding, and SVG rendering with hover tooltips.

Ppriyankachary1701@gmail.com
76% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays sales data over time, with a line connecting red circular markers on a steelblue stroke. The code uses the D3.js v6 API, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, to load CSV data and render an SVG. It includes axis labels and a custom Share Tech font. A separate `scatterPlot.js` module defines a reusable chart function with setters for configuration.

HHariniPotla@my.unt.edu
76% 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
76% match
Loading thumbnail…

Fork of Fork of area chart

This area chart shows film visitors per year in millions from 1990 to 2015, revealing a sharp decline in the early 1990s followed by a gradual recovery. The Chart.js library renders the visualization as an SVG or canvas line chart with a filled area beneath the curve, using smooth tension and hoverable data points. The code maps year data to the x-axis and visitor counts to the y-axis, with explicit axis labels and a legend.

Ssravya7136@gmail.com
76% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Bbhargavinalamothu@gmail.com
76% match
Loading thumbnail…

Fork of Reusable Canvas

A reusable scatter plot displays the relationship between two numeric variables from a CSV file, with steel-blue semi-transparent circles plotted against labeled axes. Built with D3 v6, the example demonstrates a modular architecture where the `scatterPlot` function encapsulates the chart logic, while `branding.js` handles data loading via `d3.csv` and passes parsed values to the plot. The SVG canvas resizes to 80% of the window width, and the plot is instantiated with configurable accessors for x and y values, margins, and point radius.

Ssrividyamadas@gmail.com
75% match