Skip to main content
SimilarExport ZIP
100%

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

✓ Published1🌍 Public
Pprincit
Last edited May 5, 2020
Created on May 5, 2020

This interactive stacked bar chart visualizes sales by sub-category and customer segment, using animated transitions and hover effects to highlight individual segments. Built with D3.js, it employs `d3.layout.stack` for stacking, `d3.svg.axis` for scales, and `d3-tip` for tooltips showing sales values. A color legend allows users to filter and emphasize specific segments, while the base bars fade to provide focus. The visualization reads from static CSV data and renders in SVG.

AI-generated description

This visualization was originally forked from one of Curran Kelleher's stacked bar chart examples .

MIT Licensed

Similar vizzes

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes sales by segment and subcategory, with each bar stacked to represent the total sales per segment. Hovering over a legend item highlights the corresponding subcategory across all segments, while a tooltip shows the exact sales value. The visualization uses D3.js (v3) with the `d3.layout.stack` API for stacking, `d3.legend` for the color legend, and `d3-tip` for tooltips. Data comes from a CSV file, and the chart includes animated transitions when re-sorting the data.

Pprincit
96% match
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This example shows a normalized stacked bar chart comparing sales totals across customer segments, with each bar subdivided by product subcategory. Hovering over a legend entry highlights the corresponding subcategory’s bars in the foreground while dimming the rest. The visualization is built with D3.js (v3), using `d3.layout.stack` for stacking, `d3.svg.axis` for scales, and the `d3-legend` and `d3-tip` plugins for color legends and tooltips. Data comes from CSV files, and the SVG output includes animated transitions between different data groupings.

Pprincit
95% match
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes 2018 general project funding items by institution nature, breaking down sales data across sub-categories and customer segments. Built with D3.js, it uses `d3.nest()`, `d3.layout.stack()`, and ordinal/linear scales to render grouped layers. Hovering over the color legend highlights specific segments, while `d3-tip` displays detailed tooltips with item counts. The SVG animation supports fade effects between base and foreground bar layers for comparative analysis.

Pprincit
94% match
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This example uses an animated stacked bar chart to illustrate the distribution of project funding items across different institution types in 2018. The chart displays grouped data by segment and sub-category, with interactive hover effects that highlight specific categories and tooltips revealing exact sales figures. The visualization is built with D3.js, utilizing `d3.layout.stack` for the stacked bar layout, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend that filters which sub-category bars are prominently shown. The data is sourced from a CSV file containing sales records sorted by segment and sub-category.

Pprincit
94% match
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This visualization displays the sales totals for various product segments, broken down by sub-category, as a stacked bar chart. The chart uses an SVG rendering and includes an animated tooltip that shows the specific sales value for a segment when hovered. Built with Vue and D3, the visualization employs `d3.layout.stack` to create the stacked bars, `d3.scale.ordinal()` for the x-axis, and `d3.legend.color` for the interactive legend that isolates individual sub-categories. The data originates from a CSV file containing sales figures.

Eest85
94% match
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart displays the sum of sales for various sub-categories (like Accessories, Binders, Phones) grouped by market segment (Consumer, Corporate, Home Office). The visualization uses a responsive layout with overlaid bar groups and a color legend that filters the foreground bars on hover via an overlay mechanism. Built with D3.js (v3.5.5), it uses `d3.layout.stack` for the layered bar construction, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips showing the exact sales value per sub-category within a segment. Data is loaded from CSV files containing pre-aggregated sales totals.

Nnifemi-sys
93% match
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes general project funding items for 2018, segmented by the nature of institutions and broken down by sub-category. It uses D3.js (version 3.5.5) with the `d3.layout.stack` API to create the stacked layers, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend. Hovering over the legend highlights a specific segment while fading the others, and a tooltip from `d3-tip` displays the exact sales value for each item. The chart is rendered as an SVG with a smooth animation.

Pprincit
93% match
Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes the distribution of sales amounts for various product subcategories, segmented by consumer, corporate, and home office institutions. The chart displays total sales per subcategory as stacked segments, with each color representing a different segment. Hovering over a segment reveals its specific sales value. The visualization is built with D3.js, using the `d3.layout.stack` for the stacked layout and `d3.legend.color` for the interactive color legend.

Pprincit
93% match