S

Smith5mr

@Smith5mr·24 public vizzes

Loading thumbnail…

fresh block

Three circles, colored green, purple, and red, are positioned on a small square SVG canvas using fixed x and y coordinates. The example demonstrates basic data binding in D3.js version 3.5.5, where an array of JavaScript objects supplies the circles’ positions, radii, and fill colors. The code appends circle elements to the SVG container by selecting all circles, binding the data, and then setting `cx`, `cy`, `r`, and `fill` attributes through anonymous functions. It renders as an SVG via the `d3.select` and `append` API.

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genomic axis, using pink rectangles to represent forward-oriented genes and black tick marks to indicate genomic scale intervals. It employs D3.js to append SVG rectangles and groups, binding each gene's start and stop coordinates to the x-position and width of its corresponding shape. The tick marks animate into place via D3 transitions, with increasing durations for smaller intervals, while the genome ruler itself is a static black-outlined rectangle. The underlying data comes from a hardcoded JavaScript array of gene objects.

Loading thumbnail…

genome browser

This example displays a linear genome track with ruler tick marks at 1000, 500, and 100 base-pair intervals. The SVG is drawn with D3.js, using a white rectangle for the genome and black tick marks of varying heights. The code calculates tick positions by iterating over the genome length and applying modulo operations. Animations transition the tick marks into place using D3's `.transition().duration()` API, with the underlying gene data provided in a simple JavaScript array.

Loading thumbnail…

genome browser

This example displays a linear genome track with ruler tick marks at 1000, 500, and 100 base-pair intervals. The SVG is drawn with D3.js, using a white rectangle for the genome and black tick marks of varying heights. The code calculates tick positions by iterating over the genome length and applying modulo operations. Animations transition the tick marks into place using D3's `.transition().duration()` API, with the underlying gene data provided in a simple JavaScript array.

Loading thumbnail…

scale bar 2/23

This visualization displays a genomic scale bar representing a length of 7,850 base pairs, with tick marks indicating every 100, 500, and 1,000 units. The SVG animation animates the positioning of these tick marks across the bar, with different delays for each mark tier. The code uses D3.js 3.5.5 to build the SVG structure and applies `.transition()` to animate the tick marks' horizontal placement, scaling the genomic coordinates by a factor of ten for the final pixel positions.

Loading thumbnail…

scale

This example demonstrates how D3’s linear scale maps a continuous domain to a fixed pixel range, with an interactive slider adjusting the domain’s maximum value from 20 to 1,000. The visualization renders two SVG axes: a blue-tinted grid of minor ticks and a black major axis, both regenerated on slider input via `d3.svg.axis()` and a `redraw()` function. The code uses D3 v3, SVG rendering, and a range input element to drive the scale’s domain, while CSS styling differentiates gridline hierarchies and the axis appearance.

Loading thumbnail…

fresh block

A simple bar chart displays six fixed numeric values (4, 8, 15, 16, 23, 42) as horizontal bars, with each bar’s width proportional to its value and labeled at its right edge. The chart uses plain HTML `div` elements styled with inline CSS width attributes and a steelblue background, relying on no JavaScript libraries or data-binding frameworks. The markup is hand-written directly in `index.html`, with `padding`, `margin`, and white text set via a global CSS rule in a `<style>` block.

Loading thumbnail…

scale

A slider controls the domain of a linear scale, demonstrating how D3’s axis and grid components respond to changing input ranges. The visualization shows a horizontal grid with major, minor, and sub-minor tick lines in red and blue, while a separate black axis displays four major ticks. Dragging the slider updates the domain and redraws both groups via `d3.svg.axis()`. The SVG rendering uses crisp edges, with the grid background and tick styling defined in CSS. Data is generated on the fly from the slider’s numeric value, with no external dataset.

Loading thumbnail…

fresh block

This block demonstrates an interactive axis-label alignment and grid-styling experiment in D3.v3. A slider adjusts the linear scale’s domain from 20 to 1000, triggering a redraw of both a “fake” background grid and a “real” foreground axis via `d3.svg.axis().orient('bottom')`. The grid’s tick lines are selectively shortened or lengthened based on their index, revealing blue minor-minor and red minor gridlines against a gray backdrop. Rendering uses SVG within a small 960-by-50-pixel viewport. The example highlights custom tick styling and dynamic rescaling without displaying data points.

Loading thumbnail…

fresh block

A slider controls the domain of a linear scale, ranging from 20 to 1000, which drives two bottom axes rendered with `d3.svg.axis`. A fake grid axis draws white tick lines with varying lengths, colored red and blue for minor and minor-minor ticks, while a real axis above it uses 100 ticks and a fixed tick size. The visualization compares the grid’s alternating tick patterns against the dense axis, using SVG with `shape-rendering: crispEdges`. The data is generated from the slider’s input value, which updates the scales and redraws the axes.

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays cumulative Ebola case counts for Guinea, Liberia, and Sierra Leone over time, sourced from a TSV file. The x-axis encodes dates using a time scale, while the y-axis uses a linear scale to represent case numbers, with city names and categories distinguished by color via `d3.scale.category10()`. The visualization leverages several D3 v3 APIs, including `d3.tsv()` for data loading, `d3.time.format()` for parsing, `d3.time.scale()` and `d3.scale.linear()` for coordinate mapping, `d3.extent()`, `d3.min()` and `d3.max()` for domain calculations, and `d3.svg.line()` to render the smoothed paths. Axes are drawn with `d3.svg.axis()`, and all elements are output as SVG shapes.

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart compares daily average temperatures in New York, San Francisco, and Austin over a year, using a TSV data file and SVG rendering. It shows temperature trends for each city across time, with a legend labeling each line at its final data point. The code uses D3 v3 features including `d3.tsv` for data loading, `d3.time.format` for date parsing, `d3.time.scale` and `d3.scale.linear` for axes, `d3.scale.category10` for color encoding, and `d3.svg.line` with basis interpolation for the smoothed curves.

Loading thumbnail…

Bar Chart

This bar chart displays the total number of reported cases for three countries—Guinea, Liberia, and Sierra Leone—with each bar’s height proportional to its frequency value. The visualization uses D3.js APIs including `d3.tsv` to load the data, `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.axis` to render the axes. The chart is drawn as an SVG with pink bars that turn violet on hover, and the y-axis is labeled “Total Number of Cases.”

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of letters in the English language, with each bar’s height representing the count for a specific letter. The visualization uses D3.js to load a TSV file via `d3.tsv`, parse the data with a custom type function, and encode the x- and y-positions using `d3.scale.ordinal` and `d3.scale.linear`. Axes are rendered with `d3.svg.axis`, and hover effects change bar colors. The chart uses conventional margins and renders as SVG, with data from a gist by Smith5mr.

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English language, with letters arranged along the x-axis and their percentage frequencies on the y-axis. The data loads from a TSV file and is rendered as violet bars that transition with a bounce ease over three seconds on hover. Built with D3.js, the visualization uses `d3.tsv` to parse data, `d3.scale.ordinal` for the x-position, `d3.scale.linear` for the y-position, `d3.svg.axis` for axes, and `d3.format` for percentage ticks.

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English language, using violet bars that turn pink on hover. Percentages appear on the y-axis, letter labels on the x-axis, and a rotated "Frequency" label for the y-axis. The chart loads data from a TSV file via `d3.tsv`, and encodes positions with `d3.scale.ordinal` and `d3.scale.linear`, while axes are rendered using `d3.svg.axis` and formatting via `d3.format`. The visualization is rendered as SVG.

Loading thumbnail…

Bar Chart

A bar chart displays the frequency of each letter in the English language, using a TSV data file. The bars are colored steelblue and turn brown on hover, with axes labeled to show the frequency percentage. The visualization is rendered as SVG using D3, and demonstrates the use of `d3.tsv` for data loading, `d3.scale.ordinal` and `d3.scale.linear` for positioning, `d3.svg.axis` for axes, and `d3.max` for domain computation.

Loading thumbnail…

Arc Padding II

This example displays a pie chart formed from seven nested arcs, each representing a value from the Fibonacci sequence [1, 1, 2, 3, 5, 8, 13]. The chart demonstrates the `padAngle` method from the d3-shape module, which inserts a small gap between each arc segment. Rendered on a Canvas, the visualization uses the `d3.arc` and `d3.pie` APIs to calculate the arc geometries, which are then drawn with semi-transparent fills and a stroke outline using the native Canvas context.

Loading thumbnail…

Arc Padding II

This example shows a donut chart built from seven proportional arcs, each filled with a semi-transparent color and outlined with a darker stroke. It demonstrates the `padAngle` method of `d3.arc` in D3 v4, which adds a fixed angular gap between adjacent arcs. The data values are the Fibonacci sequence [1, 1, 2, 3, 5, 8, 13], processed by `d3.pie` to compute start and end angles. Rendering happens on a Canvas 2D context, with `context.fill` and `context.stroke` applying the color and outline for each path generated by the arc generator.

Loading thumbnail…

fresh block

A single turquoise square animates across a blank canvas, sliding from the left edge to the right using a bounce easing effect. The visualization demonstrates a basic D3.js transition over a three-second duration, manipulating the rectangle's x attribute. Rendered as an SVG element, the code uses d3.select and transition() with the "bounce" ease, showing a minimal example of shape movement and timing. The square begins partially off-screen and ends fully visible on the right side.

Loading thumbnail…

fresh block

A single turquoise square animates horizontally across an empty SVG canvas, moving from the left edge toward the center over three seconds. The block demonstrates D3.js version 3.5.5’s transition system, using the `transition().duration(3000).ease("bounce")` API to apply a bouncing ease to the rectangle’s `x` attribute change from -100 to 250. The visualization is minimal, showing only the rect element, with no data source or additional marks.

Loading thumbnail…

fresh block

A single red rectangle sits on a blank canvas and gradually changes to blue over three seconds. The example demonstrates a basic shape transition using D3.js version 3.5.5, appending a rectangle to an SVG and applying a `transition().duration(3000).ease("bounce")` to animate its fill color between two hex values. The code is minimal, serving as a straightforward introduction to SVG rendering and animation with D3.

Loading thumbnail…

fresh block

A red rectangle starts as a solid shape and then shifts to blue, demonstrating a simple color transition over three seconds. The example uses D3.js version 3.5.5 to append a single SVG `<rect>` element to the body and applies a `transition().duration(3000).ease("bounce")` to animate the `fill` style property. The page is built with Blockbuilder.org, and the rendering is entirely SVG-based with no external data source.

Loading thumbnail…

fresh block

A red rectangle starts as a solid shape and then shifts to blue, demonstrating a simple color transition over three seconds. The example uses D3.js version 3.5.5 to append a single SVG `<rect>` element to the body and applies a `transition().duration(3000).ease("bounce")` to animate the `fill` style property. The page is built with Blockbuilder.org, and the rendering is entirely SVG-based with no external data source.