Tell us what works and what could be better. We read every submission.
@aaronbalthaser·13 public vizzes
A horizontal stacked bar chart displays test results across seven named suites, with each bar segmented by passed, not run, failed, blocked, and not applicable counts. The visualization uses D3 v4’s scaleBand for the y-axis and scaleLinear for the x-axis, rendering SVG through an appended `<g>` element. A responsivefy function adjusts the chart’s viewBox and dimensions to fit its container. Axis ticks are formatted as integers, and colors are assigned via d3.scaleOrdinal with the schemeCategory20 palette.
A stacked bar chart displays monthly mortality data for the Crimean War, breaking down deaths into disease, wounds, and other causes across 24 months. The bars are horizontally oriented with a time-based y-axis and numerical x-axis, using a categorical color scheme. Built with D3 v4, the visualization employs `d3.stack()` for layering, `d3.scaleBand()` for the date axis, and `d3.axisBottom` and `d3.axisLeft` for rendering axes, all output as SVG elements.
A bar chart displays seven subjects—including Mathmatics, Geography, Spelling, Reading, Science, Horror, and Flimsy—with scores from 52 to 97 on a 0–100 scale. The chart uses an SVG rendered with D3 v4, employing `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the x-axis. Rectangles are filled steelblue, and the bottom axis labels are rotated -45 degrees. The chart is responsive via a custom `responsivefy` function that adjusts the SVG’s viewBox and dimensions on window resize.
A simple two-panel chart divides a 400-by-600 pixel SVG into equal light-blue rectangles with green outlines. The left and right panels share a linear Y-axis scaled from 0 to 100, while the bottom X-axis uses d3.scaleTime spanning a three-hour window on January 1, 2016. Both axes are rendered with d3.axisLeft and d3.axisBottom, with the time axis displaying five ticks. The chart is built with D3 v4 and drawn entirely as SVG elements, with no underlying data or interactive behavior.
A single SVG chart displays two equally sized vertical rectangles, each filled with light blue and outlined in green, positioned side by side within a bordered container. The visualization demonstrates basic SVG shape creation and layout using D3 v4, where the rectangles are appended to a grouped SVG element with fixed dimensions. The code explicitly sets the width and height for the first rectangle, then positions the second rectangle at an x-offset equal to half the available width. The chart is rendered entirely through D3's selection and append methods, with no data binding or interaction.
A horizontal bar chart displays five names with scores from a static JSON array, rendered as SVG rectangles with light green fills and black strokes. Hovering a bar scales it horizontally to double width, turns it orange, and fades non-hovered bars to 50% opacity; mouseout reverses these effects. The code uses D3 v4 selections, `style('transform', 'scaleX(...)')`, and custom functions for fill and opacity changes, with text labels positioned beside each bar.
This visualization displays U.S. census data on age group populations across states, though it currently renders as a static, placeholder title instructing the viewer to edit the code. The SVG canvas is created with d3.select and given fixed dimensions of 960 by 500 pixels. The only visible element is a monospace text label positioned at coordinates (120, 200). The code includes a loaded CSV dataset with state-level age brackets, but no data-binding or charting logic has been implemented yet, leaving the visualization incomplete.
This interactive force-directed graph visualizes a network of 10 nodes labeled A through J, connected by 12 links. The D3 v4 force layout positions nodes with simulated physics, while icons from Font Awesome serve as node labels. The graph supports zooming and panning via the mouse, and individual nodes can be dragged to reposition the network. A slider control adjusts a value, and a "remove" button deletes nodes. Node size, color, and stroke vary, and the entire layout responds dynamically to user interaction.
A force-directed network diagram shows six people connected by seven relationships, with nodes colored red for male and blue for female. The code uses d3.forceSimulation with d3.forceManyBody, d3.forceCenter, and d3.forceLink to compute positions, then renders circles and lines as SVG elements. The data is hardcoded in JavaScript arrays, and the simulation updates node coordinates on each tick event.
A single SVG text element displays the message "Edit the code below to change me!" in large monospace font, centered vertically at y=200 and offset horizontally at x=120 within a 960-by-500 canvas. The code uses d3.select to append the SVG and a text node, setting attributes for position, font size, and font family. This minimal example serves as a starting template, with the body styled to fill the viewport and D3 v4 loaded from a CDN.
A minimal bar chart displays five hardcoded values from a JavaScript array as blue rectangles. The code selects all `<rect>` elements with `d3.selectAll` and logs the selection to the console, but the data-binding and attribute-setting operations are commented out, so no bars render. The SVG contains only empty rectangles, and the page otherwise remains blank. Built with Blockbuilder.org, the example uses D3.js for selection, though the visualization is incomplete.
This example shows a simple image rotator that cycles through a series of figures with captions, displaying one at a time with a fade transition. Users can manually advance or rewind using the previous and next arrow controls, or enable automatic rotation by adding the "auto" class to the container. The implementation uses vanilla JavaScript with event delegation and the `classList` API to toggle visibility, while CSS transitions handle the opacity changes. The markup relies on standard HTML5 `<figure>` and `<figcaption>` elements, with placeholder images sourced from placehold.it.
This example demonstrates a simple web page that uses PHP to manage a user greeting form through cookies. It shows how a name submitted via a form can be stored and displayed with a personalized message while controlling the visibility of the form and message sections. The page relies on PHP’s `setcookie()` and `$_COOKIE` to persist data across requests, and it redirects via `header()` after submission. The layout is built with custom CSS and a floating sidebar, though it contains no JavaScript libraries or charting frameworks.