Cho-Yooyeon

@Cho-Yooyeon·4 public vizzes

Fork of Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart displays personal electricity consumption data for different accounts over two years, with each bar segment representing usage for a specific month and year. Users can switch between three account numbers via a dropdown menu, which filters the displayed data. The visualization is built using D3.js version 7, employing `d3.stack`, `scaleBand`, `scaleRadial`, and `arc` to generate the circular layout, with `transition` animation for updates. The SVG renders months around the circle, with stacked segments colored by year, and hover interactions show detailed usage values.

Jan 25, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the top 10 most populous countries in 2019 as a horizontal bar chart. It combines React for component state and rendering with D3 v5 for data loading, scales, and axis ticks. The `csv` function fetches the population data, while `scaleBand` and `scaleLinear` position bars and map values to widths. React creates SVG rectangles for each bar, and D3’s `max` and `ticks` methods compute the scale domain and axis labels.

Jan 25, 2023

Loading thumbnail…

Fork of Melting Data for Multiple Lines5

This visualization displays population trends over time (1950-2100) for various regions, with each line colored by region name and sorted by final population value. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line` with `curveBasis`, and `axisLeft`/`axisBottom` to render axes. Data is loaded from UN population estimates via `csv` and processed through a custom `melt` function. The chart includes a color legend, axis labels, and uses SVG for rendering, with lines styled using mix-blend-mode multiply.

Jan 20, 2023

Loading thumbnail…

HAPPY

This example displays a simple happy face made of SVG shapes, with a yellow circle head and two black eyes, alongside a large "Hello HTML!" message. The visualization combines static SVG markup with React for potential dynamic content, though the visible rendering is purely declarative. It uses React 18.2.0 via UMD builds and renders through the root element, while the SVG elements are defined directly in the HTML. The page demonstrates mixing React with traditional SVG and CSS styling within a single document.

Jan 20, 2023