Tell us what works and what could be better. We read every submission.
@arcox80·33 public vizzes
This visualization pairs live stock quotes with related news headlines in a force-directed network. Each node represents a company’s current price, while adjacent nodes display relevant headlines fetched alongside the quote. The code uses `d3.forceSimulation` to position elements, with `d3.select` and `transition.attrTween` to animate price changes. Data comes from the Alpha Vantage API via a gist, and the interface includes clear symbol labels to avoid lookup confusion. Slow API responses are handled with asynchronous updates, and headings clarify whether a value is a price, change, or percentage.
This visualization displays three user story requirements for a React app as interconnected nodes, showing the logical flow from searching a stock symbol to reading company information and accessing latest headlines. The code uses d3.forceSimulation to position the nodes and manage the collision and link forces between them, while d3.select and d3.drag handle user interaction for repositioning. The data comes from a gist containing plain text user stories, and the rendering approach uses SVG circles and text elements with a light gray background and blue node coloring.
The visualization demonstrates an email client drill-down interface, showing how users navigate from an inbox summary to individual message details. It renders a three-pane layout with a message list and content preview, using React Router to manage view transitions between mailbox folders and selected emails. The drill interaction relies on `react-router-dom`’s `Link` components and `useParams` hooks to update the URL and conditionally render the active message. The example uses mock email data stored in a static JavaScript array, with no external data fetching or animation libraries. The interface updates synchronously as route changes trigger component re-renders.
React Redux Drills pairs two interactive Glitch projects that demonstrate state management in React with Redux. The first, “Interest Calculator I: Connecting,” shows a compound-interest form wired through Redux’s `connect` and `dispatch` to update a computed total. The second, “Interest Calculator II: Dispatching,” builds on this by adding explicit action creators and reducer logic to handle user input. Both examples render plain HTML inputs and result text, relying on Redux’s `createStore`, `Provider`, and `useSelector`/`useDispatch` hooks (or their class-based equivalents) to manage and propagate state changes. The code is sourced from a public gist by arcox80, with live editable versions hosted on Glitch.
This example demonstrates how to visualize Redux state management through interactive “drill” views. It shows a live, force-directed graph of actions, reducers, and store state, with nodes and links updating in real time as actions dispatch. The visualization uses `d3.forceSimulation` for layout and `d3.select` with data joins to render transitions. A CRUD reducer example (from the Glitch project “tulip-buffet”) provides the underlying state logic, while a second file (gistfile1.txt) defines internationalization (i18n) state for language-specific labels. The code wires Redux store subscriptions to D3 updates, animating node positions via `transition.attrTween`.
Communication Drills presents three interactive prototypes built with D3.js and Glitch-hosted HTML/JavaScript. The first, Surprise, animates a force-directed network using `d3.forceSimulation` with drag and collision detection. Hourly Rate Calculator computes and visually updates a cost breakdown in real time as users adjust sliders, relying on D3’s data binding and transition methods. Live Search filters a dataset through an input field, redrawing a bar chart with `d3.select` and `transition.attrTween`. The examples demonstrate varied D3 techniques for user-driven data exploration, each using sample JSON data embedded in the code.
This example demonstrates a component-drilling interaction where a navigation bar and an address book are linked through a force-directed graph. It uses d3.forceSimulation to position and animate the connected nodes, with each node representing a UI component. The visualization shows how selecting a component in the navigation bar drills down to highlight its corresponding details in the address book. The code relies on D3’s drag and click handlers to update the graph’s state, while the address book and navigation bar are rendered as HTML elements that respond to the simulation’s data bindings.
A donut chart displays the age distribution of a population from a CSV file, with seven categorical age groups shown as colored arcs and white labels. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` assigns a categorical color palette. Labels are positioned using `d3.arc` centroids, and the chart is centered within a 960×500 SVG canvas. Data is loaded asynchronously via `d3.csv`, and each arc’s fill color corresponds to its age category.
This simple bar chart displays the relative frequency of five spoken languages, with Italian highlighted in green and all bars turning red on hover. Built with D3 v4, it loads tab-separated data from `languages.tsv` and renders SVG rectangles. The chart uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick labels, with the y-axis formatted as percentages.
This bar chart displays the relative frequency of five Romance languages—Spanish, Portuguese, French, Italian, and Romanian—using data from a tab-separated values file. Blue bars render with SVG rectangles, while hover effects change their fill to a darker red. The chart uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, which is formatted as percentages. Axes are generated with d3.axisBottom and d3.axisLeft, and the data is loaded asynchronously via d3.tsv.
This example demonstrates how D3 scales and axes map a dataset of demographic counts per NYC zip code to a scatterplot-style visualization. Using d3.v4 and SVG rendering, the block loads demographic data from a CSV and applies linear or ordinal scales to position circles by jurisdiction and population values. Axis components are generated with d3.axisBottom and d3.axisLeft, with tick formatting and orientation configured. The visualization highlights how quantitative and categorical data can be transformed into spatial coordinates and annotated with readable axes.
This example shows a diagonal series of four blue ellipses positioned incrementally across an SVG canvas. The code selects the body element, appends an SVG container with fixed width and height, and binds an array of ellipse objects containing center coordinates and radii. Using D3 v4’s data join, it creates each ellipse via `selectAll("ellipse").data().enter().append("ellipse")`, then sets the `cx`, `cy`, `rx`, and `ry` attributes from the bound data. A CSS filter targets the first child ellipse to apply a blue fill.
This example displays a set of circles arranged in a simple scatterplot-like layout within an SVG container. The visualization uses D3 v4 to bind data points to circle elements, positioning them with static coordinates and styling them with default attributes. The code relies on D3’s selection and data-join methods, such as `d3.select` and `append`, to create the circles dynamically. It does not include any interactive behavior or transitions, presenting a straightforward static rendering of circles as a foundational demonstration of D3’s SVG capabilities.
This example shows four small rectangles positioned diagonally across an SVG canvas, each offset by 50 pixels in both the x and y directions. The rectangles are defined in a static JavaScript array with explicit x, y, width, and height values. Using D3 v4, the code selects the body element, appends an SVG container, and binds the data array to newly created rect elements via `selectAll`, `data`, and `enter`. Each rectangle’s position and size are set with `.attr` calls referencing the bound data properties. The rendering approach is straightforward SVG, with no interactivity or transitions.
This example demonstrates how D3 selections can be used to manipulate HTML elements, showing three divs labeled Box 1, Box 2, and Box 3. The code includes commented-out exercises that illustrate various D3 v4 APIs, such as selecting elements with `d3.select` and `d3.selectAll`, changing text with `.text()`, inserting HTML with `.html()`, and appending child elements with `.append()`. It also shows data binding with `.data()` and `.enter()` to create paragraph elements, though all commands remain inactive. The example serves as a tutorial reference for practicing D3’s DOM manipulation capabilities.
A user feedback collection captures usability issues for a web application, listing specific pain points such as confusing navigation, missing error messages, and unexpected dashboard behavior. The data is stored in a plain text gist file, and the visualization renders the feedback as a hierarchical list or structured text layout, likely using a simple DOM-based approach rather than a charting library. The presentation organizes the feedback by category, showing each item as a bullet point under headers like "Error Messages" or "Navigation," with no interactive elements or data transformations beyond the static text display.
This example maps user flows for an MVP app with screens including signup/login, dashboard, title search results, and other user watchlists. It uses d3.forceSimulation to lay out nodes representing screens and user actions, with arrows drawn as links to show transitions between states, such as valid login leading to the dashboard or incorrect input triggering warning messages. The data comes from a gist file that structures each screen’s user stories and acceptance criteria, rendered as a directed graph where labels describe each action and outcome.
This example shows a movie and TV streaming search application that lets users find where titles are currently available, manage personal watchlists, and share them with friends. The interface supports user authentication, search queries, detailed title views, and social features like friend lists and privacy controls. The code uses standard web APIs to handle form submissions, local storage for session management, and fetch requests to retrieve streaming data, though it does not display any chart or visualization components. The gist contains only plain text user stories and feature specifications without implementing visual rendering.
This example shows a series of MongoDB shell commands that demonstrate basic CRUD operations and query patterns against a restaurant dataset. The code performs actions like finding all documents, sorting and limiting results, retrieving documents by `_id` or field values, counting records, deleting single documents, and updating either one or many documents using `updateOne` and `update` with the `$set` operator. It also illustrates how to obtain an `ObjectId` from a query result and use it for subsequent operations. The visualization presents these commands as a linear drill sequence, making the MongoDB query syntax and workflow explicit.
The visualization maps user-reported app issues from a plain-text gist into a force-directed network using d3.forceSimulation, with each issue as a node positioned by simulated repulsion and collision forces. Nodes are rendered as colored circles, and the layout reveals clusters of related feedback topics, such as layout problems versus search functionality. The code reads the gistfile1.txt data, parses each line into a node, and uses d3’s drag and tick handlers to animate the clustering. The chart shows the distribution and grouping of qualitative complaints without aggregating or scoring them.
Two interactive data-visualization drills demonstrate how request and response patterns shape real-time feedback. The first, a Mad Lib Generator, uses d3.forceSimulation to position user-supplied words as nodes, which respond to drag events with animated transitions. The second, an A/B Test, renders two competing button variants and logs click counts via a live-updating bar chart, drawing on d3.select and transition.attrTween for smooth state changes. Both examples rely on Glitch-hosted code and event-driven updates to show how user actions trigger immediate visual responses.