avgoust

@avgoust·3 public vizzes

Fork of Responding to Resize

This example demonstrates a responsive D3.js visualization that automatically redraws an SVG cross to match the browser window’s dimensions. It uses CSS to stretch a container div to fill the page, then reads the container’s `clientWidth` and `clientHeight` inside a `redraw` function. The code binds data to `line` elements, entering new lines and merging updates, while a `window` resize event listener triggers redraws. The visualization relies on D3 v5 and SVG rendering, showing how to handle dynamic viewport sizes in data-driven graphics.

May 16, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a population dataset from the UN’s 2019 estimates, rendered as an interactive React application. The code imports D3’s `csv` loader to fetch data from a GitHub Gist, while `arc` and `pie` are used to generate a chart based on the loaded values. The visualization uses React hooks like `useState` and `useEffect` to manage asynchronous data loading and state. The UI presents a styled message, “Hello HTML!”, alongside the data-driven chart, combining static HTML/CSS with dynamic JavaScript and D3 functionality.

May 15, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a bar chart with no axes, labels, or other context. It fetches United Nations World Population Prospects 2019 data from a GitHub gist via `d3.csv`, then sorts and slices the first ten rows. Using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, it renders SVG `<rect>` elements inside a React component. The bars use `yScale.bandwidth()` for height and `xScale(d.Population)` for width, with React `useState` and `useEffect` managing the asynchronous data loading.

May 15, 2022