1tang

@1tang·17 public vizzes

Refactored bar chart

This bar chart displays the top 10 most populous countries as vertical bars ordered along a categorical y-axis, with population values mapped along a linear x-axis. The chart is rendered in SVG using React components for axes and marks, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously using `d3.csv` from the United Nations World Population Prospects 2019 dataset, displaying 2020 population figures.

Apr 29, 2021

Loading thumbnail…

Axis with React & D3

This visualization displays the top 10 most populous countries as a horizontal bar chart, with axes rendered using React components that call D3 scales. It uses d3.csv to load population data from the United Nations World Population Prospects 2019, d3.scaleBand and d3.scaleLinear to map countries and population values, and maps over xScale.ticks() to generate gridlines and tick labels. The chart is composed of SVG elements inside a React functional component, with each rect, line, and text element created imperatively.

Apr 17, 2021

Loading thumbnail…

Margin convention

This example displays the top 10 most populous countries as a horizontal bar chart without axes, using a fixed margin convention to inset the plot area. The chart loads data from the United Nations World Population Prospects 2019 CSV, processes it with `d3.csv`, and renders SVG rectangles scaled by population. The code uses React hooks (`useState`, `useEffect`) to fetch and filter the data, then applies `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis range, all within an SVG canvas of 960×500 pixels.

Apr 17, 2021

Loading thumbnail…

Basic bar chart no axis

This example presents the ten most populous countries as horizontal bars, using bar length to encode population size while omitting axes entirely. Built with React and D3 v5, it loads data from the United Nations World Population Prospects 2019 CSV, maps each country to a `scaleBand` y-coordinate, and scales bar widths with `scaleLinear` and `max`. The SVG rendering employs React’s `useEffect` to fetch and parse the data, populating a simple `rect` per row.

Apr 11, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color represented as a slice of a pie chart. The data loads from a CSV file using D3’s `csv` utility, while React manages the component state and rendering. D3’s `pie` and `arc` functions compute the slice angles and SVG path geometries, and each `<path>` element is filled with the corresponding hex value from the dataset. The example demonstrates a hybrid approach where D3 handles data parsing and layout calculations, while React renders the resulting SVG elements declaratively.

Apr 10, 2021

Loading thumbnail…

Rendering Data with React & D3

This example shows a color wheel of CSS named colors loaded from a CSV file via `d3.csv`, with each slice colored by its hex value. It combines React’s `useState` and `useEffect` hooks to fetch data asynchronously, then renders an SVG using `d3.pie` and `d3.arc` to compute the pie geometry within a React component. The `arc` uses an inner radius of zero and an outer radius equal to the SVG width, producing a full circular diagram.

Apr 10, 2021

Loading thumbnail…

Rendering data with React

This example shows CSS named colors as a horizontal stacked bar chart, where each color is a thin rectangular strip. Using React and D3, the app fetches color data from a CSV file via D3’s `csv` utility, then maps each row to a colored `<div>` with a fixed width and height. The visualization relies on React’s `useState` and `useEffect` hooks for asynchronous data loading and rendering, with a “Loading…” message displayed until the data arrives.

Apr 10, 2021

Loading thumbnail…

Fork test Vega-lite API - own data

This example visualizes the distribution of religious populations across countries using a bubble chart, where each circle’s size encodes population count and its position maps country and religion. The chart is built with the Vega-Lite API, which generates a Vega specification rendered as SVG, and uses D3’s CSV loader to fetch data from a GitHub gist. The code customizes axis styles, tooltips, and padding via a config object. Interactive tooltips display exact population values on hover.

Apr 3, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the religious demographics of countries, with circles sized to represent population counts across religious affiliations. The chart plots countries on the x-axis and religions on the y-axis, using circle size as an encoding channel for quantitative population data. The example is built with the Vega-Lite API, which compiles specifications to Vega for rendering in SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization is configured for full-window display with custom axis styling and tooltip support via the Vega-Tooltip handler.

Apr 3, 2021

Loading thumbnail…

Loading data with React & D3

This example demonstrates a minimal React & D3 workflow for fetching and summarizing a remote CSV dataset. It loads the CSS named colors data from a GitHub gist using D3’s `csv` function, then stores the parsed result in React state via `useState` and `useEffect`. The rendered output is a `<pre>` element that displays a text summary—file size in kilobytes, row count, and column count—computed through the custom `message` function using `d3.csvFormat`.

Mar 28, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates the basic workflow of loading and parsing a CSV file with D3. It fetches a named CSS color dataset from a GitHub Gist and computes three summary statistics: the size of the formatted CSV data in kilobytes, the total number of data rows, and the number of columns. The results are displayed as large text in a browser. The code uses `d3.csv` to retrieve and parse the remote data, while `d3.csvFormat` is used to serialize the dataset back into a string to measure its length.

Mar 27, 2021

Loading thumbnail…

Mouse follower

A React application renders a single circle inside an SVG that follows the mouse cursor across the viewport. The component tracks pointer coordinates using a `useState` hook and updates the circle's `cx` and `cy` attributes on every `mousemove` event via a `useCallback` handler. Rendering relies on React 16.9 for state management and SVG creation, with D3 v5 loaded but not actively used for this behavior. The circle starts centered at 480 by 250 pixels and moves smoothly in response to user input.

Mar 25, 2021

Loading thumbnail…

Fork of Smiley face part VI

A grid of eighteen cartoon smiley faces scrolls vertically, each rendered with randomized facial features. The example demonstrates reusable React components—`FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`—composed to build the SVG output. The `Mouth` component uses D3’s `arc` generator to create a smile path, while `index.js` generates the array of faces using `d3.range`, applying random values for stroke width, eye offsets, and mouth dimensions.

Mar 20, 2021

Loading thumbnail…

Smiley face part V

A yellow smiley face is rendered on a black-outlined circular background. The face is composed of three component parts: a filled circle for the head, two black circles for the eyes, and a curved arc for the mouth. The React application uses D3's `arc` API to generate the mouth path, while all other shapes are drawn as standard SVG elements, positioned via a transformed group.

Mar 18, 2021

Loading thumbnail…

Smiley face part IV

This example shows a yellow smiley face composed of a large circular head, two eyes, and a curved mouth, rendered as an SVG graphic. It uses React to structure the components and D3’s `arc` function to generate the mouth path. The head and features are positioned relative to a central coordinate system, with the background circle and eyes drawn as simple SVG elements. The visualization relies on fixed numeric values for all dimensions, with no interactive behavior or data input.

Mar 17, 2021

Loading thumbnail…

Homework smiley face part III

A yellow smiley face is drawn on a black-stroked circular face, with two black eyes and a downward-curving mouth rendered as an SVG path. The visualization uses React to construct the SVG elements and D3’s `arc` API to generate the mouth arc path, with hardcoded dimensions for the face, eyes, and stroke. The code defines constants for positioning and sizes, then renders the shapes inside a transformed group.

Mar 17, 2021

Loading thumbnail…

Smiley face part 1

A yellow SVG smiley face is drawn on a 960 by 500 canvas, centered within a black-outlined circle. The face includes two black eyes and a mouth arc, all rendered as SVG primitives. The code uses React for component structure and D3’s `arc` generator to create the mouth path. The face’s dimensions, such as eye offsets and radii, are explicitly defined as constants, with the outermost circle’s radius derived from the canvas height and stroke width.

Mar 9, 2021