Eri Kim - First Viz Iteration

100%

Eri Kim - First Viz Iteration

✓ Published1🌍 Public

Last edited Feb 24, 2023

Created on Feb 19, 2023

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.

AI-generated description

First Viz Iteration: Streamgraph

After this week's reading and lecture, I decided to change my stacked bar chart to a streamgraph for this iteration. Streamgraphs are often used to show changes in different categories over time when there are many categories and when they start and stop at different times. I decided to use this graph because the purpose of this visualization is to show the trend and patterns of changes in the medium used in artworks over time. I think this graph type shows the trend better as it gives a nice flow of each category/medium.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Eri Kim - First Viz

This stacked bar chart from Eri Kim’s first visualization shows the total number of artworks for the top ten most common mediums, broken down by year across the first 20 years of the collection. Each colored segment represents a specific medium, with a legend identifying each. The chart is built using D3 version 7, leveraging `d3.stack` for stacking, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeTableau10` for the categorical color palette. Data is loaded and parsed from a local CSV file.

EEri Kim

88% match

Loading thumbnail…

MoMA Streamgraph

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.

EEri Kim

80% 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

78% match

Loading thumbnail…

Eri Kim - Marks and Channels

This stacked bar chart shows the number of artworks created per year from 2015 to 2020, with each colored segment representing a different medium (Graphite, Poster, Lithograph, or Paint) and its height corresponding to the count. Built with d3.v7, it uses `d3.scaleBand` for the x-axis years and `d3.scaleLinear` for the y-axis totals, while `d3.stack()` keys the data categories and `d3.schemeCategory10` assigns colors to each medium. The chart renders rectangles via `d3.select` joins in a static, non-interactive SVG.

EEri Kim

77% 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

69% 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

68% 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

67% 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

67% match