Skip to main content
SimilarExport ZIP
100%

Demos

✓ Published0🌍 Public
DDarienLiang
Last edited Nov 23, 2016
Created on Oct 13, 2016

This interactive scatterplot lets users explore horror movie monsters by swapping the X and Y axes between four attributes—physical strength, fear factor, killing power, and horror rating—via dropdown menus. The visualization, built with D3.js v3 and SVG, uses linear scales to map the chosen attributes to circle positions, with each monster represented as a white-bordered circle. A tooltip using the d3-tip library appears on hover, while the green header and sidebar follow a cohesive Raleway-styled design. The underlying data is hardcoded as an array of monster objects.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes movie data, comparing three variables—budget, gross revenue, and IMDB score—through user-selectable dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as animated SVG circles. Each axis is controlled via a dropdown menu, and points transition smoothly into position over one second, with axis labels and tick marks generated dynamically. The data is sourced from a local CSV file.

Ssourcebox-bug
70% match
Loading thumbnail…

Scatter Plot with X Y Menus

This interactive scatter plot displays U.S. mortality statistics, letting users choose which demographic attributes or death types to plot on the x- and y-axes via ReactDropdown menus. The code uses the d3.csv loader, d3.scaleLinear, and d3.extent to parse and scale data from a Gist, then renders SVG circles and axes using React components such as AxisBottom, AxisLeft, and Marks. Only points matching a hard-coded "Total" age group are visible, with all other circles rendered at zero radius.

PPeter Maida
69% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot maps video game sales across regions against critic ratings, with each point's shape and color encoding genre. The visualization cycles through different x-axis metrics—North American, European, and Japanese sales, then rating—every two seconds, dynamically updating the scales and axes. Built with D3 6.7.0, it leverages `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while custom SVG paths create genre-based shapes for data points. The code loads CSV data from a remote URL and uses the `select` API to manage SVG rendering.

Ssatishnarne99@gmail.com
69% match
Loading thumbnail…

Document

This visualization presents a multi-panel exploration of the TMDB 5000 movie dataset using D3 v5, rendered as SVG with animated transitions. It combines three coordinated chart types: a scatter plot comparing budget and popularity, a bar chart for average vote versus vote count, and a time series showing release date versus runtime. The time plot includes an overlaid line chart showing the count of movies per year, along with animated circles that draw the data points sequentially. The visualizations are linked so that interacting with one plot updates the others, enabling cross-filtering of the dataset. The layout divides the available width and height into quadrants, with the time plot spanning the bottom half and the scatter and bar charts sharing the top half. The design uses a minimal black-and-white aesthetic with white axes, labels, and strokes on a transparent background.

AAlexDaGr8
69% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes death statistics by year, with each point representing a demographic group’s death count. The color legend encodes sex, and hovering over a legend item fades non-matching points while highlighting the selected category. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Data comes from a Gist CSV file, though sex, ethnicity, and age dropdowns remain non-functional.

PPeter Maida
68% match
Loading thumbnail…

Movie Stats Scatter Plot Iteration 4

This interactive scatter plot displays movie statistics from the data.csv file, allowing users to toggle genre filters via checkboxes and select which attributes (e.g., IMDB rating, Revenue, Runtime) map to the x- and y-axes through radio buttons. D3 v7 powers the scales, axes, and circle rendering, with genres color-coded and hover events showing the movie title. The implementation uses d3.scaleLinear, d3.axisBottom/axisLeft, and d3.csvParse to load data and update the visualization through a state-driven design.

KKyle?
68% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays movie ratings and attributes from a Movies Dataset, allowing users to explore relationships between continuous variables. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, with the chart updating dynamically. The visualization uses React for state management and rendering, D3 v5 scaleLinear for axis scaling, and ReactDropdown for the menu controls. Data loads asynchronously via d3.csv, and circles render in SVG with built-in tooltips showing tick-formatted values on hover.

VVamsi Bhargav Sukamanchi
68% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the D3 v5 gallery displays car attributes from the UCI Auto MPG dataset, with dropdown menus controlling the x- and y-axis variables. Users select columns like horsepower or weight to update the axes, and points animate to their new positions over two seconds using chained transition and delay methods. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and SVG circles with opacity, while custom dropdown menu functions bind change events to trigger re-renders.

YYF
68% match