Changbeom Shim

@scbeom·10 public vizzes

Mouse Follower

A static SVG circle sits at the center of a 960 by 500 viewport in a React application. The component uses ReactDOM to render the circle with fixed `cx`, `cy`, and `r` properties, while the HTML page includes commented-out attempts to fetch a CSV of CSS named colors from a GitHub gist. No mouse tracking logic is implemented; the title refers only to a future intent, and the visible code does not handle any pointer events or dynamic movement.

Feb 24, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API, logging the raw text to the browser console. The code defines an asynchronous `fetchText` function that retrieves the CSV file from a GitHub Gist containing named CSS colors. It then calls this function and outputs the result with `console.log`. The example includes commented-out alternative approaches using chained `.then()` methods on the fetch response, illustrating different ways to handle asynchronous text retrieval.

Feb 24, 2022

Loading thumbnail…

Cars Scatter Plot

The scatter plot displays the top 10 most populous countries, with population on the x-axis and country names on the y-axis, rendered as clustered crimson circles. It uses D3 v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, with `format` for tick labels and a custom title. Data is loaded from `data.csv` via `csv()`, and the SVG view is fixed at 960×500 pixels.

Feb 24, 2022

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using a linear scale for the x-axis and a point scale for the y-axis. The visualization renders circles with a fixed radius of 18 pixels, colored crimson, and includes axis labels and a title. The code uses d3.csv, scaleLinear, scalePoint, axisLeft, axisBottom, and format from the D3 v7 library, with data loaded from the CSV file and scaled by a factor of 1000.

Feb 24, 2022

Loading thumbnail…

Customizing Axes

This bar chart visualizes the top 10 most populous countries using D3.js v7 with an SVG rendering. It highlights customized axes: the y-axis displays country names without an axis line, and the x-axis uses a custom tick formatter converting values from millions to billions (e.g., 'G' replaced with 'B'). Grid lines extend from the x-axis ticks. Population data is loaded from a CSV file via `d3.csv` and scaled linearly for the x-axis and with `d3.scaleBand` for the y-axis. Axis labels and a title are added as text elements.

Feb 24, 2022

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of ten countries, ranging from China at the top with over 1.4 billion people to Mexico at the bottom with approximately 130 million. It uses D3's `scaleLinear` and `scaleBand` to map population values and country names to the SVG canvas, with `axisLeft` and `axisBottom` generating the axes. The code loads data from a CSV file via `csv` and renders steelblue rectangles, with an explicit `+d.population * 1000` conversion to reflect full population figures.

Feb 24, 2022

Loading thumbnail…

Let's make a face with D3.js!

A stick-figure face, composed of a yellow circle with a blue stroke, two circular eyes, and rectangular eyebrows, sits centered on an SVG canvas. The face’s mouth is drawn with the D3 `arc` geometry generator, which creates a pie-shaped path. A `transition().duration(2000)` chain alternately shifts the eyebrow group up and down, producing a looping animation. The example builds its scene using D3's imperative `select` and `append` API, positioning elements via `attr('transform', …)` rather than a data-driven or force-based layout.

Feb 24, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shape elements and CSS classes can be combined to create a static composition of circles, rectangles, lines, and paths. The SVG markup uses native elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with inline attributes for fill, stroke, and transforms like `scale` and `translate`. CSS rules in `styles.css` style the `.lines` group and its child paths, adding black strokes with a cyan stroke-linejoin on paths. No external JavaScript libraries are used; the visual is purely declarative, relying on browser-rendered SVG and linked stylesheet.

Feb 24, 2022

Loading thumbnail…

Cars report

This example demonstrates asynchronous data loading and D3.js v5. It displays a "Loading ..." message before fetching a hardcoded JSON array of car records via a custom `getCars` function. The code imports from d3 and local ES6 modules, though the visible output ultimately shows a static "Hi!!!!" message, with commented-out logic for filtering and formatting car data by price.

Feb 23, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a single centered message, "Hello HTML???", rendered in very large text using a custom CSS class. The page consists of an HTML file with inline styles and a `<div>` element that carries the message. It uses plain HTML and CSS to demonstrate the basic structure of a web page, with no external libraries or JavaScript. The rendering approach is static text styled through the CSS `font-size` and `text-align` properties.

Feb 23, 2022