Han Jinseok

@moregorenine·5 public vizzes

AXIS

This example demonstrates a simple bar chart with a labeled x-axis ranging from 0 to 100. The axis is placed at a fixed vertical position using SVG transforms, with a single semi-transparent blue bar anchored at the value 50. Built with D3 version 7, it uses `d3.scaleLinear` to map data values to pixel coordinates and `d3.axisBottom` to render the tick marks and labels. The visualization is drawn as an SVG element with a background color, highlighting the basic workflow of creating scales and axes.

May 10, 2022

Loading thumbnail…

Untitled

This example demonstrates how VizHub’s `package.json` support enables explicit dependency management and custom library mappings. The code configures React and ReactDOM to load from unpkg via specified global names and CDN paths, using the `vizhub.libraries` field. Unlike a typical visualization, the JavaScript file reads stdin with `fs` and prints an ascending sequence, while the page itself renders styled static text. The example highlights the setup process for importing packages with ES6 syntax rather than showcasing interactive data rendering.

Jun 18, 2021

Loading thumbnail…

Wafer Map

This visualization displays the spatial distribution of defect values across a semiconductor wafer, with each cell representing a coordinate from a CSV dataset. The code renders an SVG grid using D3 v6, where `d3.scaleLinear` maps x and y coordinates to pixel positions and axes are added via `d3.axisLeft` and `d3.axisBottom`. Rectangles are positioned with inverted y-scaling to match Cartesian orientation, and the steelblue fill is applied uniformly through CSS, though the value column remains unused in the current rendering.

Mar 11, 2021

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for 27 countries, with bars extending from a linear scale and country names on a band scale. The example demonstrates customizing axes by applying D3’s `axisLeft` and `axisBottom` within a margin-based layout, using `scaleLinear` and `scaleBand` from D3 v6. Data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1000. The SVG rendering uses steelblue rectangles, with axis text styled via CSS at 1.4em.

Mar 10, 2021

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population estimates for 27 countries, sorted by decreasing size from China to South Korea. The visualization uses D3 v6 with `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to row positions. Data loads from `data.csv`, multiplies each population value by 1,000, and renders steelblue SVG rectangles on a 960×500 canvas with fixed margins and a left-aligned label axis.

Mar 10, 2021