Eri Kim - Marks and Channels

100%

Eri Kim - Marks and Channels

✓ Published1🌍 Public

Last edited Feb 11, 2023

Created on Feb 6, 2023

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.

AI-generated description

Pseudo-Visualization: Stacked bar chart

Using data { year: '2015', total: 1000, Poster: 300, Lithograph: 200, Graphite: 400, Paint: 100, }, this pseudo-visualization shows the number of artworks by year, and each color represents the medium used.

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

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

83% match

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

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

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

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

69% match

Loading thumbnail…

plot

This visualization demonstrates the foundational concept of Marks and Channels through a series of simple, generated datasets. It renders points, lines, and rectangles using D3’s `select` and `join` API, with each channel—x-position, y-position, size, length, and color—varied independently to show how data attributes map to visual encodings. The bar chart uses horizontal line lengths, while scattered circles and a color scheme from `d3.schemeCategory10` illustrate categorical hue. The code is modular, with separate JavaScript files for each mark and channel, and relies on D3 modules for the SVG rendering.

Aalexwd019@gmail.com

68% match

Loading thumbnail…

Marks and Channels

This bar chart displays the types of movies released in a particular year, using horizontal bars to compare counts across categories. The visualization loads CSV data from a GitHub gist, parsing numeric year values, and renders the top 20 records as an SVG. Built with React and D3 v5, the chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and maps each movie type to a filled rectangle whose length encodes the year’s value. The chart includes custom axes and grid lines drawn with SVG elements.

Hharika-1929

67% match

Loading thumbnail…

Marks and Channels

This example demonstrates the core visualization concept of marks and channels by rendering five separate SVG panels. Each panel uses the same dataset of five values to illustrate different visual encodings: X position, Y position, circle size, bar length, shape variety, and color hue. The code leverages the D3.js library, specifically using `selection.each()` to iterate over the panel generator functions. It applies D3’s `schemeCategory10` for categorical colors, custom `symbol()` paths for varied shapes, and sets positions and dimensions via `attr()` calls. The visualization serves as a clear, side-by-side comparison of how different channels encode identical data.

Aabell@wpi.edu

66% match