MadNietzsche

@MadNietzsche·10 public vizzes

Refactor Bar Chart

A horizontal bar chart displays population estimates for ten countries from UN population data for 2020. The chart uses React with hooks to fetch and parse CSV data via D3’s `csv` utility, then renders SVG bars and tick labels using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The React component conditionally shows a loading state before rendering the chart.

Aug 13, 2021

Loading thumbnail…

Axes with React and D3

This example displays a horizontal bar chart of the top 10 countries by population, using D3 scales for both the x-axis and y-axis. It is built as a React component that loads the UN Population 2019 dataset via `d3.csv`, then renders SVG elements with React's declarative JSX syntax. The chart includes D3-generated axis ticks and labels, with bars sized using `d3.scaleLinear` and `d3.scaleBand`.

Jul 29, 2021

Loading thumbnail…

The Margin Convention

This example visualizes the top 10 countries by population in 2020 as horizontal bars. The chart uses the margin convention, arranging a 960 by 500 pixel SVG with a 20-pixel margin on each side. The code loads data from a CSV file using D3's `csv` utility, and then uses React state to manage the data asynchronously. Key D3 APIs include `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and `max` to compute the domain, with bars rendered as SVG `rect` elements within a transformed group.

Jul 29, 2021

Loading thumbnail…

Pathetic Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with the bars rendered as plain rectangles without any styling. It loads population data from a CSV file using `d3.csv`, then uses React's `useState` and `useEffect` to fetch and store the data. The chart maps country names to the y-axis with `d3.scaleBand` and population values to the x-axis with `d3.scaleLinear`, drawing SVG `<rect>` elements within a React component that renders to a fixed-width SVG canvas.

Jul 29, 2021

Loading thumbnail…

Rendering Data with React and D3

This example renders the CSS named colors dataset, loaded via D3’s `csv` utility, as a radial pie chart of colored arcs. Each color is drawn as an SVG path using the `arc` and `pie` generators from `d3.arc` and `d3.pie`, with React managing the data state through `useState` and `useEffect`. The chart fills the full 960-pixel width, with each slice’s fill derived from the color’s hex value in the CSV. React’s conditional rendering shows a loading message until the asynchronous data fetch completes.

Jul 27, 2021

Loading thumbnail…

Vega-Lite API Template

This example shows a stacked bar chart of population by country, with bars colored by religion. The visualization is built using the Vega-Lite API, a JavaScript wrapper for Vega-Lite, and renders to SVG via Vega. Data is loaded from a CSV file using D3’s `csv` function, and the chart encodes country on the x-axis, population on the y-axis, and religion as color. Tooltips are enabled through Vega Tooltip, and the chart auto-fits to the window size.

Jul 23, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize CSV data using React and D3. It fetches a dataset of CSS named colors from a GitHub gist, then displays a message showing the file size in kilobytes, the number of rows, and the number of columns. The app uses React's `useState` and `useEffect` hooks to manage the data loading, while D3's `csv` function retrieves and parses the remote CSV file. The result is rendered as text within an SVG-ready page, with the data formatted via `d3.csvFormat`.

Jul 20, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The visualization uses React's `useState` and `useCallback` hooks to track mouse coordinates, which are then passed to the SVG circle's `cx` and `cy` attributes. The D3 library is imported but only for its `arc` function, which is unused; the rendering relies entirely on React and SVG properties.

Jul 14, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web page. It fetches a dataset of CSS named colors from a GitHub gist and displays the file size in kilobytes, the number of rows, and the number of columns in a large text element. The code uses the `d3.csv` method to fetch and parse the data, and also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. A third commented example illustrates the nested callback "pyramid of doom" pattern.

Jul 13, 2021

Loading thumbnail…

Smiley Face Part 1

Fifteen identical smiley faces, each composed of a yellow circle with black eyes, a nose, a curved mouth, and a hat, render in a grid. The code builds each face from React components using SVG primitives, such as `circle`, `ellipse`, and `rect`, within a translated group. D3’s `range` generates the array, while the `arc` helper produces the mouth path. The fixed dimensions and repeated props create a uniform tiled pattern.

Jul 13, 2021