Tributary inlet

100%

Tributary inlet

✓ Published0🌍 Public

Last edited Nov 30, 2015

Created on Nov 30, 2015

This visualization uses a histogram layout to group ten U.S. states by their total child values, with each bin represented as a horizontal bar whose width encodes the bin’s count. The bars transition smoothly into place, using an ordinal y-scale for vertical positioning and a linear width scale scaled to the maximum bin length. Built with D3.js, the code relies on `d3.layout.histogram`, `d3.scale.linear`, `d3.scale.ordinal`, and chained `transition().attr()` calls to animate the rectangles, which are colored per index. The data comes from an inline gist, and the static SVG border is styled via an external stylesheet.

AI-generated description

Similar vizzes

Loading thumbnail…

Tributary inlet

The visualization uses D3.js to render a horizontal stacked bar chart of state population frequencies, with each bar segmented into low, mid, and high categories. The animation sequentially expands each bar segment from zero to its final width over one second, while hover interactions momentarily enlarge the segment height. Data is sourced from an inline array of ten U.S. states, and the chart uses D3's linear scale and category20 color palette to map values and segment hues. The SVG rendering approach applies transitions via `transition().duration(1000)` and positions each state row using transform translations.

AAlexDaGr8

90% match

Loading thumbnail…

Tributary inlet

This visualization displays a horizontal bar chart that animates the bars growing outward from the center of the SVG canvas. The chart encodes four data values as colored bars, with each bar’s length proportional to its numeric value, and it responds to window resizing by recalculating the layout. Built with D3.js, the code defines a custom chart function that uses SVG `rect` elements with transitions to animate the bars’ widths and positions, while text labels show the values. The animation runs on load, with each bar appearing sequentially, and mouse hover interactions temporarily enlarge bars. The visualization uses a categorical color scale and reads data from an inline array.

AAlexDaGr8

84% match

Loading thumbnail…

Tributary inlet

A grid of thin vertical bars forms a smooth color gradient, with each rectangle’s fill transitioning from blue through purple to yellow. The visualization maps a sequence of numeric values to both horizontal position and color using a linear scale. The code relies on D3.js to bind data from a CSV file, though the actual data array is loaded asynchronously. The SVG rendering uses `d3.scale.linear()` with an HCL interpolator, while each bar’s dimensions and coordinates are set via attribute callbacks, creating a static, evenly spaced strip.

CCBasis

79% match

Loading thumbnail…

Tributary inlet

Ten vertical bars are arranged in a row, forming a stepped diagonal pattern that shifts from red at the top to green at the bottom. The visualization highlights a simple ordinal-to-linear color mapping, where the tallest bar corresponds to the deepest green and the shortest to bright red. Using D3’s selection and data binding, the code appends `rect` elements to an SVG canvas, computing each bar’s height, vertical position, and horizontal spacing from its index. A linear color scale with HSL interpolation drives the gradient, while the data consists of a static array of ten integers.

CCBasis

79% match

Loading thumbnail…

Tributary inlet

A small triangular cascade of red, blue, and green rectangles forms a stepped diagonal pattern, with each bar’s height increasing linearly along the horizontal axis. The visualization uses D3.js to bind an array of 30 numbers to SVG `rect` elements, positioning them at regular intervals while mapping each index to a distinct color via a three-color ordinal scale. The rendering approach relies on the classic enter selection pattern, setting width, x, y, and height attributes directly. This compact example demonstrates how ordinal color mapping and simple data-driven geometry can create a rhythmic, geometric composition.

CCBasis

78% match

Loading thumbnail…

Tributary inlet

A horizontal bar chart displays a fixed array of values, ranging from 2 to 80, as white bars on a dark background. The chart uses `d3.scale.linear()` to map the data domain to pixel widths, with bars positioned using the `y` and `height` attributes. All bars share a constant `x` offset, and the code sets the `fill` to white, while the `d3.selectAll("rect")` selection binds the data. The rendering uses the D3.js library to create the SVG elements directly, with no external data source beyond the inline array.

CCBasis

77% match

Loading thumbnail…

Fork of HTML Starter

This horizontal bar chart visualizes the number of births across ten U.S. states, using a viridis color scale to encode magnitude. The chart displays the data as animated bars that grow from zero to their final width, with a color gradient legend beneath. Built with D3 v6, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `interpolateViridis` for coloring. Hovering over a bar triggers a tooltip showing the state name and exact birth count. The underlying data comes from a CSV file containing state names and their corresponding birth statistics.

NNandini Maddula

75% match

Loading thumbnail…

Untitled

This chart displays the population distribution across six U.S. states, broken down by seven age brackets. Each state’s data is shown as a group of colored bars, with a legend that allows users to click on age categories to filter which bars remain visible. The visualization uses D3 v5 with a band scale for grouping, a linear scale for the y-axis, and an ordinal scale for colors. It is rendered as an SVG, and clicking a legend item triggers a transition that updates the visible bars and rescales the axes.

RRamon96

74% match