Skip to main content
SimilarExport ZIP
100%

Eri Kim - First Viz

✓ Published2🌍 Public
EEri Kim
Last edited Feb 26, 2023
Created on Feb 10, 2023

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.

AI-generated description

First Visual: Stacked bar chart

Using the top 10 most used mediums, I created a stacked bar chart for the first 20 dates (years) available in the dataset. As shown in the label on top, each color represents a different medium.

The dataset was too big (too many values for both x: medium and y: year) so I used the top 10 most used mediums and first 20 years only.

Reference: https://observablehq.com/@thetylerwolf/day-9-stacked-bar-chart

MIT 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
88% 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
83% 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
75% match
Loading thumbnail…

Pseudo-Visualization Francesca Sajedi

This example shows a stacked bar chart of artwork medium counts (Graphite, Poster, Lithograph, Paint) by year from 2015 to 2020, with each category colored via `d3.schemeCategory10`. The bars are built using `d3.stack()` and `d3.scaleBand` for the x-axis, with `d3.scaleLinear` for the y-axis. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`. The visualization uses static data defined in the script and is styled with a minimal CSS reset.

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

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
67% 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
66% match
Loading thumbnail…

Viz - Bar - default

A simple bar chart displays four categorical values, mapping keys to bar heights. The chart is rendered as SVG inside a 960x500 viewport, with bars offset by a translation. The code uses D3 v4 to select the SVG group and calls the `viz.bar()` function from the Viz.js library (v1.3.0), passing the dataset directly. Bars are styled with a steelblue fill via CSS. The data is defined inline as an array of objects with key and value properties.

NNPashaP
65% match