Skip to main content
SimilarExport ZIP
100%

Interactive Visualisation

✓ Published0🌍 Public
Wwalesiam
Last edited Apr 20, 2023
Created on Apr 20, 2023

A treemap visualizes hierarchical sales data from a UK sales CSV, with regions and towns nested by country. Users hover over rectangles to see a breadcrumb showing the region, town, and total sales value. Built with React and D3 v7, the chart uses `d3.stratify`, `d3.treemap`, and `d3.scaleOrdinal` to structure and color the hierarchy, while SVG rendering and `mouseenter` events drive the interactive labels and layout.

AI-generated description

Boilerplate code for a React + D3 visualization with:

  • CDN links for React, ReactDOM, and D3
  • Basic React boilerplate
  • Variables for dimensions and margins
  • A VizContainer component that:
    • Abstracts SVG/group container elements
    • Follows the margin convention
    • Show the margins, which can be easily removed by deleting the showMargins={true} prop
MIT Licensed

Similar vizzes

Loading thumbnail…

Tree Map

This tree map visualizes hierarchical sales data for US states and cities using a treemap layout. The visualization encodes each leaf node as a rectangle, with area proportional to sales values and color assigned by parent state via an ordinal scale with the Tableau 10 scheme. The code loads data from a JSON file using `d3.json`, builds a hierarchy with `d3.hierarchy` and `sum`, then applies `d3.treemap` to compute positions. Rectangles and white labels are rendered as SVG elements within a container group.

DDasbach.EJ
79% match
Loading thumbnail…

Zoomable Treemap

This zoomable treemap visualizes UK Home Office flight data from 2011, showing hierarchical relationships between destinations, suppliers, and ticket classes. Built with D3 v2 and rendered as an SVG with smooth zoom animations, the treemap uses nested rectangles sized by paid fare amounts, with color encoding categories. Users can click to zoom between hierarchy levels. The data is loaded from a CSV and transformed using d3.nest, while the custom layout function optimizes the treemap for the current zoom state, enabling fluid transitions as users navigate the data.

CCBasis
76% match
Loading thumbnail…

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Hhanulik.ondrej@gmail.com
75% match
Loading thumbnail…

Untitled

This interactive scatter plot displays sales versus profit for individual customers, with data points colored by region and filtered by a year selector. Built with React and D3.js v4, it renders as an SVG animation, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeSet2` for regional colors, and `d3.csv` to load the Superstore dataset. A dropdown menu populated via `d3.select` and `append('option')` lets viewers switch between years, updating the plotted circles while tooltips show customer details on mouseover.

SSai SriHarsha Griddaluru
75% match
Loading thumbnail…

Untitled

This interactive stacked bar chart displays the sales distribution across cities for a selected customer segment, using data from a CSV file of store transactions. A dropdown menu filters by segment, while a checkbox toggles city sorting by total sales value. Built with D3 v5 and React, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the bars, with smooth transitions animated via `transition().duration()`. SVG elements and axes update dynamically in response to user selections.

SSarahKiyani
75% match
Loading thumbnail…

Untitled

This example displays a treemap visualization of hierarchical data, with the current view showing video game sales grouped by platform, or movie and Kickstarter data sets selectable via links at the top. It uses the d3 v4 API, specifically `d3.treemap()`, `d3.hierarchy()`, and `d3.scaleOrdinal` with the `schemeCategory20` color palette, to render the nested rectangles. The SVG output includes tooltips on mouseover, which display the name, category, and value of each tile using data attributes.

Vvaynexie
74% match
Loading thumbnail…

Treemap Demo

This treemap demo shows a hierarchical dataset of a CEO’s employees, grouped into three boss-level parents, with each leaf rectangle sized by its numeric value. The interface includes buttons to mutate the data: changing leaf values, adding or removing child nodes, and adding or removing entire parent groups. The visualization updates with animated transitions on rectangles and text labels, rendered in SVG via React. It uses d3.hierarchy and d3.treemap for layout, d3.scaleOrdinal for color coding by parent, and d3.scaleLinear for opacity based on value.

Ggeorgeeeee
74% match
Loading thumbnail…

Untitled

This interactive treemap visualizes a hierarchical dataset with nested rectangles sized by a primary numeric measure and colored by a secondary metric. Users can hover over nodes to see tooltips with additional data, while clicking parent and grandparent rectangles zooms into deeper levels of the hierarchy. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to aggregate data, with SVG rendering and smooth transitions between zoom states. The hover effects and tooltip functionality are implemented with CSS and JavaScript event handlers.

GGuillamon
74% match