Skip to main content
SimilarExport ZIP
100%

D3 Example

✓ Published2🌍 Public
KKainatIqbal
Last edited May 22, 2020
Created on May 14, 2020

This visualization displays sales data across product sub-categories, segmented by customer type (office, home, consumer) as three colored lines. The chart uses D3.js v3 with an SVG rendering approach, employing `d3.svg.line`, `d3.scale.linear`, and `d3.nest` to group data from the CSV file. Axes are formatted with a custom SI tick formatter, and a categorical color legend is generated using the d3-legend plugin. The interactive rendering responds to the loaded dataset, drawing one path per segment.

AI-generated description
MIT Licensed

Similar vizzes

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
85% match
Loading thumbnail…

D3 Example

This example visualizes profit across regions and sub-categories from a CSV dataset, using color-coded lines to show trends over the profit axis. It renders as an SVG chart with axes and a color legend. The code uses the D3 v3 library, specifically `d3.csv`, `d3.nest`, `d3.svg.line`, `d3.svg.axis`, and `d3.legend.color` from the d3-legend plugin.

Pprincit
83% match
Loading thumbnail…

Example

This multi-series bar chart displays product category sales across three customer segments, with each bar stacked to show the cumulative sales total per category. The visualization uses D3.js with SVG rendering and a custom legend that filters the displayed segments on hover, dimming the base bars and highlighting the selected layer. Data is loaded from a CSV file, and the chart employs d3.scale.ordinal, d3.layout.stack, and d3.legend to handle axes, stacking, and color encoding. Animated transitions are not present, but the interactive tooltip via d3-tip provides per-bar sales values.

SShashwat Priyadarshi
82% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). It displays aggregated sales totals for each sub-category, with each segment represented by a differently colored stack. The visualization uses D3.js version 3 with `d3.layout.stack` to create the stacked layers, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.legend` for a color legend. Animated hover effects and tooltips via `d3-tip` highlight individual segment contributions. Data comes from a CSV file, rendered as an SVG with rotated x-axis labels.

SSarahKiyani
80% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across product sub-categories, broken down by customer segment (Consumer, Corporate, Home Office). The visualization uses D3.js to render an SVG with animated transitions, where hovering over a color legend highlights a specific segment's bars. It employs `d3.layout.stack`, `d3.scale.ordinal`, and `d3.legend.color` to structure and annotate the data, which is loaded from CSV files containing sales figures. Tooltips via `d3-tip` display exact values on interaction.

Ssafdarawan
80% match
Loading thumbnail…

D3 Example

A stacked horizontal bar chart displays sales totals per product sub-category, with bars segmented by customer segment and colored using `d3.scale.category10`. Hovering over a legend entry highlights that segment by fading other bars behind a semi-transparent overlay and re-drawing the selected segment in the foreground, while `d3-tip` shows tooltips. The chart uses D3 v3 with SVG, including `d3.layout.stack` for stacking and `d3.legend.color` for an interactive color legend, and reads data such as the provided `lebron.csv` file.

Pprincit
79% match
Loading thumbnail…

D3 Graph Example

This example visualizes sales and efficiency data over time from a CSV file. It uses D3.js v5 with a React framework to render an SVG chart with steelblue bars for sales and a line for efficiency. The chart features dual y-axes, with sales on the left and efficiency on the right, using `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `line` for the visualization.

DDaniel Rivera
79% match
Loading thumbnail…

Activity6_Question3

This example shows quarterly sales trends for five product categories (Electronics, Furniture, Clothing, Toys, Books) as a scatter plot with color-coded circles. The visualization uses d3.csv to load data from data.csv, then applies d3.scalePoint for the quarter axis and d3.scaleLinear for sales values, with d3.scaleOrdinal and d3.schemeCategory10 for color mapping. Circles are appended for each category per quarter, while axis labels and a legend are generated using d3.axisBottom, d3.axisLeft, and d3.select. The SVG rendering uses D3 v7 within a React project, producing a static chart with a white background and black-stroked data points.

Ggroup118sai@gmail.com
79% match