d3.js learning

100%

d3.js learning

✓ Published0🌍 Public

Last edited Dec 18, 2017

Created on Dec 14, 2017

A stacked column chart displays weekly data for six users across six weeks, with each column segment colored per user and labeled by date. Built with D3 v3's stack layout, the chart renders as SVG with axes and gridlines. Hovering over any segment reveals a tooltip that tracks the mouse position, showing the exact value. The chart is constructed using a margin convention, ordinal x-scale for dates, and linear y-scale for cumulative sums.

AI-generated description

A simple stacked coloumn graph built using d3's stack layout.

The SVG tooltip is based on this gist by Mike Bostock. In short, the tooltip's group, comprised of a rect and a text element, are created when the chart is first drawn and set to be hidden. Action is applied to the stacks' rects: on mouseover the group become visible; on mousemove the mouse's XY position is captured and used to transform/translate the group.

If you ajust the tooltip's XY offset, keep in mind that there can be no overlap between the group and the mouse's position or the group's visibility will remain hidden.

forked from <a href='http://bl.ocks.org/mstanaland/'>mstanaland</a>'s block: <a href='http://bl.ocks.org/mstanaland/6100713'>Stacked bar chart with tooltips</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9e13e2b04b995114126c38dd960c8286'>stacked-bars</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3.js learning

A stacked column chart displays four annual cost categories—Energy, Business Air Travel, Employee Commuting, and Other—from 2012 to 2016. The d3.v3 stack layout computes layer offsets, while ordinal and linear scales map years and cumulative values to SVG rects. Axes, a legend, and a hidden SVG tooltip group appear on mouseover, with tooltip text updated via d3.mouse coordinates.

TTJPepping

79% match

Loading thumbnail…

d3js clickable stacked bar chart

This stacked bar chart, based on Mike Bostock's original, adds an interactive legend that lets viewers isolate individual categories. The visualization displays U.S. census population data by state and age group. Clicking a legend item filters the bars to show only that category, while hovering over bars reveals tooltips with exact values and highlights the segment. The chart is rendered with SVG and includes animated transitions, built with D3.js under an MIT license.

Aachalvs

76% match

Loading thumbnail…

multiple-to-stack

This example shows how individual time-series lines for “Impressions” and “Clicks” can be converted into a stacked area chart using D3 v4. The SVG visualization reads monthly data from a CSV file, parsing date and numeric values, then renders the two categories as stacked areas. The stacked layout is computed with d3.stack, and the chart includes an x-axis for time, a y-axis for values, and a color-coded legend distinguishing the two series.

Aallyraza

76% match

Loading thumbnail…

d3js clickable stacked bar chart

This interactive stacked bar chart displays U.S. state population distributions across seven age groups, using D3.js to render the visualization in SVG. The chart is an enhanced version of Mike Bostock's classic stacked bar example, with a clickable legend that lets users select and display individual categories. Hovering over a bar segment highlights it and shows a tooltip with the category name and value. The legend supports click-based filtering to isolate specific age groups, and the bars are animated when switching between views.

Aachalvs

75% match

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes changes in fruit consumption over time, with each bar segment representing a fruit type and its height corresponding to the value. The visualization uses d3.layout.stack to layer the data, d3.time.scale for the ordinal x-axis, and d3.svg.axis for labeled axes. Hovering over a segment displays a tooltip with the exact value via mouseover and mousemove events. A legend identifies the four fruit categories. The chart is built with SVG, using d3.v3, and applies Bostock's margin convention for layout.

Nneetusingla12(Neetu Singla)

75% match

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example shows a stacked bar chart of daily values over two weeks in March 2020, with annotations on select bars and an interactive tooltip revealing current and past values. Rendered as SVG, it uses d3.v4’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and the `d3.stack` API with `stackOffsetDiverging` to layer the two value series. A custom axis function adds data-tip labels, while hover interactions trigger a jQuery-based tooltip. The data is embedded in `constant.js`.

CChandrakantThakkarDigiCorp

75% match

Loading thumbnail…

Making a Multiline Chart 2

A multiline chart displays weekly power scores for eight teams across eight weeks, with a clickable legend highlighting team names and interactive hover effects that thicken lines. The visualization is built with D3 v5, using SVG rendering, `d3.nest()` to group data by team, `d3.line()` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. It includes axis labels, a dashed baseline, and a filterable legend with custom click handlers.

HHirsh Gupta

75% match

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes two sample data rows from a CSV-like structure, transposed into layers for RowID, OrderID, OrderDate, ShipDate, and ShipMode. Built with d3.v3 and rendered as SVG, it uses the d3.layout.stack() algorithm to compose the bars, d3.scale.ordinal() and d3.scale.linear() for axes, and d3.svg.axis() for ticks. Interactive tooltips appear on mouseover via d3.mouse(), while a legend maps colors to each field.

SSarahKiyani

75% match