ChaeHyun-Kim

@ChaeHyun-Kim·5 public vizzes

Untitled

Four colored bars represent categorical values A through D, with heights corresponding to data attributes of 10, 20, 60, and 100. Using static CSS classes and inline `data-val` attributes, the HTML structure defines each bar’s color and relative height. D3 version 6 is loaded but not actively utilized in the visible code, with styling handled entirely through CSS selectors and the `nth-of-type` pseudo-class.

May 31, 2021

Loading thumbnail…

histogram

An interactive histogram displays aggregate survey data grouped by student subject preference, with bars representing selectable metrics like average height, stress, or expense. Using D3 v5, a dropdown menu generated from the data fields triggers a selection change, updating the y-axis scale and re-rendering bar positions and heights via attribute updates. The visualization uses `d3.nest()` and `d3.rollup` to compute averages and sums from the JSON source, with axes created using `d3.axisBottom` and `d3.axisLeft`.

May 31, 2021

Loading thumbnail…

test

This animation shows a yellow smiley face with black eyes and eyebrows that raise and lower repetitively over time. The face is drawn using SVG shapes, with a large circle for the head, smaller circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows animate via chained `transition()` calls that shift their vertical position over two-second intervals. The code imports `select` and `arc` from the D3 v6 library and uses `transition.attr` to create the movement.

May 31, 2021

Loading thumbnail…

bar chart

This example renders a horizontal bar chart of country populations using React hooks to load data from a CSV file. The visualization uses Victory Charts’ `VictoryBar` and `VictoryChart` components, while `d3.csv` fetches and parses the data. Bars encode population values for ten countries, with the chart styled through Victory’s padding and tick label properties. The code demonstrates integrating D3’s data-loading capabilities with React’s `useState` and `useEffect` hooks within a functional component.

May 31, 2021

Loading thumbnail…

html.start

This example demonstrates a minimal HTML page that integrates D3.js and JavaScript. It shows a blank webpage with a pink-styled heading, illustrating how to set up a basic HTML structure with external script and CSS files. The code uses D3.js v6 from a CDN and includes an alert dialog triggered by JavaScript, highlighting the foundational setup for web-based visualizations.

May 6, 2021