E

Eri Kim

@IeKimI·18 public vizzes

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.

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.

Loading thumbnail…

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.

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.

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.

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.

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.

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.

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.

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes the commit history of the D3.js repository ecosystem, with each colored layer representing a different D3 package. The thickness of each layer corresponds to the number of commits per week, smoothed using the `array-blur` library. Layer order follows the time of each repository's first commit, revealing the monolithic `d3` repo's early development, a burst of package creation around the 4.0 release in 2014, and subsequent maintenance activity. Built with D3 6.5.0, it loads commit data from a JSON file and uses SVG rendering with `area` generators for the streamgraph shapes, and `scaleOrdinal` with HCL colors for the layers.

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.

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.

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.

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.

Loading thumbnail…

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.

Loading thumbnail…

Loading the Tate Collection Data

This example demonstrates the process of loading and parsing the Tate Collection dataset, displaying the raw JSON representation of the parsed records in a `<pre>` element. The visualization initially shows a loading state before fetching the CSV file, which is then parsed using `d3.csvParse`. Numeric fields like width, height, depth, and acquisition year are converted to appropriate types, and the resulting array of artwork objects is rendered as formatted JSON text, highlighting the data structure and attributes such as artist, title, medium, and dimensions.

Loading thumbnail…

Loading Carnegie Museum of Art Data

This example demonstrates the process of loading and parsing a CSV dataset from the Carnegie Museum of Art, which contains metadata for artworks including titles, creation dates, and dimensions. The visualization initially displays a placeholder showing "LOADING" as a `<pre>` element, then asynchronously fetches the data using the `fetch` API. After the dataset is retrieved, the code uses D3's `csvParse` function to convert the CSV string into an array of objects, converting date fields into JavaScript `Date` objects and numeric fields into numbers. The resulting parsed data is then displayed as JSON in the `<pre>` element.

Loading thumbnail…

Mouse Follower - Eri Kim

A mouse follower displays the text "Click to change the color!" that tracks the cursor’s position across the screen. Clicking triggers a transition that enlarges the font size and updates the text to show the new random RGBA color value. The visualization uses D3.js v7 with unidirectional data flow, managing state through a `setState` function and re-rendering on each interaction. Mouse movement and click events update the state, while D3 transitions animate the text’s size and color display.