fresh block

100%

✓ Published0🌍 Public

Last edited Oct 15, 2017

Created on Oct 15, 2017

A stacked bar chart displays yearly transaction counts for US states from 2010–2016, with each bar segmented by year and a legend identifying the color-coded categories. The visualization uses D3 v4’s `d3.stack()` to compute the layers, `d3.scaleBand()` for the state axis, `d3.scaleLinear()` for the count axis, and `d3.scaleOrdinal()` with `d3.schemeCategory20c` for colors. Data is loaded from a CSV file via `d3.csv`, and the chart renders as SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

82% match

Loading thumbnail…

fresh block 123

A bar chart displays a dynamic set of numeric city values, with buttons to add or remove random data points. Each bar animates its height and position using D3 v4 transitions, growing from the bottom when entering and shrinking downward when exiting. The chart uses `d3.scaleBand` for x-axis positioning, `d3.scaleLinear` for the y-axis, `d3.axisBottom` for ticks, and `d3.schemeCategory20c` for bar colors. All elements render as SVG within a fixed-size canvas.

Aallyraza

81% match

Loading thumbnail…

fresh block

A small SVG bar chart displays three horizontal stacked bars for consecutive months, with two colored series per month. The chart uses a custom d3.layout.stack() transform to compute stacked sums, then maps each bar’s width to its value and positions groups via d3.scale.ordinal() and rangeRoundBands. A yellow legend panel lists series names with color swatches, and hovering a segment updates a tooltip via d3.select() and d3.classed(). Data is hardcoded as JavaScript arrays in the block.

GGoomble

80% match

Loading thumbnail…

fresh block

A set of vertical bars displays a small numeric array, with bar heights proportional to values and fill colors interpolating from red to green based on each value’s position in the data range. The visualization uses d3.scaleLinear for the y-axis and color mapping, d3.scaleBand for horizontal positioning, and d3.schemeCategory20 as a fallback palette. Each rectangle is appended to an SVG canvas, with blue strokes outlining the bars. The code computes bar positions and heights directly from the scales, rendering the chart entirely with D3 v4.

TTollyCoburn

80% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays the distribution of three categories across U.S. states for a selected year, with a dropdown menu to switch between years. The visualization uses D3.js v5’s `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.stack()` to compute stacked segments. Animated transitions (via `transition().duration()`) smoothly update bar heights and axis labels. Total values for each state are shown above the bars. The SVG rendering includes axis groups and colored layers, with the year selector populated from the dataset.

Pp189

80% match

Loading thumbnail…

fresh block

This visualization displays daily transaction volumes for multiple company IDs over five days in October 2017, with each company represented as a series of bars across the x-axis. The code uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory20c for color mapping. It applies d3.stack to group transactions by company, though the rendered SVG currently assigns all stacks a red fill. The data originates from the included dump.csv file.

Aallyraza

79% match

Loading thumbnail…

fresh block

The visualization displays annual changes in seven categories (A–G) as grouped bar segments, with each category’s value represented by a row of dots whose size and position encode magnitude. Keyboard arrow keys or clicking timeline buttons animate transitions between years, smoothly morphing dot positions and colors. Built with D3 v3, it uses ordinal scales for axes, `d3.svg.axis` for ticks, and `transition.attr` with random delays to animate dot movement. Data comes from a CSV file with year-based columns, rendered as SVG with a color scale per category.

YYkelf

79% match

Loading thumbnail…

fresh block

A bar chart displays accident counts by state, with each state clickable. The visualization uses D3 v3 to render SVG bars, with mouseover effects changing bar color to yellow and mouseout transitions restoring the original color. Users can enter a state number in an input field, which triggers a d3pie chart showing the distribution of fatal counts (1, 2, or >2) for that state. The code loads both bar_chart1.csv and pie_chart1.csv datasets, using jQuery for input handling and d3.csv for parsing the CSV data.

DDarienLiang

79% match