Tell us what works and what could be better. We read every submission.
@alansmithy·23 public vizzes
This example shows a minimal React application that renders a heading and a personalized greeting. It demonstrates how to define functional components and compose them, with `App` passing a `somebody` prop to the child `MyComponent`. The code uses React 16 and ReactDOM, with JSX compiled in the browser via the Babel standalone library. The greeting text is hardcoded as “Alan” in the render call, and the output appears inside the `#app` div in the HTML body.
A bar chart displays the percentage values of two variables, perc1 and perc2, for 14 named categories loaded from CSV files. The visualization initially renders perc1 as pink bars, with a small blue circle in the corner serving as an interactive control. Hovering over the circle temporarily recolors all bars blue, while clicking triggers an elastic transition that smoothly animates each bar to its perc2 value, with staggered delays. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for axes, and transition.attr with d3.easeElastic for the animated updates.
A grouped bar chart displays population structure data for Uruguay across two time periods, comparing six labeled categories (A–F) on a 0–100 scale. The chart initially shows 1950 values as white bars over a sky-blue plot area, with a yellow circular button that triggers a one-second transition to 2015 values while updating the title. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.axisBottom` and `d3.axisLeft` for ticks, and `transition().duration()` to animate bar heights and positions.
A single gray circle sits at a fixed position on an empty SVG canvas. The visualization demonstrates basic SVG shape creation with D3.js, using `d3.select` to append a circle element with explicit radius, x-coordinate, and y-coordinate attributes. The rendering relies on D3 v4's SVG manipulation API, with the circle drawn at coordinates (89, 74) and a radius of 22 pixels on a 960 by 500 viewport. No data source or interactive behavior is present; the example simply shows static geometric output.
A pictogram grid displays 100 identical SVG icons arranged in a 10x10 layout, with a jQuery UI slider controlling how many icons are highlighted in a contrasting color. The code defines the icon geometry once in an SVG `<defs>` element and reuses it via `<use>` elements, a technique that simplifies repeating graphics. D3.js (v3) generates the grid using `d3.range`, calculates each icon’s position with modulus and division, and updates the display through `d3.selectAll("use")` in response to slider input. The visualization demonstrates an interactive isotype approach for quantity comparison.
The parli grid visualization displays UK parliamentary election results from 2015 using a compact grid of small squares, one for each constituency. Each cell is colored by the winning party: Conservative (c), Labour (lab), SNP (snp), and minor parties (green, pc, dup, sdlp, sf, uup, ld). The grid groups constituencies by country—England, Scotland, Wales, and Northern Ireland—making regional vote patterns visible at a glance. Rendered as an SVG with d3.v4, hovering over a cell highlights the constituency and displays its name, party, and country. The layout uses a treemap-style arrangement to pack the grid cells efficiently.
This visualization shows the 2015 UK general election results as a scalable grid of constituency rectangles, colored by winning party (Conservative, Labour, SNP, etc.). The grid layout uses SVG rect elements arranged in a responsive, trellis-like structure that can scale to display all 650 constituencies. Each cell represents one constituency, with hover interactions that reveal the constituency name and party. The data is loaded from a CSV file containing constituency IDs, names, winning party, and country codes (England, Scotland, Wales, Northern Ireland), encoded as fill colors to enable quick comparison of party dominance across regions.
A single green circle moves downward over ten seconds against a blank SVG canvas. The visualization demonstrates a basic D3.js v4 transition, using `transition.attr` to animate the circle’s `cy` attribute from 200 to 300. Static text instructs users to edit the code, while the circle’s semi-transparent fill shows how opacity is set via `attr`. The example relies on the D3 selection and transition APIs to update SVG elements in the browser.
This example displays a single static text message, "Edit the code below to change me!", rendered in large monospace font at the center of an SVG canvas. The visualization is built with D3 v4, using `d3.select` to append an SVG element and a `text` node with explicit `x` and `y` positioning. No data or interactive behavior is present; the code only sets the text content, font size, and family via D3’s style methods. The underlying gist provides a minimal starting point for a D3-based chart.
A log-scale bar chart displays five categorical values ranging from 100 down to 0.8, with bar widths proportional to the logarithmic scale. The visualization uses d3.scaleLog for the x-axis, d3.scaleOrdinal for vertical placement, and d3.axisBottom with comma-formatted ticks. Rects and text labels are appended to an SVG, with hardcoded margins and a 580×500 canvas. The data is hardcoded in the script, and the axis is positioned below the bars via an SVG transform.
Ten circles arranged in a row display data as varying opacity, with values from a hardcoded array. Hovering enlarges a circle and updates the title text, while a transition animates all circles downward to new vertical positions using a bounce easing. The SVG artwork, including the title, is defined directly in markup, and D3 v4 selects and manipulates these elements via `d3.select`, `attr`, `on`, and `transition`.
A radar chart displays a circular grid with four directional axes, each representing a scale from 0 to 100, with tick marks at 25, 50, and 75. The visualization uses d3.scaleLinear to map data values to pixel positions for north, south, east, and west directions, then renders axis labels with d3.axisLeft, d3.axisRight, d3.axisTop, and d3.axisBottom. A single data point appears as a small circle at the east axis position (value 50), drawn on top of the background circle, crosshair lines, and axis groups in an SVG canvas.
Anscombe's Quartet is visualized as four separate scatterplots, each displaying a series of 11 data points loaded from a CSV file. The charts share identical axes, scales, and styling—pink circles on a cream background—and each is labeled Series 1 through 4. Using the simple-statistics library, the same summary statistics (mean, sample variance, and correlation coefficient) are calculated for every series and printed beneath each plot, showing nearly identical values. The d3.js v4 code also fits and draws a light-blue regression line per plot, emphasizing how the four datasets, though statistically similar, have very different graphical structures. The example is implemented entirely in SVG, with no animation, and demonstrates the importance of visualizing data before relying on descriptive statistics.
An animated radar plot visualizes survey-style data for four countries across four axes, comparing values before and after a change. The SVG path transitions between two states every second, cycling through the dataset. Built with D3 v4, it uses linear scales for each quadrant, axis generators, and a `transition()` with a duration to animate the path shape. The static grid, labels, and tick marks frame the changing polygon.
This table visualizes the owners of online streaming services across Asian regions, listing brands such as Youku, Hulu, and iflix alongside their parent companies. It renders a CSV dataset as a grid of rows and columns using D3 v4 with SVG. Each row is a group element positioned with a translate transform, and the code uses D3 selections to append shaded rectangles and text cells for the Region, Brand, and Owners fields.
This map visualizes the Nomenclature of Territorial Units for Statistics (NUTS) level 2 subdivisions across Europe, using a conic conformal projection with a graticule background. It uses d3.v3 to render SVG, loading world geography to depict landmasses in light green, and overlaying the NUTS regions in a contrasting yellow-green. The map highlights the hierarchical statistical framework of Europe, including Switzerland as an EFTA member, with the projection centered on [9,55] and scaled to fit the 900×450 canvas. The geographic data comes from two GeoJSON files: world.json for base landmasses and nuts2.json for the statistical regions.
This map shows the European Union as a single continuous SVG path, built from geographic coordinates in a local EUcountries.json file. Using d3.geo.path with the Mercator projection, the visualization renders the member states as a unified geometry collection rather than individual country boundaries. The map is displayed in a simple, monochrome style, with the data drawn as filled polygons on an SVG canvas. The code uses D3 v3 to bind the GeoJSON data and generate the path elements that form the outline of the EU, providing a clean and minimal representation of the union's geography.
This example demonstrates interactive annotations on a bar chart built with D3 v4 and the d3-annotation module by Susie Lu. Users click anywhere on the chart to create a new annotation at that location, choosing between circle, arrow, or dot connector styles via radio buttons. The chart displays imaginary regional data values as bars with axes, while the annotation module renders callout labels with titles and descriptive text. The code uses d3.scaleBand and d3.scaleLinear for positioning, and d3.mouse to capture click coordinates for annotation placement.
This visualization shows how proposed UK tax credit cuts and offsetting measures would affect a low-income family’s annual income from 2016 to 2021, comparing scenarios with and without budget changes. It uses stacked areas to break income into child benefit, tax credit, and net earnings components. The D3.js v3 code builds the chart with SVG, axes, and animated transitions between the two scenarios, while hardcoded data from the House of Commons Library drives the graphic.
The Costner Effect visualizes the relationship between Kevin Costner’s film grosses and the number of babies named Kevin born in Zurich from 1987 to 2007. Animated bars grow to represent annual births, while a white line traces gross earnings via `d3.svg.line`. Using D3 v3, the chart reads from a CSV and employs ordinal and linear scales, axes, and hover effects to reveal labels.
A calendar heatmap visualizes migrant deaths in the Mediterranean across the year 2015, with daily values encoded as colored cells. The data comes from a CSV file, and each day’s color reflects its value using a five-color scale with defined breakpoints. The visualization groups the calendar by year, using D3.js version 3.5.6 to parse dates, nest data by year, and render SVG rectangles for each day, with week and weekday positioning derived from `d3.time.weekOfYear` and `getDay`.
This example demonstrates how Pym.js enables responsive SVG graphics by redrawing d3 content based on iframe width. The embedded page uses a `pym.Child` with a `renderCallback` to trigger `createChart`, which swaps between a landscape scene with trees and a portrait figure at a 600-pixel breakpoint. The code applies d3.v3 selections, `append`, `attr`, and `use` elements with `xlink:href` references to symbol definitions. It also uses Pym.js’s parent–child messaging to update the graphic on window resize, as shown in the parent `index.html` and child `svgimage.html` files.
Switching between two JavaScript arrays of different lengths drives this d3.v3 demonstration of the enter, update, and exit data-join pattern. Clicking the “change data” button re-binds the circle elements to the alternate array, using `exit().remove()` for surplus circles, `enter().append()` for new ones with an initial radius of zero, and a 500-millisecond `transition` to update all circles’ positions and radii. The SVG rendering shows a horizontal axis and labeled dataset number, while circle size encodes each array value.