Yujin

@elizabethgim·4 public vizzes

Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart visualizes the populations of the top 20 countries, segmented by religious affiliation, with a color legend highlighting each category. Hovering over a legend entry dims all other religion segments, emphasizing the selected group across bars. Built with D3, it uses `scaleOrdinal` for color mapping, `scaleLinear` for the x-axis, `scaleBand` for countries, and the `stack` API to compute stacked segments from the CSV data.

Nov 18, 2025

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shape rendering with CSS styling. It displays a single blue rectangle positioned within an SVG canvas, with a commented-out circle element showing alternative shape options. The code uses raw SVG markup with an HTML `<rect>` element and sets global page styling through CSS, including margin removal and hidden overflow. The stylesheet defines a highlighted class that applies red text coloring, though this class is not currently utilized in the visible markup.

Nov 18, 2025

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a basic asynchronous report generator that filters a hardcoded array of car objects by price and displays the results as text in the browser. It shows a loading message while the `getCars` promise simulates a two-second delay, then renders each car’s year, make, model, and price using `generateReport` and `formatCar` functions. The code uses the native `Promise` and `setTimeout` APIs, with the DOM updated via `getElementById` and `textContent` in a plain HTML page styled by `styles.css`. The filter threshold is set to 2000, producing a list of affordable vehicles.

Nov 18, 2025

Loading thumbnail…

Fork of React & D3 Starter

This fork of the React & D3 starter demonstrates a minimal integration between the two libraries, displaying the static text “Hello D3 & React” centered on the page. The code combines React 19’s `useRef` and `useEffect` hooks with D3’s `select` function to update the DOM element’s content after the component mounts. The example uses an import map to load React, ReactDOM, and D3 v7 as ES modules, and renders the application via `createRoot` from `react-dom/client`. No data or interactions are present; it serves as a baseline for hybrid React-D3 visualizations.

Nov 18, 2025