Tell us what works and what could be better. We read every submission.
@adamfknapp·31 public vizzes
A Bootstrap carousel displays a sequence of three placeholder images, each a solid color block, with left and right arrow controls for manual navigation. The example relies on jQuery 2.2.4 and Bootstrap 3.3.6's carousel JavaScript plugin, initializing the carousel with `data-ride="slide"` and `data-interval="false"` to prevent auto-advancing. The `carousel-control` links trigger previous and next slides via the `data-slide` attribute, while the active slide is marked by the `.active` class on the `item` div. The layout is constrained by a wrapper set to 800 pixels wide, with a light gray page background.
This scatter plot animation explores the relationship between the percentage of women in Congress and the number of movie tickets sold per year from 2000 to 2013, with each point representing a year. Points are rendered as SVG circles and transition smoothly between years, drawing from two CSV datasets—one containing film records with Bechdel test results and the other with yearly demographic data. The animation highlights trends in women’s congressional representation against box-office attendance, with the points shifting over time to reveal patterns across the 14-year span.
This simple line graph plots stock closing prices over time from a CSV dataset with date and value columns. The visualization uses d3.v3 with an SVG canvas, a time-scaled x-axis, and a linear y-axis, rendering the data as a single steelblue path. The code demonstrates core D3 concepts including `d3.time.format` for date parsing, `d3.time.scale` and `d3.scale.linear` for coordinate ranges, and `d3.svg.line` to generate the line geometry from the parsed data points.
This line chart plots the daily closing price of a financial asset over time, with dates ranging from late March to early May 2012. The visualization uses an SVG canvas and D3 v3 to render the data, employing `d3.time.scale` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.line` to create the path. The axes are drawn with `d3.svg.axis`, and the data is loaded from a CSV file containing date and close value pairs. The chart features a steelblue line with grey axis ticks and labels.
This line chart displays societal attitude survey data from 1990 to 2016, plotting the percentage of respondents agreeing that “a working mother’s relationship with her children can be as warm and secure” as a non-working mother’s. The SVG visualization uses D3.js v3 with `d3.svg.line` for the path, `d3.time.scale` for the time axis, and `d3.svg.axis` for tick rendering. Data loads from a local CSV file via `d3.csv`, with axes labeled “Time” and the response percentage.
This example visualizes the Bechdel Test results for the top 25 films of 2000 and 2001, using a scatter plot where each film is positioned by release year and rank. The SVG visualization animates as points appear, with data loaded from a CSV file. Each point is colored by the film’s Bechdel Test result (Pass, Fail, or No Data), offering a quick comparison of gender representation across popular movies. The chart is built with D3 v3 and includes smooth transitions, making the scatter plot interactive and easy to explore.
This example visualizes the relationship between movie release year and tickets sold for the top 25 films per year from 2000–2001, using a scatter plot rendered with SVG and animation. Each point is colored by Bechdel test result (pass, fail, or no data) and includes hover interactions. The visualization is built with D3 v3 and reads from a CSV dataset, animating point positions on load and letting viewers explore the distribution of film performance across years and test outcomes.
This scatterplot visualizes the classic Iris flower dataset, plotting sepal length against sepal width for 150 samples. Each point is colored by species using an ordinal color scale, with linear scales mapping measurements to x- and y-positions and axes rendered via SVG. The chart loads and parses the data from a TSV file using d3.tsv, computes the domains with d3.extent, and displays axes with d3.svg.axis. The visualization follows conventional margin conventions and uses D3 v3, clearly showing how the three iris species cluster differently across sepal dimensions.
This scatter plot visualizes the relationship between the number of human faces on a movie poster and the movie's IMDB rating, using data from a Kaggle dataset of 5,000 IMDB movies. Each circle represents a US film, positioned along the x-axis by the number of faces in the poster and along the y-axis by its IMDB score. The visualization is rendered with SVG in D3 v4, using a color legend to differentiate movies. The data was scraped from IMDB and made available on Kaggle.
A donut chart displays total gross box office revenue for 4,000+ U.S. movies, segmented by MPAA rating (G, PG, PG-13, R) from a Kaggle IMDB dataset. The visualization uses D3.js v4’s `d3.pie()` and `d3.arc()` to compute and render SVG arc paths, with a categorical `d3.scaleOrdinal` color scale mapping ratings to `d3.schemeCategory10`. A legend, generated via the d3-legend library’s `d3.legendColor`, identifies each rating. The chart is sized to 960×500 pixels, with a right margin reserving space for the legend.
This scatter plot shows the relationship between the number of human faces appearing on a movie poster (x-axis) and the movie's IMDB rating (y-axis), with each circle representing a film. The data, sourced from a Kaggle dataset of 5,000 IMDB movies, is filtered to US films with ratings. The visualization uses D3 v4 with SVG rendering, plotting movie ratings against poster face counts. A color legend distinguishes data points, and the plot is built from a CSV dataset containing movie metadata such as title, director, genre, budget, and IMDB scores. The chart is implemented as a fork of Curran's stylized scatter plot, adapted by adamfknapp.
This example shows a hybrid line-and-scatterplot of stock closing prices over time, with a steelblue line connecting daily data points and small circles marking each individual value. The code loads date and close values from a CSV file using d3.csv, parses dates with d3.time.format, and scales the data with d3.time.scale and d3.scale.linear. It renders axes with d3.svg.axis and draws the line using d3.svg.line, while circles are appended to the SVG canvas with explicit cx and cy attributes.
This scatter plot visualizes the relationship between the number of human faces on a movie poster and the movie’s IMDB rating, using data from a Kaggle dataset of US films. Each point represents a movie, with the x-axis showing the count of faces and the y-axis the IMDB rating. Rendered with D3 v4 and SVG, the plot provides a simple, unadorned view of the distribution. The chart is implemented as a basic scatter plot without color encoding or interactive features, and the underlying data is derived from the IMDB 5000 movie dataset.
This scatter plot compares the number of human faces on a movie poster with the movie’s IMDB rating for US films. Each circle represents a movie, positioned along the x-axis by face count and the y-axis by rating. The visualization is built with D3 v4, rendering SVG circles, and uses data from IMDB (via Kaggle). The chart is forked from Curran's stylized scatter plot with color legend.
This example demonstrates a dynamic D3 v4 visualization that automatically resizes to fill the browser window, redrawing on any window resize event. It renders a set of horizontal line segments with end caps and black circular dots positioned proportionally to the current viewport dimensions, using an SVG container styled with CSS `position: fixed`. The code extracts `clientWidth` and `clientHeight` from the chart div, then updates the SVG’s width, height, and element coordinates via data joins and `.merge()`. The visualization responds live to user window adjustments, as seen in the full-screen demo.
A pie chart shows the total gross box office revenue for movies grouped by MPAA rating (G, PG, PG-13, and R) from a Kaggle dataset of US films. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate slices, with an ordinal color scale (`d3.scaleOrdinal`) and the `d3.legendColor` API for a circular legend. Data is loaded from a CSV file via `d3.csv`, and the chart renders as SVG with a large right margin reserved for the legend.
This horizontal bar chart displays firearm purchases per 100,000 residents across U.S. states for August 2017, sorted from Hawaii at zero to Alaska at 832. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Steelblue bars represent each state’s value, with axis ticks formatted using `d3.format('.0s')`. Data comes from a CSV file containing state names and purchase rates.
A horizontal bar chart displays firearm purchases per 100,000 residents for each U.S. state and the District of Columbia, sorted from Hawaii (zero) to Alaska (832). The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Data comes from a CSV file, and the chart includes labeled axes with tick marks that extend across the plot area.
This example shows three red vertical bars on an SVG canvas, positioned at fixed intervals with heights of 10, 40, and 70 pixels. The bars are drawn from hardcoded data arrays rather than the included CSV file. Using D3 v4, the code selects SVG rectangles via `selectAll("rect")`, binds data with `.data()`, and applies attributes such as `x`, `y`, `height`, and `width`. It also appends text elements, though the text setup is incomplete. The canvas is 200 by 200 pixels, with bars 30 pixels wide and a 20-pixel offset.
This chart shows the percentage difference in the rate of congressional incumbents from the historical average, across sessions from 1979 to 2013. Positive values are green bars above the zero line, negative values brown bars below it, revealing alternating periods of above- and below-average incumbent rates. Built with D3 v2, it uses an ordinal x-scale for year labels and a linear y-scale for the variation, with SVG rectangles rendered by a reusable `columnChart()` function. The data comes from the 'Congress rev 01' dataset.
This block summarizes a table of U.S. congressional membership data from Five Thirty Eight. It uses Datalib to compute and display summary statistics for each column, including data type, number of distinct values, and missing values. The visualization shows the dataset’s structure at a glance, allowing you to swap in your own CSV to explore its shape. Built with D3 v4 and Datalib.
Four horizontal axes share a common scale, each drawn as a line with end caps, and each contains a single black circle positioned at a different value along the line. The example illustrates the concept of comparing positions on a common scale, as discussed in Munzner’s Visualization Analysis & Design. The visualization is built with D3 v4, using SVG primitives such as `append('circle')`, `append('line')`, and attribute setters like `.attr('cx')`, `.attr('x1')`, and `.attr('y1')` to define the geometry directly.
This scatter plot displays the relationship between a movie's gross earnings and its IMDb score, with each point representing a film. The data is loaded from a CSV file and rendered as an SVG scatterplot using D3 v4. The x-axis maps movie gross in dollars and the y-axis maps IMDb score, while the point color reflects movie color. The visualization demonstrates basic scatter plot construction, including axes, scales, and circle elements positioned based on parsed numeric values.
This block summarizes a data table using Datalib, displaying a statistical overview of a CSV dataset about members of Congress from FiveThirtyEight. The visualization computes and renders descriptive statistics for each column, providing a quick summary of the data's shape. Built with D3 v4 and Datalib, it lets you swap in your own dataset for a fast overview of its structure.
This block summarizes a CSV dataset of firearm background check permits by state and month using Datalib. The visualization displays a data table with columns for each variable, enabling quick inspection of the dataset's shape and values. The data comes from BuzzFeed and covers firearm permits issued over time. The example forks Curran's Data Table Summary block and uses D3 v4 to render the summary, making it easy to adapt to other datasets by swapping in a new CSV file.
This block summarizes a movie dataset from IMDB/Kaggle using Datalib to generate a quick overview of the data’s shape. It displays summary statistics for each column, including counts, types, and basic measures, based on the provided CSV. The visualization is built with D3 v4 and Datalib, and can be forked to analyze other datasets.
This block summarizes a data table using Datalib to provide a quick overview of its shape. It loads the Auto MPG dataset from the UCI Machine Learning Repository, which contains attributes of various car models including miles per gallon, cylinders, displacement, horsepower, weight, acceleration, year, origin, and name. The visualization displays statistical summaries of each column, such as counts, means, and other descriptive metrics, computed with Datalib and rendered using D3 v4. Users can fork the block and replace the data to explore the structure of their own datasets.
This visualization summarizes a dataset of movies by plotting each film as a point, with color-coded categories and axes representing attributes such as budget, gross earnings, IMDb score, and duration. It uses D3 v4 to render an interactive scatterplot, where hovering or clicking highlights individual movies and displays details from the underlying CSV data. The example demonstrates how to map multiple quantitative and categorical fields onto position, color, and size within a single coordinated view.
This block summarizes a data table about members of the US Congress using Datalib. The example loads a CSV dataset and displays a text-based summary of each column, including data type, unique values, missing values, and summary statistics, generated dynamically with Datalib. The data, sourced from FiveThirtyEight, describes individuals elected to the US Congress. The visualization provides a quick overview of the data's shape, useful for exploring new datasets.
This block displays a statistical summary of a dataset on U.S. Congress members, using Datalib to compute and render summary statistics from a CSV file. The visualization presents key measures for each numeric column—such as age and term start—including counts, means, standard deviations, minimums, and maximums, alongside categorical variable breakdowns like chamber and party. The data, sourced from Five Thirty Eight, is loaded from a remote CSV and summarized in a clean tabular layout. Built with D3 v4 and Datalib, it offers a quick overview of the dataset's shape and can be adapted for other data by swapping the source file.
This bar chart ranks the top 10 highest-grossing films worldwide in 2017, showing each movie’s total gross, its percentage of domestic box office revenue, and its studio. The visualization uses a custom layout with three columns: rank and title, a domestic share bar, and a total gross bar, all rendered as SVG. Data comes from BoxOfficeMojo, and the code uses d3.scaleLinear, d3.scaleBand, and d3.schemeDark2 for color encoding, built with d3.v4 and blockbuilder.org.