Skip to main content
SimilarExport ZIP
100%

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
TTarun Kumar Bosupally
Last edited Mar 28, 2024
Created on Mar 28, 2024

This reusable D3 scatter plot visualizes movie data from a CSV file, encoding each film’s runtime on the x-axis and its vote average on the y-axis. The chart uses SVG paths generated by `d3.symbol` to differentiate genres via a `scaleOrdinal` mapping to `d3.symbols`. Built with D3 v7, it loads data via `d3.csv` and dynamically creates scales and axes within a reusable `scatterPlot` function defined in the script.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot that visualizes a fictional movie dataset, mapping budget and revenue for a selection of films. The implementation is built using D3.js v7, where circles are rendered through SVG elements and positioned using linear scales. The code also includes a fork that displays the Palmer Penguins dataset, cycling through different measurement columns on the x-axis every two seconds using `setInterval`. The reusable chart pattern, inspired by Bostock’s approach, is demonstrated through a function that accepts data, attribute names, and a container ID to generate the visualization.

Rrohithannadurai@my.unt.edu
87% match
Loading thumbnail…

Reusable Scatter plot

This scatter plot visualizes movie performance metrics, including budget, worldwide earnings, and overseas revenue, with each point colored by box office verdict such as Blockbuster or Hit. The visualization cycles through different financial columns on the x-axis using `setInterval`, dynamically updating the scale and axes via the reusable `scatterPlot` function built with D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV using `d3.csv`, and circles are rendered in SVG with animation, while a legend shows verdict categories and their corresponding colors.

BBhavyaMammai
79% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Tarun_b

This interactive scatter plot visualizes fruit data loaded from a CSV file, plotting Weight against Sweetness. The visualization is built using a reusable chart module within the D3 v7 framework. The `scatterPlot.js` module defines a custom function that employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for axis rendering, and SVG elements for the plot. Data is fetched and parsed asynchronously with `d3.csv`, and the chart dimensions are set to fill the browser window. The points are rendered as steelblue circles with a fixed radius, demonstrating a clean, minimal design.

TTarun Kumar Bosupally
79% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes movie budgets against domestic gross earnings, with each circle representing a film. The chart uses D3 v6 to load CSV data and render SVG circles, with linear scales mapping budget to the x-axis and domestic gross to the y-axis. The code includes axis labels in red, a title, and interactive margins. D3’s `d3.csv` and `d3.autoType` handle data parsing, while `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` construct the visualization.

Mmadipadiga.raviteja@gmail.com
78% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between movie budget and domestic gross revenue, with each point representing a film. The visualization uses D3 v6 to load CSV data from a GitHub gist, scales the two variables linearly, and renders circles as SVG dots. The chart includes labeled axes, a centered title, and resizes dynamically to fit the browser window, with red axis labels and steelblue data points.

Mmadipadiga.raviteja@gmail.com
78% match
Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data with D3.js

This example displays movie ranking data loaded from a CSV file, showing the file size, row count, and column count on a styled HTML page. The visualization includes a custom SVG image created in Figma, rendered alongside the data summary. The page uses D3.js version 7 to fetch and parse the CSV via the `d3.csv` method, then computes the output with `d3.csvFormat` to determine file size. Styling is handled with a separate CSS file, and the SVG is embedded as an external image.

SSharmilaChowdhari
78% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data with D3.js

This visualization displays metadata about a movie ranking dataset loaded from a CSV file, showing the file size, row count, and column count. The webpage presents this information as text beneath a static SVG title image. The example uses D3.js version 7 and the `d3.csv` method to asynchronously fetch and parse the remote CSV data from a GitHub gist, while also using `d3.csvFormat` to calculate the file size in kilobytes. The page layout is styled with custom CSS and renders the results in a preformatted text element.

SSharmilaChowdhari
78% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot BT

This interactive scatter plot visualizes fruit data loaded from a CSV file, showing relationships between variables like retail price and yield. Points appear as different shapes—circles, triangles, and squares—based on the yield value. The x-axis automatically cycles through numeric columns every two seconds, animating the chart to compare different data dimensions. Built with reusable D3 code, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with SVG paths for point shapes.

TTarun Kumar Bosupally
77% match