Start free Log in

A

adamjanes

@adamjanes·28 public vizzes

Loading thumbnail…

Gist 24b18538d178e96bd03dca68ffa3edc2

This example shows a Solidity smart contract for minting and managing VerityNFT tokens, an ERC721-compliant NFT collection. The contract uses OpenZeppelin’s ERC721 and Ownable libraries to handle token ownership and administrative functions. It automatically mints three tokens to the deployer upon construction, tracks a global counter for token IDs, and stores file URIs associated with each token in a mapping. Users can add file references to tokens via `addFileToToken` and retrieve them with `getTokenFiles`, while the base URI for token metadata is set by the owner through `setBaseURI`.

Loading thumbnail…

Bar Chart Demo

This bar chart displays the frequency of letters in the English language using data from a TSV file. It employs D3 v4 APIs including d3.tsv for parsing, d3.scaleBand and d3.scaleLinear for positioning, d3.axisBottom and d3.axisLeft for axes, and d3.schemeCategory20 for coloring each bar. The chart applies conventional margins and renders as SVG, with the y-axis formatted as percentages and letter labels along the x-axis.

Loading thumbnail…

Scatter plot

This scatter plot visualizes 80 data points with two numeric attributes: value (mapped to the x-axis) and size (mapped to both the y-axis and point radius). The visualization addresses the common problem of overlapping data points by using D3 v4's force layout with collision detection, which separates points that would otherwise obscure each other while preserving their correct positions on the x-axis. Points are rendered as SVG circles, with their horizontal position determined by the "value" attribute and vertical position initially set by "size", then adjusted by the force simulation to prevent overlapping.

Loading thumbnail…

Scatter plot

This scatter plot encodes two quantitative variables per point: value on the x-axis and size as both the radius and y-axis position. The visualization solves the common problem of overlapping data points by using a D3 force layout with collision detection, which gently pushes points apart so they remain distinct while preserving their horizontal position. The data is rendered as SVG circles, with each point’s size mapped to the `size` field and its x position determined by `value`.

Loading thumbnail…

Scatter plot

This scatter plot uses a D3 force layout with collision detection to prevent overlapping points. Each point is positioned along the x-axis according to its `value` from the included data.json file, while the `size` attribute determines the circle radius. The force simulation handles collisions, nudging overlapping circles apart while preserving their approximate x-position, so viewers can see the true distribution of values without occlusion. Rendered as SVG with D3 v4, this block demonstrates a clean solution for displaying dense data where points would otherwise obscure each other. The y-axis is determined by the collision forces, allowing all points to be visible while maintaining their correct x-coordinate mapping. The visualization is a practical example of combining force layout with collision detection for scatter plot rendering. Wait, I need to produce a *concise description* for the gallery, not a code explanation. The description should be 1-3 sentences. I should be descriptive, not evaluative. I should avoid subjective praise. I will mention the visual outcome, not the code. Let me refine. The key aspects: scatter plot, uses force layout and collision detection to prevent overlapping points, positions points correctly on x-axis. A good concise description would be something like: "A scatter plot where force simulation and collision detection are used to separate overlapping data points while preserving their positions along the x-axis." This is clear, concise, and describes what is visualized and how. Let me confirm it is accurate to the files. The README says "using force layout and collision to prevent points overlapping" and "Solving a problem of overlapping data points with correct positioning on the x-axis." So yes, this is accurate. Let's also think about whether the description should mention what the x and y axes represent. Based on the data.json, each point has "value" and "size". In the original scatter plot, likely x = value and y = size. But the README doesn't explicitly state this. The description should be concise for a gallery. I'll mention that points are positioned by two numeric attributes, with force simulation adjusting y positions to prevent overlap while preserving x-axis accuracy. Since the user asked for a concise description for a visualization gallery, I should write something brief but informative, covering: - What the visualization is - The technique used (force layout with collision detection) - The problem it solves (overlapping points) Let me craft a concise paragraph.This example demonstrates a scatter plot enhanced with a force-directed layout to resolve overlapping data points. Each circle’s position encodes a `value` on the x-axis, while its size reflects a second numeric attribute (`size`). A collision-avoidance force gently adjusts the vertical positions of the points, preventing them from overlapping while preserving their correct x-axis alignment. Rendered in SVG with D3 v4, this block provides a clean solution to a common challenge in scatter plots: dense or duplicate values obscuring the distribution of data.

Loading thumbnail…

Scatter plot

This scatter plot uses a force simulation with collision detection to prevent overlapping circles, solving the problem of densely packed data points. Each circle's position on the x-axis maps to the `value` field, while its area encodes the `size` field. D3's force layout jitters the y-coordinates and applies collision constraints so that circles with identical or similar x-values separate vertically instead of stacking invisibly, preserving both the quantitative accuracy of the x-axis and the readability of the point distribution. Rendered with SVG and D3 v4.

Loading thumbnail…

Pie Chart Update, II (V5)

A donut chart displays apple or orange counts by region, toggled via radio buttons. On selection, the chart animates between datasets using `d3.pie` to compute arc angles and `d3.arc` for path geometry. Transitions rely on `transition.attrTween` with an interpolator stored in each path’s `_current` property, while new arcs enter with a fade-in stroke. The SVG is centered with a `g` transform, and colors come from `d3.scaleOrdinal`. Data loads from `data.json` via `d3.json`, with counts coerced to numbers before rendering.

Loading thumbnail…

Multiple datasets in 5.x

A choropleth map of U.S. county unemployment rates, rendered in SVG with D3 v5. County data is loaded asynchronously from a TSV file alongside TopoJSON geometry using Promise.all, then joined and mapped to color. The map uses a threshold color scale with a blue scheme, and includes a legend with an axis showing the unemployment rate percentages. State boundaries are overlaid as white lines.

Loading thumbnail…

Choropleth V5

This choropleth map visualizes county-level unemployment rates across the United States. Using D3 v5 with SVG rendering, the example loads county and state boundary geometries from a TopoJSON file and joins them to unemployment rate data from a TSV file via Promises. A threshold color scale maps unemployment percentages (2–10+) to a blue sequential scheme, with a horizontal legend positioned at the top of the map. County polygons are filled according to their rate, with tooltips showing the exact percentage, while state boundaries are overlaid as white strokes. The map is paired with an axis showing the unemployment-rate scale.

Loading thumbnail…

Pie Chart Update, II (V5)

A donut chart displays five proportional segments, with radio buttons toggling between apple and orange datasets. The code loads tab-separated data via `d3.tsv`, builds arcs with `d3.arc`, and animates value changes using `transition.attrTween` with an in-place `_current` angle interpolator. D3 v5’s `d3.pie` recomputes segment angles on selection change, while SVG paths redraw smoothly over 750 milliseconds.

Loading thumbnail…

Gist dea55f0103ffa19a24d77facd9624b58

Two small scatterplots compare GPA against height for two separate student groups, using circles positioned by Cartesian coordinates. The code loads data arrays with six and nine points respectively, then renders them with D3.js, likely via `d3.forceSimulation` for layout or a standard scale-based plot. Each dot encodes the paired numerical values, and the minimal styling keeps focus on the distribution difference between the datasets, though no axes or labels are drawn in the provided snippets.

Loading thumbnail…

Gist 1966586a209f68b2ce9a3826496a42d4

A scatterplot animates the transition of individual data points between two quantitative axes, plotting GPA against height. The D3.js code uses a single shared transition (`t`) to coordinate exit, update, and enter selections, moving circles vertically while fading opacity. Entering circles appear grey and semi-transparent at the baseline before transitioning to full opacity at their target height, while exiting circles fade back down. The animation relies on D3's data join and `transition` API to smoothly interpolate circle positions and opacity.

Loading thumbnail…

Gist f3e85a6ed813f890e8ade1dd762adabe

An animated scatterplot uses D3.js transitions to update its x- and y-axes. The code calls `xAxis.transition(t).call(xAxisCall)` and the equivalent for the y-axis, smoothly interpolating the axis scales over time. The data points themselves are not explicitly rendered in this snippet, but the focus is on the axis transitions that accompany the underlying data updates. The visualization relies on D3’s selection and transition APIs to coordinate the animation, presenting a dynamic view of changing relationships between two variables.

Loading thumbnail…

Gist 77910f3bc3d3df6fc05e2f58f4d0ec1f

This animation demonstrates a force-directed network visualization where nodes and links reposition over time using D3.js’s `d3.forceSimulation` for physics-based layout. A standard `d3.transition().duration(750)` animates the movement of elements smoothly. The data comes from an external gist source, rendered as an animated SVG or canvas scene. The transition updates positions each tick, while the simulation’s velocity and collision constraints drive the final arrangement. The code relies on D3’s transition API, specifically `transition.attrTween` or similar, to interpolate coordinates between frames, making the network appear to fluidly settle into a stable configuration.

Loading thumbnail…

Gist e4c1b21e553b04d66d0a22279bf0a766

This example demonstrates how D3.js handles data joins by updating circles on a scatterplot, where each circle’s position is mapped from GPA and height values. New data elements enter the visualization as small grey circles, appended via `circles.enter().append("circle")`, with their horizontal and vertical coordinates set using the `x` and `y` scale functions. The code explicitly assigns the circle’s radius to 5 pixels and fill color to grey, showing a basic static rendering of newly added points without transition or animation.

Loading thumbnail…

Gist 43fbaf9c6adc2c8fa5ca639d1599e20e

This example shows how D3.js updates existing circle elements when the underlying dataset changes. The visualization binds new data to previously rendered circles, then repositions them by setting their `cx` and `cy` attributes through the `x` and `y` scale functions, which map `gpa` and `height` values to screen coordinates. Using the data join pattern, the code explicitly targets old elements present in the new data array. The scales are defined elsewhere, but the update logic relies on D3’s selection and attribute methods to reflect the changed data without recreating the entire scene.

Loading thumbnail…

Gist 9fb99c7b3cce96b453fe3224c8369ed3

This example demonstrates how D3.js handles data joins by removing obsolete elements. Using the `circles.exit().remove()` pattern, it shows old circles being eliminated from the visualization when new data replaces the previous dataset. The code relies on D3’s selection and data-binding APIs, specifically the `exit()` method, to identify and delete DOM nodes that no longer have corresponding data points. The scene updates dynamically, with exiting circles disappearing as the visualization transitions to reflect the current data state. The approach highlights D3’s declarative update cycle for maintaining visual consistency.

Loading thumbnail…

Gist 0ad3913f0850c73deb09348eeb1c6e08

This example demonstrates a data-join update pattern for circles in a D3.js visualization. It shows how existing SVG circle elements are bound to a new dataset using `g.selectAll("circle").data(data)`, a core D3 concept that prepares the scene for entering, updating, or exiting elements. The code uses the D3 selection API to join the new data with the old elements, making it a foundational step for dynamic transitions or rescaling. The visualization itself is not yet animated or interactive—it only establishes the data binding, leaving subsequent update logic (such as position or radius changes) out of the visible snippet.

Loading thumbnail…

Gist c2eea6a36d935cfbe01d807d9b149d0e

A scatterplot of student grade point averages against heights flickers between two datasets every second, swapping the points to show how the axes rescale to fit the new data. Built with D3.js, the visualization uses `d3.scaleLinear` to map the domains, `d3.axisBottom` and `d3.axisLeft` for the axes, and a `d3.interval` timer to trigger the update. The `update` function reuses existing circles via `enter` and `exit` selections, appending new ones with a radius of 5 and filling them grey.

Loading thumbnail…

Gist 8b9520988d3d9794063d586cdc13e0df

This visualization alternates between two datasets every second, showing how a chart can dynamically transition between different states. The example uses D3.js and its `d3.interval` function to trigger a periodic update, switching a global `flag` variable to choose between `data0` and `data1`. Each tick calls an `update(data)` function, which presumably redraws the visualization with the newly selected data. The code demonstrates a simple, timer-driven approach to cycling through data arrays, making the chart refresh automatically without user interaction.

Loading thumbnail…

Gist 4fd2027fce22d7cd0c0df0face9bba2c

This scatterplot shows the relationship between grade point average and height in centimeters, with each point representing an individual. The visualization uses D3.js to render the axes, employing `d3.axisBottom` for the x-axis and `d3.axisLeft` for the y-axis. Axis labels are appended directly to the axis groups, with the x-axis titled "Grade Point Average" and the y-axis rotated to read "Height / Centimeters." The data is plotted against these quantitative scales, though the underlying dataset is not visible in the code excerpt.

Loading thumbnail…

Gist de26f52eb8910be97e525cd02d416dce

This example demonstrates a reusable margin convention pattern for D3.js visualizations. It sets up an SVG canvas with defined margins—10 pixels on top and right, 50 pixels on bottom and left—and calculates the usable width and height by subtracting these margins from the SVG’s total dimensions. The code appends a `<g>` group element and translates it to the top-left corner of the plot area, enabling subsequent chart elements to be positioned relative to the inner drawing region. The implementation uses standard D3 selection and attribute methods, including `d3.select` and `attr`, without requiring additional libraries.

Loading thumbnail…

Gist 4d4e90bc085ad356a5c5cac2755b91b9

A scatterplot maps student GPA on the x-axis against height on the y-axis, using D3.js to render circles with a fixed radius of 5 pixels and grey fill. The code binds data to circle elements via `d3.select("#canvas").selectAll("circle")`, then appends new circles with `.enter()` and positions them using the scale functions `x(d.gpa)` and `y(d.height)`. The example demonstrates basic SVG circle creation from an array of data objects, with no axes or interactivity shown.

Loading thumbnail…

Gist 65b32812a88403c5b2c49fc2de450136

This example shows how to map two quantitative data fields—GPA and height—to screen positions using linear scales. The code defines an x-scale that translates GPA values into a horizontal range of 0 to 800 pixels, and a y-scale that maps height values to a vertical range of 500 to 0 pixels (reversed for typical Cartesian orientation). Both scales compute their domains dynamically from the data, expanding the minimum and maximum by 5% to add padding. The implementation uses D3.js’s `d3.scaleLinear` with explicit `.domain()` and `.range()` calls, relying on `d3.min` and `d3.max` to derive the input extents from the `data0` array.

Loading thumbnail…

Gist bd22f3b52b22c16912001e3e858739bb

This example demonstrates a basic data join with D3.js, showing how circles are appended to an SVG canvas based on an array of data. The visualization displays five grey circles positioned diagonally, with each circle’s x and y coordinates calculated from its index in the data array. The code uses D3’s `selectAll` and `data` methods to bind data to circle elements, followed by `enter().append()` to create new circles with fixed radius and fill color. The rendering approach is declarative, relying on D3’s data-join pattern rather than explicit loops.

Loading thumbnail…

Gist 8548490d909ebd28976aae6f26b74048

A scatterplot drawn on an HTML canvas displays each record from a dataset as a grey circle, with horizontal position mapped to GPA and vertical position mapped to height. The code uses D3.js to select the canvas element and append circle elements for every item in the `data0` array, setting their `cx` and `cy` attributes accordingly. The visualization shows the distribution of GPA against height, with a fixed radius of 5 pixels for all points.

Loading thumbnail…

Gist e70cf8fad92bf018d15d5d20ed8db761

This example shows a single grey circle centered at coordinates (50, 50) with a radius of 5 pixels, rendered on an HTML canvas. The visualization uses the D3.js selection API, specifically `d3.select("#canvas")`, to target the canvas element and append a circle shape to it. The circle’s position and size are set explicitly via the `cx`, `cy`, and `r` attributes, while its fill color is defined as grey. The code demonstrates a minimal, static SVG-like circle drawing within a canvas context, with no interactivity or data binding.

Loading thumbnail…

Gist b76b24130b07da4646bdae5db5ec862f

This example shows a static SVG composition of five basic geometric shapes and a text label. It demonstrates fundamental SVG rendering with a green rectangle, red circle, grey ellipse, blue line, and orange text reading "Hello World" on a 400 by 60 canvas. The code uses native SVG elements directly within an HTML file, with styling applied through presentation attributes like `fill`, `stroke`, and `font-size`. No JavaScript libraries or data sources are involved; the visualization relies solely on declarative SVG markup.