Tell us what works and what could be better. We read every submission.
@alexhoke·24 public vizzes
A force-directed bubble chart animates 38 Salmonella isolates, with each circle positioned by a D3 v4 force simulation and sized by the number of AMR genes (ranging from 0 to 6). Circles are colored by serotype using a categorical color scale, and hovering reveals the isolate ID, serotype, and gene count in a tooltip. The animation cycles through data keys, updating circle positions and sizes through collision forces, demonstrating a playful "cartogram" style re-layout of the microbial data.
This interactive visualization morphs a force-based cartogram of U.S. county demographics into a bubble chart using the same underlying data. Built with D3 v4 and SVG animation, it leverages the forceSimulation engine to transition between the two representations: initially, each county appears as a geographic-shaped region whose size reflects population, then seamlessly animates into circular bubbles for comparison. The transformation highlights demographic distributions across counties, with the force simulation preserving spatial relationships while shifting visual encoding. The example is implemented as an SVG animation and includes census-derived demographic data from Duke University.
This visualization displays the population density of each continent as a bubble chart, where the size of each circle corresponds to the number of people per square mile. The chart uses the D3.js bubble chart library to render eight bubbles, one for each continent plus the world average, with values ranging from Antarctica's zero density to Asia's 242 people per square mile. Each bubble is labeled with its continent name and colored distinctly, and clicking the central "See more detail" button triggers an alert. The visualization is built with the Bubble Chart plugin and is responsive, scaling between 400 and 800 pixels wide.
This example demonstrates a force-based cartogram of U.S. county demographics that smoothly transitions into a bubble chart. Built with D3 v4, the visualization uses the same dataset to power a forceSimulation that first distorts county shapes based on population, then morphs each county into a proportional bubble. The transition between the two representations is animated, with SVG rendering. Demographic data for counties is loaded from a CSV file. The code is forked from an earlier block by E. Meek.
This example demonstrates a custom JavaScript function that sorts an array containing both numbers and strings. The function separates numeric and string values, sorts the numbers in ascending order, sorts the strings alphabetically in reverse order, and then concatenates the reversed strings before the sorted numbers. The result is logged to the browser console. The code uses vanilla JavaScript with D3 v4 loaded via a CDN, but no D3 visualization APIs are invoked; the example focuses solely on array manipulation logic.
This example presents a stub for a function called `weirdArraySort` that is meant to take an array of mixed numbers and letters—such as `["A", 3, "X", 1, "Q"]`—and return a sorted result. The visualization is rendered using D3.js v4, though the current code only defines the empty function and calls it without displaying any output. The page sets up a minimal HTML body with a fixed full-screen layout, but no visual elements or data-binding are implemented yet. The concrete API visible is the global D3 script inclusion from the CDN, with no other libraries or rendering functions used.
This example displays a static SVG canvas with a single instructional text message, “Edit the code below to change me!”, rendered in monospace. The page also defines a JavaScript helper function that checks whether a value exists in an array, logging the result to the console. Built with D3 v4, the code appends an SVG element to the body using `d3.select` and `append`, setting its width and height. The text is positioned with explicit `x` and `y` attributes, and the overall structure is a minimal starter template from Blockbuilder.
This example shows a simple scatter plot of four data points, each represented by a steelblue circle, positioned along linear x and y axes. The data is a hardcoded array of coordinate pairs. The visualization is built with D3 v2, using `d3.scale.linear` for the x and y scales, `d3.svg.axis` for the axes, and SVG `circle` elements appended to a group. The chart is sized with margins, and the axes are drawn on the bottom and left of the plot.
This example displays a placeholder visualization: a single line of monospace text reading “Edit the code below to change me!” centered on a 960-by-500 SVG canvas. The code appends an SVG text element to the body using d3.select and sets its position, font size, and family via SVG attributes. It uses d3.v4 and renders through the SVG API, with no data source or interactive behavior present.
This example presents five JavaScript practice problems for manipulating arrays and objects in the browser console, with no visual output. It uses D3 v4's `d3.mean` and `d3.ascending` functions to compute population averages and sort state objects, alongside native array methods like `forEach`, `includes`, and `sort`. The code demonstrates filtering state data by location, identifying array differences, sorting by name, and checking population parity, with all results logged via `console.log`.
This example presents five JavaScript practice problems for working with arrays and objects, with instructions to view results in the developer console rather than through SVG output. It demonstrates array iteration, object property matching, filtering common elements, sorting objects by population using a comparator function, and applying the modulus operator within a loop to identify non-multiples of three. The code uses d3.range to generate an array of integers and d3.min to find the minimum state name, alongside standard JavaScript array methods like forEach, includes, and sort.
This example presents five JavaScript practice problems focused on manipulating objects and arrays, with output intended for the browser developer console rather than SVG graphics. The code uses D3 v4’s `d3.range` to generate an array of integers from 1 to 10 for a modulus-based filtering exercise. Problems involve merging state IDs from one array into another, finding common elements between two arrays, sorting state objects by population, and identifying the smallest population value. The visualization is purely code-driven, with no visual rendering, and relies on standard array methods like `forEach`, `sort`, and `includes`.
This example demonstrates how to merge and compare arrays in JavaScript using nested `forEach` loops. It starts with two arrays of state objects—one containing names and locations, another with names and IDs—and matches them by name to assign the appropriate ID to each object in the first array. It then compares two simple arrays of letters, logging any common elements to the console. The visualization relies entirely on the browser’s console output, using no D3 APIs or rendering, despite loading d3.v4. The code is written in plain JavaScript and produces no visual graphics.
The example defines two static JavaScript arrays—one mapping state names to regions and another mapping names to postal abbreviations—but renders no visualization. It sets up a minimal D3 v4 environment in an HTML page, importing the library via a CDN and applying a full-viewport margin reset. The code includes placeholder data for Arizona, Virginia, and Florida but contains no drawing, scaling, or interaction logic. It demonstrates only the initial data structuring step, leaving all subsequent visualization work unimplemented.
This interactive choropleth maps reported Zika virus cases across U.S. states in 2016, with states colored on a grayscale based on case counts. Hovering over a state reveals a tooltip displaying the number of cases along with calculated low, average, and high estimates. The map is rendered as SVG with D3 v3, using a color interpolation from black to white to encode case severity, and features animated hover effects that dim states for emphasis. Data is loaded from a CSV and joined to state path geometries via a custom `uStates.js` module, with tooltips providing contextual detail on demand.
This choropleth map visualizes reported Zika virus cases across US states in 2016, using color intensity to represent case counts. The map is rendered as an SVG with D3 v3, with each state filled by interpolating between black and white based on the number of cases. Hovering over a state displays a tooltip showing the state name and a table with the case count, average, and high values. The visualization also includes a second dataset of West Nile virus cases in the repository, suggesting a comparison or alternative disease view. The map is interactive with hover effects, and the data is loaded from CSV files.
This interactive choropleth map of the United States visualizes Zika virus cases by state, colored with a pink-to-purple gradient based on the number of reported cases. Hovering over a state triggers a tooltip displaying the state name and total case count, while the map is drawn using SVG paths from the included uStates.js file and animated with D3 v3. The data is loaded from a CSV file and joined to the state geometries to drive the color encoding.
This choropleth map of the United States visualizes state-level statistics from a West Nile virus dataset, coloring each state by the number of reported cases. Hovering over a state triggers an animated tooltip displaying the state’s low, average, and high values from the sample data. Built with D3 v3, the map renders states as SVG paths and uses color interpolation from light yellow to dark red to encode the data values. The visualization is based on a fork of NPashaP's block and includes a legend-style tooltip with tabular data for each state.
Four gene blocks slide horizontally from off-screen positions toward their mapped locations along a linear sequence, with forward-direction genes in turquoise entering from the left and reverse-direction genes in salmon entering from the right. Gene names animate alongside each block, landing at their midpoints. Below the genes, a fixed ruler uses thin black rectangles of varying heights to mark every 100, 500, and 1000 base pairs, generated with `d3.range` and rendered via SVG `rect` elements. The visualization uses `d3.transition` with staggered durations to choreograph the entrance animation.
Four gene rectangles slide horizontally onto an SVG canvas from opposite edges, with forward-direction genes entering from the left and reverse-direction genes from the right. The animation uses chained d3 transitions with a two-second duration to move each rectangle to its genomic start position, while the text labels travel alongside. The visualization encodes gene direction through vertical placement and color, placing forward genes in turquoise at the top and reverse genes in salmon below. The code defines the gene data inline as JavaScript objects with start, end, and direction properties, then applies them using d3 selections, data joins, and the transition.attr method.
This visualization displays a set of genes as colored rectangles along a horizontal axis, with each gene’s position defined by its start and end coordinates and its direction indicated by the rectangle’s orientation. It uses D3.js v4 with SVG rendering, binding the `genes` array to `rect` elements via `svg.selectAll("rect").data(genes).enter().append("rect")`. The rectangles are positioned at a fixed y-coordinate, with height 50, and use the `fill` property for color while black strokes outline each gene.
Three vertical rectangles form a simplified tricolor flag using blue, white, and red bars of equal size. The visualization is built with D3.js v4, using `d3.select` and `selectAll` with data binding to an array of flag objects. Each rectangle is rendered as an SVG `rect` element with explicit `x`, `y`, `width`, and `height` attributes, and a black stroke outlines each bar. The data array defines the fill color and horizontal position for each stripe, and the code uses the standard D3 enter-append pattern to generate the shapes from that data.
This example draws three national flags—France, Japan, and the Bahamas—using basic SVG shapes in D3 v4. It shows each flag as a simple geometric composition of rectangles, circles, and polygons, positioned manually on a 1000-by-1000 canvas. The code appends SVG elements via `d3.select` and sets attributes like `x`, `y`, `width`, `height`, `fill`, and `stroke` directly, with no data binding or interaction. The flags are static, hard-coded renderings that demonstrate fundamental D3 SVG drawing without scales or axes.
A single SVG text element displays the message "Edit the code below to change me!" in monospace font, centered at a fixed position on a 960-by-500 canvas. Built with D3 v4, the example uses `d3.select` to append the SVG and the text element, setting its font size and family via attributes. The code comes from a Blockbuilder gist and serves as a minimal starter template, demonstrating basic SVG creation and text styling with no interactive or data-driven behavior.