Skip to main content
SimilarExport ZIP
100%

d3.js learning

✓ Published0🌍 Public
TTJPepping
Last edited Apr 3, 2018
Created on Mar 29, 2018

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.

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.

Similar vizzes

Loading thumbnail…

d3.js learning

A stacked bar chart shows the changing composition of four product categories across five years, from 2006 to 2010. The visualization uses d3.v3 with SVG rendering, building layers via `d3.layout.stack()` and mapping time with `d3.time.format`. Bars are colored per category, with a legend and interactive tooltips that display each segment’s value on mouseover. The data is embedded as JavaScript objects, not loaded from a file.

Ttrungngonptit
77% match
Loading thumbnail…

Stacked Bar Graph with D3.js

This stacked bar graph visualizes yearly sales, expenses, and profit data from 2015 through 2033 using D3.js v7. The chart employs `d3.stack()` to layer the three categories, with `d3.scaleBand()` for the x-axis and `d3.scaleLinear()` for the y-axis. Each bar segment is rendered as an SVG `rect`, colored via `d3.scaleOrdinal()`, with axes generated by `d3.axisBottom()` and `d3.axisLeft()`. The data is embedded as CSV strings, parsed with `d3.csvParse()`, and displayed within a React framework using SVG rendering.

Ssaikrishnabussa
76% match
Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit production from 2006 to 2015, with four series (Red Delicious apples, McIntosh apples, oranges, and pears) drawn as colored rect layers. The chart uses d3.layout.stack to transform the data, d3.time.format to parse years, and ordinal and linear scales to position the bars and axes. A legend maps colors to fruit names, and a tooltip—created as an SVG group with rect and text elements—displays the numeric value of each segment on mouseover. The SVG is rendered inside a React framework, with axes drawn using d3.svg.axis.

Aanonymous5776
75% match
Loading thumbnail…

http://stackoverflow.com/questions/32057842/d3-js-highlighting-stacked-bar-and-getting-selected-values/32079517#32079517

This example shows a stacked bar chart of sales data for PC, SmartPhone, and Software product categories across five years, where users can interactively change the stacking offset method (wiggle, zero, expand, silhouette) and the layer ordering (inside-out, default, reverse) via dropdown menus. Built with D3.js (version 3.5.6), the visualization uses the `d3.layout.stack` API to compute stacked values and dynamically updates the y-axis scale and grid lines when selections change. The chart is rendered as SVG with animated transitions for the axis rescaling, and the code leverages custom helper libraries from a gist, including `d3.ui.select` for the controls and `d3.cbPlot` for axis creation.

TThanaporn-sk
75% match
Loading thumbnail…

D3 Layouts - Stacked area chart

A stacked area chart shows monthly U.S. electric vehicle sales from December 2010 to June 2013, with each category rendered as a filled layer. The code uses `d3.stack` with descending order and `d3.area` to generate SVG paths, colored via `d3.schemeCategory10`. It parses dates with `d3.timeParse` and scales axes with `d3.scaleTime` and `d3.scaleLinear`. Data comes from a remote CSV file, and axes are drawn using `d3.axisBottom` and `d3.axisRight`. The chart is fixed at 800×350 pixels.

KKaustav Sen
75% match
Loading thumbnail…

Untitled

This example combines stacked bar charts and a step-after line graph to compare gas and electrical emissions (kgCO2) with normalized costs across properties. It uses D3 v3 with SVG rendering, reading data from a TSV file. The chart employs ordinal and linear scales, dual y-axes, and d3.svg.axis for ticks, while d3.svg.line defines the cost line with interpolation. Legend rectangles and value labels clarify the two categories.

Ddiegobrivo
75% match
Loading thumbnail…

d3.js learning

This stacked bar chart visualizes yearly fruit consumption data from a CSV-like dataset, tracking redDelicious apples, McIntosh apples, oranges, and pears. It uses `d3.layout.stack` to compute layered series and `d3.scale.ordinal` for the x-axis years, with SVG rects for bars. Hovering reveals a tooltip with the value via mouse events. A legend identifies the four categories with custom labels, while `d3.svg.axis` renders gridlines and axes.

Ttayyabanisar
75% match
Loading thumbnail…

d3.js learning

This stacked bar chart visualizes yearly fruit consumption data from a CSV-like dataset, tracking redDelicious apples, McIntosh apples, oranges, and pears. It uses `d3.layout.stack` to compute layered series and `d3.scale.ordinal` for the x-axis years, with SVG rects for bars. Hovering reveals a tooltip with the value via mouse events. A legend identifies the four categories with custom labels, while `d3.svg.axis` renders gridlines and axes.

Ttayyabanisar
75% match