Tell us what works and what could be better. We read every submission.
@alvarorueda89·7 public vizzes
This scatter plot visualizes movie data, mapping IMDB rating on the x-axis and production budget on the y-axis. Each circle represents a movie, with its size encoding return on investment (ROI) and its color indicating genre (e.g., Action, Drama, Adventure) via a legend. Hovering over a circle highlights it in yellow and displays a tooltip with the movie name and ROI. The visualization uses D3 v4 with SVG rendering and smooth animations to support interactive exploration of the relationship between movie ratings, budgets, and profitability.
This interactive scatter plot visualizes movie data, plotting IMDb ratings on the x-axis against production budgets on the y-axis, with each point sized by return on investment (ROI) and colored by genre. Built with D3 v4, the SVG chart includes labeled axes for Rating and Production Budget, and a color legend generated using the d3-legend library. Hovering over a circle changes its fill to pink and displays a tooltip with the exact values. The visualization also includes a bold title and animated transitions, with data sourced from a Gist by alvarorueda89 and styled using the Open Sans font.
This visualization compares 26 movies by budget, box office revenue, ROI, and IMDb rating using a force-directed network layout. The code builds a d3.forceSimulation with nodes positioned by genre clusters and links sized by budget-revenue relationships. Each movie is labeled with its title, while axes encode ROI horizontally and rating vertically. The data comes from a gist CSV with genre, production budget, box office, and rating columns, rendered as SVG circles with color-coded genres. The simulation applies charge, link, and collision forces to arrange the nodes.
This example shows a small scatterplot of nine 2D points from a gist, mapping each x/y coordinate to a circle’s position. It uses D3’s `d3.forceSimulation` to gently nudge the circles into a stable layout, with the original data values drawn as faint gray dots behind the moving nodes. The visualization highlights how a force-directed simulation can reorganize raw coordinates into a readable cluster, while preserving the dataset’s numeric origins. Rendering relies on SVG circles and D3’s update/enter/exit pattern to bind the data.
This example visualizes a small dataset of nine x,y coordinates as a scatterplot, showing the distribution and relative spacing of points in a two-dimensional plane. The code uses D3.js, specifically `d3.scalePoint` to map the input values to pixel positions, and appends SVG circles for each data point. The data originates from a gistfile1.txt, parsed inline by the script. The rendering approach is straightforward, with fixed axes omitted and a plain SVG container, making the raw coordinate relationships the focus of the view.
This example shows a simple scatterplot of circles positioned according to x and y coordinates loaded from a remote CSV file. The circles are rendered as SVG elements with a uniform turquoise fill, and the data is bound using D3’s data join pattern. The code uses `d3.csv` to fetch the dataset, then applies enter, update, and exit selections to add, reposition, or remove circles dynamically. The visualization is built with D3 version 3.5.5 and displays all points within a fixed 250-by-250 pixel SVG canvas.
This example shows a simple scatterplot of circles positioned according to x and y coordinates loaded from a remote CSV file. The visualization uses D3.js version 3.5.5 to bind the data to SVG circle elements, with an enter-update-exit pattern defined in the function `a_name`. New circles are appended with a fixed radius of 15 pixels, while existing circles update their `cx` and `cy` attributes based on the data values. The circles are styled with a turquoise fill (`#40E0D0`), and the SVG canvas is set to 250 by 250 pixels.