Tree with MoMA Dataset

Tree Map: MoMA Dataset

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.

78% match

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.

77% match

Loading MoMA Data

This example demonstrates the initial step of loading and parsing the Museum of Modern Art’s collection dataset using d3.csvParse within a Vue-based application. It fetches the CSV file and converts raw text into an array of objects, transforming numeric fields like dimensions and dates (negating BeginDate and EndDate to represent years) and converting zero values to null. The parsed data is then displayed as raw JSON in a pre element using D3’s selection and join methods.

73% match

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR

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.

Tree

A hierarchical tree diagram displays the structure of programming languages, grouped into Web, System, and Data categories. The visualization uses a static dataset defined in JavaScript. D3.js v7 with an SVG rendering approach draws the graph, employing `d3.hierarchy` and `d3.tree` to compute the layout. Nodes are represented as colored circles, color-coded by depth using `d3.scaleOrdinal` with `d3.schemeCategory10`, while links and text labels are appended via D3's data-join methods. The tree is oriented horizontally, placing parent-child connections left-to-right.

PP Manisha

Art tree

A hierarchical tree visualization renders the structure of world regions and countries, with the root labeled "World" branching into continents, subregions, and individual nations. The layout uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates curved path links between parent and child nodes. The SVG canvas fills the entire viewport, displaying the data as an artful, horizontal branching diagram without labels, emphasizing the organic, tree-like distribution of geographic relationships from the JSON dataset.

CCarloWK1202