Skip to main content
SimilarExport ZIP
100%

MoMA Streamgraph

✓ Published1🌍 Public
EEri Kim
Last edited Apr 11, 2023
Created on Feb 24, 2023

This visualization displays the most used mediums in MoMA’s collection over time as a streamgraph, with each colored layer representing a medium like Lithograph or Ink. The chart uses d3.stack with a wiggle offset to create the flowing shapes, applies smoothing via array-blur, and labels areas using the d3-area-label library. Hovering an area highlights it with a white border, and a legend helps identify smaller layers. Data comes from a CSV file of MoMA artworks, parsed and scaled by year.

AI-generated description

Streamgraph with labels

x data is also parsed and scaled as date/year.

I filled in the missing values that were creating white gaps. I also applied smoothing.

Using d3-area-label, I added labels in the streampgrah. For labels that are too small, color legend is available.

I also added a hover effect so when you hover an area, it is outlined with a white border.

References:

https://d3-graph-gallery.com/graph/streamgraph_template.html

https://vizhub.com/curran/01568b13c29f437f9a2684bb190c3737

ISC Licensed

Similar vizzes

Loading thumbnail…

Eri Kim - First Viz Iteration

This streamgraph visualizes how the use of different art mediums changes over time, based on MoMA collection data. The chart displays ten medium categories, such as lithograph, ink, and graphite, as flowing bands across a timeline. The visualization uses D3's `stack` with a silhouette offset, `area` shapes, and `schemeTableau10` colors. The code processes a CSV file using `csvParse` and aggregates data by date and medium, with the state managed through React-style props in a Vue framework.

EEri Kim
80% 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
78% match
Loading thumbnail…

Line Chart

This line chart shows the number of artworks per year in the MoMA collection, with time on the x-axis and artwork count on the y-axis. The chart uses the MoMA dataset, parsing dates with `d3.timeParse` and scaling them with `d3.scaleTime`. Data is aggregated using `flatGroup` and sorted by year before being rendered with a `line` generator. The visualization is built with D3 v7 within a Vue framework.

EEri Kim
78% 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
75% 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
74% 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
73% 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
73% match
Loading thumbnail…

Eri Kim - Transforming Data

This visualization presents a histogram of artworks from the MoMA collection, grouping them by medium and sorting the counts in descending order. It processes the CSV data with `flatGroup` and `map` to aggregate records, then displays the resulting summary as a JSON object. The code uses D3 v7 for data parsing and manipulation, and fetches country codes from the RestCountries API.

EEri Kim
72% match