Skip to main content
SimilarExport ZIP
100%

d3.js learning

✓ Published0🌍 Public
SSarahKiyani
Last edited May 31, 2020
Created on May 31, 2020
Forked from React Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A treemap-style bar chart visualizes shipping statistics from a CSV file, showing categorical values like department, description, and item value. The visualization uses D3.js v4 with jQuery to load and parse the `ShippingStats.csv` data, then renders an interactive SVG with mouse-hover effects that highlight bars by expanding their stroke and dimensions. The x-axis labels are dynamically mapped from caption data, while scales are built using `d3.scale.ordinal` and `d3.scale.linear`, and axes are created via `d3.svg.axis`.

Aahemdalssafi
79% 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
78% 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
78% match
Loading thumbnail…

D3 Charts

This example presents several D3 chart types—an animated bar chart, a grouped bar chart with a legend, and a stacked bar chart—with controls for interacting with the data. The animated bar chart uses a D3 module pattern with a reusable `barGraph` function, including scale bands, grid lines, transitions, and sorting capabilities. The grouped and stacked bar charts use D3’s `.stack()` and `.scaleBand()` to display categorical data from a CSV file, with each subgroup assigned a distinct color. The visuals are rendered in SVG and canvas, and the graph modules are composed in a single HTML document with a menu for switching between chart views.

SSubhamChhetri
77% match
Loading thumbnail…

D3 Example

A stacked bar chart shows Sales across Product Sub-Categories, with bars segmented by Customer Segment, using a categorical color scale. The visualization renders as SVG via D3 v3’s `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`, with a legend from d3-legend. Data is loaded from a CSV file containing order details, while axes use a custom SI tick formatter that converts billions to "B".

Pprincit
77% match
Loading thumbnail…

Stacked Bar Graph

This stacked bar graph visualizes three numeric values per category from a CSV file, with each bar segment colored by series and a legend identifying the categories. Built with D3 v7 and React, it uses `d3.csv` to load data, `d3.stack` to compute stacked segments, and `d3.scaleBand` and `d3.scaleLinear` for positioning. SVG rendering includes axes, a title, and a legend, with colors from `d3.schemeCategory10`.

Hharsha
77% match
Loading thumbnail…

d3.js learning

This example demonstrates a stacked bar chart built with D3.js, visualizing changes in fruit production (apples, oranges, and pears) over multiple years. The chart uses D3’s `d3.layout.stack` to create the stacked series, `d3.scale.ordinal` for the x-axis, and `d3.svg.axis` for the axes. Hovering over a bar segment reveals a tooltip displaying the exact value. The chart is rendered as SVG, with a legend identifying each fruit series and colors assigned to each category.

OOhayouKaminari
77% match
Loading thumbnail…

D3 Layouts - Stacked bar chart

This example shows a stacked bar chart built with D3.js, using the `d3.stack` API to arrange three categories—apples, oranges, and grapes—into cumulative segments for five data groups. The visualization renders directly to an SVG element, with each stacked segment colored via `d3.scaleOrdinal` and the `d3.schemeCategory10` palette. A band scale positions the bars horizontally, while a linear scale maps the cumulative totals to the chart’s height, with the stacking order sorted descending. The input dataset is a hardcoded array of objects.

KKaustav Sen
77% match