Skip to main content
SimilarExport ZIP
100%

Tree Map: MoMA Dataset

✓ Published0🌍 Public
EEri Kim
Last edited Apr 26, 2023
Created on Mar 17, 2023

A treemap visualizes the distribution of artist nationalities in the MoMA dataset, with each rectangle's area proportional to the count of artists from that country. Hovering over a rectangle displays a tooltip showing the nationality and its exact count, while the color scale assigns a distinct hue to each nationality. The visualization uses D3 v7 APIs including `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` with `schemeTableau10`. The code processes an in-memory array of nationality counts, renders rectangles via SVG, and manages the tooltip through D3's `select` method. The layout is computed using the default treemap algorithm with a padding of 4 pixels.

AI-generated description

I made a tree map using the Nationality column in MoMA dataset, which reprsents artist's nationality. When you hover over an area, it displays a tooltip with the label and count.

Reference: https://d3-graph-gallery.com/graph/treemap_basic.html

ISC Licensed

Similar vizzes

Loading thumbnail…

Tree with MoMA Dataset

A hierarchical tree visualizes the Museum of Modern Art's collection, with the root node labeled "Museum of Modern Art" and branches for departments like Architecture & Design, extending to classifications such as Architecture and Design. The d3.tree layout and d3.hierarchy arrange nodes, while circles are colored by top-level department using d3.schemeCategory10, and hover tooltips display node names. Data is parsed from a CSV using d3.csvParse and aggregated into the tree structure.

EEri Kim
78% match
Loading thumbnail…

MoMA Artworks - Department & classification

This visualization combines a tree diagram with two pie charts to explore the MoMA dataset’s Department and Classification fields. The tree uses a hierarchical layout to show the distribution of artworks across departments and their sub-classifications, with interactive highlighting of connected nodes on hover. The two pie charts display the counts of artworks by Classification and by Department, each with interactive tooltips and legend-based highlighting. The visualization is built with Vue, d3.v7, and SVG, using d3.tree, d3.pie, d3.arc, and d3.scaleOrdinal for rendering and animations.

EEri Kim
75% match
Loading thumbnail…

MoMA Artworks Visualizations

This gallery displays four interactive visualizations of MoMA artwork data, covering artists, nationalities, mediums, and departmental classifications. Each visualization loads in an iframe and can be enlarged by clicking, using D3.js v5 selection methods like `selectAll` and classed toggling. The code relies on `d3.select`, `d3.selectAll`, and event handling to toggle full-screen viewing, resizing iframes dynamically. The visualizations themselves are embedded from VizHub, with the surrounding page styling handled by CSS for layout and captions.

EEri Kim
73% match
Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie
73% match
Loading thumbnail…

Tree Map

This tree map displays hierarchical data as nested rectangles sized proportionally to their values. The example renders an SVG graphic at 960 by 500 pixels, pulling in D3 v5 from a CDN. The code imports `select` and `arc` from the D3 library, though the visualization logic itself remains minimal in the shown files. The page references a separate stylesheet and JavaScript bundle, with the SVG container set up for the treemap layout. The map is generated using D3’s standard tree-map approach, though the actual data and layout calculations are not explicitly defined in the visible code.

Eedmond gihozo
73% match
Loading thumbnail…

Fork of Pie Chart with Interactive Color Legend

This pie chart visualizes the distribution of artwork classifications in the MoMA dataset, with each slice sized by the count of works in a department. Hovering over a slice reveals a tooltip showing the department name and count, while hovering over the interactive color legend dims all non-matching slices to highlight the selected category. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal with schemeTableau10 for coloring, built with Vue and rendered as animated SVG. Data is loaded from a CSV and aggregated using d3.flatGroup.

EEri Kim
72% match
Loading thumbnail…

Pie Chart with Interactive Color Legend

This pie chart visualizes the distribution of artwork classifications in the MoMA collection, using data loaded from a CSV file. Hovering over a pie slice displays a tooltip showing the classification label and count, while an interactive legend on the right highlights the corresponding slice when moused over. The chart is built with D3.js v7, using `pie()` and `arc()` for slice generation, `scaleOrdinal` with `schemeTableau10` for colors, and transitions for opacity changes during legend interactions.

EEri Kim
72% match
Loading thumbnail…

Bar Graph with Dropdown Menu of Artists

A dropdown menu of artists filters a bar graph showing the number of MoMA artworks per year for the selected artist. Hovering highlights bars in orange with a tooltip. The visualization loads data from a CSV using D3 v7's `csvParse`, builds the menu with D3 selections, and computes annual counts via `d3.rollup`. Additional buttons open a thumbnail gallery or histogram, though the code for the latter is incomplete.

EEri Kim
72% match