Brian Machado

@bmach1·11 public vizzes

Testing Link Data

This example displays a horizontal bar chart of country populations, using React to render SVG rectangles within a D3-powered coordinate system. The data is loaded asynchronously from a CSV file via `d3.csv`, then transformed with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The chart shows only the first ten rows of the dataset, with bar widths proportional to the population values. Loading state is handled with a simple text display while the data is being fetched.

Jul 4, 2022

Loading thumbnail…

bar chart using react and d3

This example shows a horizontal bar chart of the ten most populous countries for 2020, using population data loaded from a CSV file. The chart is rendered as SVG within a React application, with each bar’s length proportional to the country’s population. The code uses React’s `useState` and `useEffect` hooks to fetch and parse the data with `d3.csv`, then employs `d3.scaleBand` and `d3.scaleLinear` to map countries and population values to the chart’s dimensions.

Jul 4, 2022

Loading thumbnail…

refactored bar chart

This example shows a horizontal bar chart of population data for ten countries from a UN 2019 dataset. The visualization uses React to render SVG elements, with D3 v7 scales (`scaleBand` and `scaleLinear`) positioning the bars and axes. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) construct the tick lines, labels, and rectangles based on the data, while `useData` fetches and parses the CSV via `d3.csv`.

Jul 2, 2022

Loading thumbnail…

axes with react and d3

A horizontal bar chart displays the ten most populous countries for 2020, sourced from UN population data. Built with React and D3 v7, the visualization renders as SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. React's `useEffect` and `useState` manage asynchronous CSV loading, while D3's `csv` fetches the data; axes and bars are constructed from mapped ticks and rect elements.

Jul 2, 2022

Loading thumbnail…

the margin convention

This example demonstrates the margin convention in data visualization by rendering a horizontal bar chart of the ten most populated countries using UN population data for 2020. It shows how chart area coordinates are offset from the SVG canvas using a margin object, translating the inner chart group by the left and top margins. The visualization is built with React and D3 v7, using d3.scaleBand for the categorical y-axis, d3.scaleLinear for the population x-axis, and d3.max to compute the domain. Data is loaded asynchronously via d3.csv from a remote gist URL, and the SVG output is generated declaratively through React components.

Jul 2, 2022

Loading thumbnail…

rendering data with react and d3

The example renders a full circle pie chart where each slice represents a single CSS named color, colored with its own RGB hex value. It loads color data from a CSV file using `d3.csv`, then maps each row to an SVG path via React's `map` function. The chart is drawn with `d3.arc` and `d3.pie` inside a React component, which updates the SVG output as data loads.

Jul 2, 2022

Loading thumbnail…

rendering data with react

This example shows the named CSS colors from a CSV file as a vertical stack of horizontal color bars, each rendered as a colored `<div>` element. The React component uses the `useState` and `useEffect` hooks to load the data with `d3.csv` and trigger a re-render once the data arrives. It maps over each row and assigns the `RGB hex value` to the `backgroundColor` style, with fixed dimensions of 960 pixels wide and 5 pixels tall per bar.

Jul 2, 2022

Loading thumbnail…

loading data with react d3

This example demonstrates how to load and summarize CSV data using React and D3. It fetches a remote CSV file containing CSS named colors and displays a text report showing the data size in kilobytes, number of columns, and number of rows. The app uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading and state updates, while the `d3.csv` method performs the parsing. The final output is rendered as an SVG-free `<pre>` element showing the computed statistics.

Jul 2, 2022

Loading thumbnail…

loading and parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v7. It fetches a dataset of CSS named colors via `d3.csv()`, then displays summary statistics in a large HTML `<pre>` element. The output shows the data size in kilobytes, the number of columns, and the number of rows, calculated with `d3.csvFormat()`. The page also includes a separate `fetch()` function for retrieving raw text, though it is not actively used in the final visualization.

Jul 2, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows an interactive smiley face built with React and SVG, where a single yellow circle follows the mouse cursor across a blank canvas. The application tracks the pointer’s `clientX` and `clientY` coordinates via React’s `useState` and `useCallback` hooks, updating the circle’s `cx` and `cy` attributes through the `onMouseMove` event. It uses React 16.9 and ReactDOM to render the SVG element, with a hardcoded width of 960 and height of 500 pixels. No external data source is involved; the visualization solely responds to user input.

Jul 2, 2022

Loading thumbnail…

Fork of HTML Starter

A grid of eight procedurally generated faces demonstrates the use of React components and D3.js v7 in a static SVG rendering. Each face, composed of a yellow circle, black-outlined background, two eyes, and an arc-based mouth, receives randomized props for stroke width, eye offset, eye radius, and mouth dimensions. The React components like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` structure the visualization, while D3's `arc` function draws the mouth path. The `range` function generates the layout, and `ReactDOM.render` mounts the app to the DOM.

Jul 2, 2022