Skip to main content
Log in
H

himchan94

@himchan94·9 public vizzes

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented by a pie slice emanating from the center of an SVG canvas. It loads color data from a CSV file using D3’s `csv` utility, then relies on React hooks (`useState`, `useEffect`) to manage the asynchronous data fetch and rendering. The pie layout and arc paths are generated with D3’s `pie` and `arc` functions, while React elements construct the SVG paths, filling each slice with its corresponding hexadecimal color value.

Feb 13, 2022
Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face rendered as an SVG, built with React and D3 v5. The face uses a yellow circle with a black stroke for the head, two black eye circles, and a mouth drawn as a thick arc using D3's `arc()` generator with specified inner and outer radii and start/end angles. All elements are positioned within a `<g>` transform, with dimensions and offsets defined as constants. React 16.9 renders the SVG components, while D3 provides the arc path generation for the mouth.

Feb 13, 2022
Loading thumbnail…

Fork of Smiley Face Part II

This example shows a full-screen yellow smiley face rendered as a responsive SVG, with black stroke outlines, two eyes, and a mouth. It uses React 16.9 and ReactDOM to declaratively build the SVG elements, with dimensions calculated from `window.innerWidth` and `window.innerHeight`. The face is centered using a `transform` translation, and all shapes are positioned relative to that origin via props like `cx`, `cy`, `r`, and `stroke-width`.

Feb 13, 2022
Loading thumbnail…

Fork of Let's Make a Face Part I

A bright yellow circle with a thick black stroke fills the center of an SVG canvas, forming a simple face. Two smaller black circles are positioned on either side of the face for eyes. The code uses raw SVG elements (`circle`) to render the shapes, setting coordinates and radii directly. This example demonstrates basic geometric composition without data binding or interaction, focusing on SVG styling and layout.

Feb 13, 2022
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization presents migrant deaths and disappearances worldwide, linking a bubble map to a brushing-enabled date histogram. The map projects each incident's coordinates using `d3.geoNaturalEarth1` and `d3.geoPath`, with circle sizes scaled to the death toll. The histogram aggregates monthly totals, and brushing a time range filters the map in real-time. Built with React and D3 v5, it renders vector graphics via SVG, sourcing data from the Missing Migrants Global dataset and world atlas TopoJSON.

Sep 14, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

The chart displays the population of each country as horizontal bars, sorted in descending order, with tooltips revealing the exact population value on hover. Built using the Vega-Lite API within a D3.js framework, the visualization is rendered as an SVG and dynamically sized to fit the browser window. The code fetches a CSV dataset from a GitHub gist and applies custom styling to axes and guide labels for improved readability.

Sep 8, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg) and horsepower for a set of automobiles, with points colored by origin and sized by weight, using the vega-lite-api to construct a scatter plot. The code loads CSV data from the UCI Auto MPG dataset via d3.csv, then renders the chart with Vega-Lite and Vega, configured with a custom dark theme for improved readability. Hovering over a point reveals the car’s name through a vega-tooltip handler. The visualization fills the entire viewport and uses a fit autosize mode with zero-suppressed scales.

Sep 8, 2021
Loading thumbnail…

BUBU

A yellow circle with a thick black outline is centered on an SVG canvas. Two small black circles serve as eyes, and a wide, dark arc forms a mouth. The face is composed using basic shapes, with two short black rectangles acting as limbs. Built with React and D3, the visualization uses D3's `arc` function to construct the mouth path and React's `svg` elements for the other features, rendered entirely as vector graphics.

Sep 7, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

A bright yellow circle with a thick black stroke fills the center of an SVG canvas, forming a simple face. Two smaller black circles are positioned on either side of the face for eyes. The code uses raw SVG elements (`circle`) to render the shapes, setting coordinates and radii directly. This example demonstrates basic geometric composition without data binding or interaction, focusing on SVG styling and layout.

Sep 7, 2021