Tell us what works and what could be better. We read every submission.
@annalabrozzi·43 public vizzes
This example displays a single line of instructional text, “Edit the code below to change me!”, centered on a blank SVG canvas. The visualization uses D3 v4 to select the page body, append an SVG element with fixed dimensions, and render the text with monospace styling. The code demonstrates the basic D3 selection and SVG appending pattern, serving as a minimal template for users to modify. It does not include data, interaction, or animation beyond the static text rendering.
This interactive animated visualization maps UFO sightings across U.S. states from 2013–2014, using an SVG scatterplot that plots each state’s population-scaled sighting count against median income, poverty level, mental health metrics, and substance use indicators. Built with D3.v3, the graphic renders color-coded circles for each state with a play button and year slider, animating transitions between the two years to reveal shifts in state rankings. A tooltip provides exact values on hover, and the chart includes labeled axes and a legend to compare state-level relationships across the five socioeconomic and health variables.
This visualization displays two years of U.S. state-level data from Final_Data5.csv in an interactive SVG scatterplot with animated transitions. Points represent individual states, colored by year (2013 vs. 2014), with axes mapping a chosen metric pair—such as poverty level against mental health prevalence—among the dataset’s demographic, health, income, and UFO sighting variables. Animated transitions update the points when the year toggles, and hovering reveals the state name and its values for the selected metrics. The chart uses D3 v3 with an MIT license.
This interactive visualization uses an animated scatterplot to explore relationships between socioeconomic and health metrics across U.S. states from 2013–2014. Each state is represented as a point, with year-based animation toggling between the two data snapshots. Users can brush to select states, which highlights their paths across the transition. The graphic, rendered with SVG in d3.v3, maps variables such as population, poverty level, mental health, marijuana use, median income, alcohol abuse, and UFO sightings to position, size, and color, with tooltips for detail.
This interactive visualization displays a choropleth map of the United States showing the geographic distribution of petition signatures, with each state colored on a logarithmic scale—darker shades indicating higher signature counts. Built with D3 v3, the map renders as an SVG using a linear color interpolator as a stand-in for a true logarithmic scale, since the data spans from dozens to over 4,500 signatures per state. Users can click any state to see its exact signature count. The visualization also includes a pie chart view of the same data and was originally created as part of a bioinformatics group project, adapted from Mike Bostock's map demo.
This choropleth maps West Nile virus and Zika virus infections across U.S. states, letting users toggle between datasets for 2015 and 2016 via buttons. State polygons are colored on a sequential scale based on total cases, with hover tooltips displaying the exact counts. The map uses D3 v3 and SVG rendering, with a legend for reading infection levels. Data was sourced from public health records and adapted from prior D3 choropleth examples.
This visualization displays a parallel coordinates plot of automobile data from a CSV file, with each dimension represented as a vertical axis and each car as a line. The axes can be dragged horizontally to reorder dimensions, and brushing on any axis filters the foreground lines to highlight data points within the brushed ranges. The background gray lines provide context while blue lines show the filtered data, with transitions animating the reordering and brushing interactions.
This interactive animation visualizes U.S. state-by-state changes in population and average income across three years (2010–2012), overlaid with mental-health statistics. An SVG map renders states as colored regions, with animated transitions cycling through the annual datasets to reveal shifts in demographic and economic patterns. Each state is encoded by color intensity for population or income, while tooltips and labels expose precise values. The visualization invites comparison between the two variables over time, highlighting regional trends and outliers. Built with D3 v3, the animation smoothly transitions between years, making it easy to observe temporal changes in the data.
This visualization compares U.S. state-level population and average income across 2010–2012, alongside mental health statistics from 2010. Rendered as an animated SVG scatterplot with D3 v3, each state is plotted with population on one axis and average income on the other, with points transitioning smoothly as the year changes. The mental health data (overall, 18–25, and 26+ age brackets) is integrated as additional layers or tooltips, allowing viewers to explore relationships between demographic and economic indicators over time. The animation highlights state-by-state changes across the three-year period, with hovering or selection revealing precise values for population, income, and mental health metrics.
This visualization compares U.S. state income and population data across three years, animated to show changes over time. Built with D3 v3, it uses SVG elements to render a scatterplot-like display where each state is positioned according to its average income and population. The animation cycles through 2010, 2011, and 2012 datasets, transitioning points smoothly to reveal demographic and economic shifts. Color or size likely encodes population or income values, allowing viewers to track trends across states and years.
This animated scatterplot compares average income and population across U.S. states from 2010 to 2012, with each state represented by a circle. D3 transitions smoothly interpolate the points between years, revealing shifts in state rankings and income-population relationships over time. The visualization also incorporates mental health data for 2010, enabling comparisons between economic indicators and mental health statistics by state. SVG elements are animated to show the changes across the three years, with the data sourced from CSV files.
This interactive parallel coordinates chart visualizes mental health data from a 2010 U.S. survey of states. The visualization uses d3.svg.axis and d3.svg.line to render one axis per data dimension (18+, 18-25, 26+, and AVG DATA), with grey background lines for context and blue foreground lines for focus. Users can drag axes horizontally to reorder dimensions, and brush along any axis to filter the displayed state lines. The chart also supports smooth transitions when axes are repositioned, providing an intuitive way to explore relationships between age groups across states.
This interactive choropleth displays state-level mental health statistics from the 2010 CSV dataset. Users can click on any state to view its percentage of adults reporting mental health issues, with the color scale mapping values from dark to light. The visualization is built with D3 v2, using SVG for rendering and includes animations.
This example presents an incomplete JavaScript function named `weirdArraySort` that attempts to separate an array’s elements into numbers and strings using a `forEach` loop and `typeof` checks. The code, which contains syntax errors and unfinished logic, is embedded in an HTML file and loads D3 v4 from the d3js.org CDN, though it does not use any D3 APIs or produce a visualization. The block appears to be an early-stage draft or experiment in array manipulation within a Blockbuilder project.
This example demonstrates common data-manipulation patterns in D3, showing how to calculate averages, search arrays, sort objects, and combine datasets using JavaScript loops and D3 methods like `d3.mean` and `d3.ascending`. It also includes commented code for loading CSV data, building tooltips with HTML tables, and preparing geographic path data for SVG rendering. The visualization is a study guide presented as code snippets in the browser console, using D3 v4 with SVG output, and relies on built-in array methods such as `forEach`, `includes`, and `sort`.
This example demonstrates a basic utility function that checks whether a given value exists within an array, using `Array.indexOf()` to return a boolean result. The code also sketches the initial structure for generating a flag visualization with D3 v4, preparing a dataset of rectangle objects and outlining the data-join pattern with `svg.selectAll("rect").data().enter().append()`. However, the visualization is not yet functional—the rectangle attributes and fill color remain incomplete, and the code only logs the array-check result to the console.
This example presents four JavaScript practice problems that compute the average population of a small hardcoded array of U.S. states. The visualization shows no graphical output; instead, it demonstrates different programming approaches to calculating a mean. The code first uses the d3.mean() function from d3.v4, then replicates the calculation using a for loop, a forEach method, and a while loop, with results printed to the browser’s developer console. The data source is a literal states array containing names, IDs, and populations for Alaska, Virginia, Arizona, and Florida.
This example presents four JavaScript practice problems that compute the average population of a small dataset of U.S. states. The page displays the problems in a heading and paragraph, while the solutions run in the developer console. The code uses the D3.js v4 `d3.mean()` method for the first problem, then implements the same calculation manually using a `for` loop, `forEach` iteration, and a `while` loop for the remaining three. Each approach prints its result to the console, demonstrating alternative ways to calculate a mean without the D3 helper.
This example presents four JavaScript practice problems embedded in an HTML page, using a small dataset of U.S. states with their populations. The visualization shows no SVG graphics; instead, it prints computed averages to the browser’s developer console. The first problem uses `d3.mean()` from D3 v4 to calculate the mean population, while the second problem computes the same value manually using a `for` loop, a `forEach` method, and a `while` loop as alternative approaches. The code demonstrates basic array iteration and statistical calculation without any visual rendering.
This example presents four JavaScript practice problems embedded in an HTML page, focused on calculating the average population of a small array of U.S. states. It first uses `d3.mean()` with an accessor function, then demonstrates manual computation via a `for` loop, a `forEach` method, and a while loop. The code outputs results to the browser’s developer console rather than rendering any visualization, making it a purely logic-based exercise using D3 v4’s array utilities and core JavaScript iteration patterns.
This example presents four JavaScript practice problems focused on working with objects and arrays, using a small dataset of U.S. states with their names, abbreviations, and populations. The page displays a title and instructions, but all computation happens in the browser’s developer console. Problem 1 uses `d3.mean()` to calculate and log the average population, while Problem 2 attempts the same calculation manually using `forEach()`, though the code’s logic is flawed. The visualization relies solely on D3 v4 for the mean function, with no SVG or graphical output.
This example presents five JavaScript practice problems in the browser console, with instructions displayed in the page. It demonstrates array iteration, filtering, sorting, and modular arithmetic on state objects with names, IDs, and population data. The code uses plain JavaScript array methods such as `forEach`, `includes`, and `sort`, along with `console.log` for output. No SVG or D3 visualization is involved; the exercises focus on fundamental data manipulation and logic skills using D3 v4 only as a script dependency.
This choropleth map visualizes the number of West Nile virus cases reported per US state in 2016, using an interactive SVG rendered with D3 v4. State fill colors are assigned via a log-scaled sequential color scheme (interpolateOranges) so that states with higher case counts appear darker, while hovering over a state triggers a tooltip displaying the state name and total cases. The visualization is driven by CSV data containing neuroinvasive, non-neuroinvasive, total cases, deaths, and presumptive viremic blood donors, though only total cases are mapped. The map responds to mouse hover by changing fill opacity and showing a dark tooltip with the state abbreviation and case count. The color scale is logarithmic to handle the wide range of case values across states.
This example presents four JavaScript practice problems embedded in an HTML page, intended for console-based learning rather than visual output. It demonstrates array searching, substring filtering, set difference, object sorting, and conditional logic using plain JavaScript. The problems work with hardcoded data arrays containing state names, locations, populations, and letter/number values. The code relies on the D3.js v4 library only for page setup, while all problem-solving uses native JavaScript methods like `console.log()`, `filter()`, `sort()`, and `forEach()`. No SVG or canvas rendering occurs, as the output appears solely in the browser’s developer console.
This example presents five JavaScript practice problems embedded in an HTML page with D3 v4 loaded for utility functions. The problems manipulate arrays and objects: matching state names to two-letter IDs, finding intersecting array values, sorting state objects by population, retrieving the smallest population state, and filtering numbers not divisible by three using the modulus operator. The code uses `forEach` loops, `Array.includes`, `Array.sort`, and `d3.range` to generate a number sequence. No SVG is rendered; results appear in the browser developer console.
This example demonstrates how to combine two arrays of objects by matching a common property and then logs the results to the console. It also shows how to find and print the intersection of two simple arrays. The code uses plain JavaScript with `forEach` loops to compare object fields (`name` against `state`) and array elements, assigning a new `id` property to the first array. No D3 visualization is rendered; the example focuses purely on data manipulation and console output.
This choropleth map of the United States visualizes reported Zika virus cases by state, using color intensity to represent case counts. Each state is rendered as an SVG path, with hover interactions displaying a tooltip that shows the state name and its case numbers. The data is loaded from a CSV file and joined to the map’s state paths, with a color scale mapping case counts to a gradient from teal to dark brown. The map is drawn using D3 v3 and includes animated hover effects, making it easy to compare relative case loads across states.
This example defines two small arrays of JavaScript objects, each containing state names paired with either a region or an abbreviation. It shows how data can be structured in parallel arrays with different properties, though no visualization is rendered. The code uses D3 v4 only to load the library, and the script simply creates the arrays without any drawing or interaction. The data source is hardcoded inline, representing a simple demonstration of object and array syntax.
This choropleth map displays the number of Zika virus cases reported in US states for 2016. State boundaries are drawn as SVG paths with a light gray stroke, and each state is colored using a blue-to-purple gradient based on the case counts loaded from a CSV file. Hovering over a state triggers a dark tooltip that shows the state name along with Low, Average, and High values, while the map’s fill opacity changes for emphasis. The visualization is built with D3 v3 and includes a subtle animation of the state coloring.
This visualization is a choropleth-style map of the United States, with each state colored to represent the number of West Nile virus cases reported in 2016. The data is loaded from a CSV file and joined to the state paths defined in the uStates.js file. Hovering over a state reveals a tooltip showing the state name and the corresponding case count. The map is rendered using SVG, with state boundaries stroked in gray. The fill color for each state is generated by interpolating between light yellow and dark red based on the number of cases, and the animation aspect is minimal, relying on hover interactions.
This example shows a choropleth map of the United States where each state is colored according to random data values, with a hover tooltip displaying the average Zika case count for that state. The map is rendered in SVG using D3 v3 and includes smooth hover effects that adjust fill opacity. State boundaries are drawn from the included uStates.js path data, and the tooltip provides contextual information about Zika cases per state. The visualization also incorporates an animation that updates state colors based on the loaded zika_2016.csv dataset, creating an interactive and informative map.
This choropleth map of the United States visualizes sample state-level data for neuroinvasive disease cases, with each state colored by a randomly generated “low” value. Hovering over a state highlights it and reveals a tooltip with low, average, and high case counts. The map is rendered using D3 v3 and SVG, drawing state paths from a pre-defined GeoJSON-like dataset. A color scale interpolates from light yellow to dark red based on the data values. The visualization includes animation and a tooltip for interactivity, with the underlying data sourced from a CSV of West Nile virus cases by state.
This interactive choropleth of the United States displays synthetic data for three metrics—low, average, and high—for each state, drawn as SVG paths with hover tooltips. Clicking or hovering over a state reveals a tooltip with the three values. The map is rendered using D3 v3, with states colored via a yellow-to-red interpolated scale based on randomly generated sample values. The visualization also includes animation and is built from West Nile virus surveillance data, with tooltips showing per-state totals.
Four genomic sequences animate as colored rectangles sliding along a shared axis, each labeled by name and positioned by start and end coordinates. A ruler beneath the genes marks scale increments at 100, 500, and 1000 units. The visualization uses d3.v4 with data binding, transition delays for sequential animation, and SVG rect and text elements to render the gene map.
Four gene annotations slide into place along a ruler-tracked genomic coordinate axis, with forward-strand genes in teal and reverse-strand genes in green. The animated rectangles fade in sequentially using D3 v4 transitions, while a static ruler shows 100-, 500-, and 1000-base tick marks. Gene labels appear after the rectangles settle, using D3’s data join and SVG text elements.
The visualization renders the French flag as three vertical rectangles using D3 v4's data-join pattern. It binds an array of objects containing fill colors and x-coordinates to SVG `rect` elements, then enters and appends each rectangle with explicit width, height, and positioning attributes. The code demonstrates a reusable data-driven approach to drawing multiple shapes, contrasting with earlier commented-out manual append commands. The SVG canvas is 960 by 500 pixels, with rectangles sized at 200 by 400 pixels and spaced along the x-axis.
A simple geometric composition renders three overlapping shapes on an SVG canvas: a white rectangle with a red circle centered on its right edge, a turquoise rectangle with a gold horizontal band, and a black polygon layered across the scene. Built with D3 v4, the code appends SVG elements directly using methods like `svg.append`, setting attributes such as `attr("x")`, `attr("y")`, `attr("width")`, and `attr("height")`. The shapes are positioned absolutely at fixed coordinates, creating a static, abstract arrangement with no data binding or interaction.
Two static flags are drawn in an SVG canvas: a Japanese-style flag with a red circle on a white field, and a simplified horizontal tricolor with a dark turquoise stripe, gold center band, and a dark polygon overlay. The code uses d3.v4 selections to append rectangles, a circle, and a polygon to an SVG element sized 960 by 960 pixels. All shapes are positioned with explicit x, y, and dimension attributes, with no interaction or animation.