Andres Perdomo

Final Bar Chart

This bar chart displays the 20 most populous countries using data from the United Nations World Population Prospects 2019, with population values shown on a linear scale and countries listed on a band scale. The visualization is built with React and D3.js v5, using scaleBand and scaleLinear for positioning. SVG rectangles represent each country, with native <title> elements providing tooltips, and tick formatting converts values to billions using d3.format with the '.2s' specifier. The chart includes labeled axes for population and styled gridlines.

Nov 9, 2023

Pathetic Bar Chart vertical 1

This example displays the top 10 most populous countries as a series of horizontal bars, with bar width proportional to each country’s 2020 population. It uses React hooks to fetch and parse CSV data from the United Nations World Population Prospects, then renders an SVG with `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for scaling bar lengths. The chart intentionally omits axes, labels, and other embellishments, focusing solely on raw bar lengths. The visualization is styled with a full-screen layout and a large "Loading..." placeholder while data is being fetched.

Bar Chart vertical

This example renders a vertical bar chart from UN population data for 2019, displaying the top ten countries by population. The chart uses React to manage state and render SVG rectangles, while D3 utilities load and parse the CSV data. Specifically, `d3.csv` fetches the dataset, `scaleLinear` maps country names to the y-axis, and `scaleBand` maps population values to bar widths. The bars extend horizontally from the left edge, with the y-axis positioned vertically to show country rankings.

Bar Chart

This example visualizes the top 10 most populous countries from the United Nations 2019 population dataset using a simple bar chart. Each country appears as a horizontal bar sized by its 2020 population estimate, rendered as SVG rectangles. The app loads the CSV data with `d3.csv`, scales the values using `scaleLinear` and `scaleBand`, and builds the bars through React components. The implementation uses React hooks like `useState` and `useEffect` to manage asynchronous data loading, with bars positioned vertically and extending horizontally according to population counts.

Rendering Data with React & D3

This example shows a pie chart of CSS named colors rendered as SVG, with data loaded from a CSV file using React and D3. The visualization fetches the dataset via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute the arcs, while React manages the component state and renders the SVG elements. The chart is centered within a fixed viewport, and a loading message displays until the data arrives. The code integrates React hooks like `useState` and `useEffect` for asynchronous data handling, combining declarative UI with D3's data-joining capabilities.

Rendering Data with React & D3

This example displays the named CSS colors from a CSV file, loading the data asynchronously and rendering each color as a colored block. It uses React’s `useState` and `useEffect` hooks to manage the data loading state, initially showing a loading message. The CSV is fetched with D3’s `d3.csv` method, and each row is mapped to a React `div` element whose background color is set from the data. The visualization combines React’s declarative component model with D3’s data fetching utilities to render the dataset.

Bar Chart 2

This example renders a horizontal bar chart of the top 10 most populous countries using React and D3.js v5, drawing SVG rectangles with `Marks.js` and labeling them with custom `AxisBottom` and `AxisLeft` components. The chart displays population values from the UN World Population Prospects 2019 dataset, loaded via `d3.csv` in `useData.js`. The x-axis uses a linear scale (`d3.scaleLinear`) and the y-axis a band scale (`d3.scaleBand`), but the visualization omits an explicit x-axis title or population gridlines, appearing sparse due to minimal margins and no tick labels on the x-axis. It relies on ReactDOM to mount the `App` component into the HTML page.

Nov 7, 2023

Fork of Pathetic Bar Chart

This visualization presents the top 10 most populous countries as a bare bar chart, intentionally omitting axes and labels. The chart renders bars using React components that call D3 scales, with `scaleBand` positioning the countries vertically and `scaleLinear` mapping population values to bar widths. The SVG is drawn with simple `rect` elements, while gridlines are attempted using D3’s tick values. Data comes from the United Nations World Population Prospects 2019, loaded as a CSV and filtered to the first ten rows. The code demonstrates a minimal, almost playful approach to chart construction.

Nov 7, 2023

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars without any axes, using raw SVG rectangles. The app loads United Nations population data from a CSV file, sorts it by 2020 figures, and maps country names to a d3.scaleBand for vertical positioning while a d3.scaleLinear scales bar widths. Built with React hooks (useState, useEffect), it fetches the dataset asynchronously via d3.csv. The chart intentionally lacks labels, ticks, or a scale, presenting only the relative lengths of bars to compare population sizes.

Nov 6, 2023

Bar Chart 1

This bar chart displays the top 10 countries by their 2020 population, with each country’s population represented by a horizontal bar’s length. The visualization uses React’s `useState` and `useEffect` hooks to asynchronously load CSV data, while d3’s `csv` parser and `scaleBand`/`scaleLinear` functions map country names and population values to screen coordinates. The bars are rendered as SVG `<rect>` elements, with the data sourced from a GitHub Gist and displayed once loading completes.

Nov 6, 2023

Smiley Face

A smiley face rendered with React and D3.js draws a yellow head, two black eyes, and a curved mouth. The composition uses a D3 arc generator to define the mouth’s path, placed within an SVG canvas centered on a 960 by 500 viewport. The code constructs the face from SVG circles and a path element, leveraging D3’s arc helper to compute the mouth’s geometry. The implementation relies on ReactDOM to mount the component and D3’s arc API for the angular shape, with no external data source.

Smiley Face

Fork of Fork of Smiley Face

The example shows a simple yellow smiley face drawn as an SVG graphic using React components. It defines circles for the face, eyes, and mouth, with fixed positions and radius values. The code uses React 18 and ReactDOM to render the SVG elements onto a web page, with the face centered in a 960-by-500 pixel viewport. The rendering is fully static, with no animation or interaction. The visualization demonstrates basic SVG circle composition within a React framework.

Fork of Smiley Face

This example renders a simple smiley face using React and SVG. The code draws a yellow circle for the face and two black circles for the eyes, all positioned with fixed coordinates. The React app uses `ReactDOM.render` to mount the SVG elements into the page, with the face centered within a 960 by 500 viewport.

Fork of Fork of Smiley Face

This example renders a simple smiley face as an SVG graphic using React and ReactDOM. It draws a yellow circle for the face, with black circles for eyes positioned relative to the center; the mouth is absent. The rendering relies on React’s JSX syntax to create SVG elements, with the width and height set to 960 and 500 pixels. The code uses ReactDOM’s render method to mount the SVG into the HTML page’s root element.

Nov 3, 2023