Farahnaz Wick

@farahnazwick·9 public vizzes

Rendering barchart with React & D3

This example renders a bar chart of the top 10 countries by 2020 population using React state to manage data loaded via D3’s `csv` utility. The visualization maps country names to vertical bands with `d3.scaleBand` and population values to horizontal bar lengths with `d3.scaleLinear`, drawing grid lines and rectangles as SVG elements. React hooks `useState` and `useEffect` trigger the asynchronous data fetch and re-render the chart once the CSV from a GitHub gist is parsed. The code leverages D3 v5 for scales and data loading while React handles component rendering.

Mar 2, 2022

Loading thumbnail…

Rendering data with React

This example visualizes the CSS named colors dataset as a pie chart, with each slice filled by the corresponding color’s hex value. React manages the asynchronous data loading and rendering state, while D3’s `csv`, `pie`, and `arc` utilities fetch the data and compute the pie geometry. The chart is drawn as SVG paths inside a React component, showing a simple integration of D3 for data processing with React for declarative UI updates.

Feb 28, 2022

Loading thumbnail…

Vega-lite Template

This example visualizes automobile data from a CSV file, mapping horsepower and acceleration along the axes while encoding weight as point size and origin as color. Built with Vega-Lite and React, the code loads CSS named colors data using d3.csv, then renders an interactive scatterplot through the vega-lite-api. The visualization includes tooltips showing car names, with custom axis and label styling configured through a separate config object.

Feb 24, 2022

Loading thumbnail…

D3ReactLoadingParsing

This example visualizes the contents of a CSV file containing CSS Named Colors, displaying a summary message with the data size in kilobytes, row count, and column count. Built with React and D3.js v5, it uses D3’s `csv` function to fetch and parse the dataset asynchronously via a promise, updating the React state and rendering the result in a large `<pre>` element. The code demonstrates loading data with `useEffect` and `useState` hooks, along with D3’s `csvFormat` for byte calculation.

Feb 23, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a React and D3.js integration for asynchronously loading and displaying a CSV dataset. It shows a simple status message indicating whether the data has been successfully fetched or is still loading, using a `pre` element for large text output. The code uses `useState` and `useCallback` hooks from React, and calls the `csv` function from D3 to parse a remote CSS color palette file. The application renders a dynamic message based on the data loading state, showcasing how to combine React’s declarative UI with D3’s data processing capabilities.

Feb 23, 2022

Loading thumbnail…

CSVD3

This example demonstrates the contents of a CSV file containing CSS named colors by displaying its size, row count, and column count. It loads the remote CSV data using the `d3.csv` method, which parses the fetched text into a structured data array. The code also computes the file size with `d3.csvFormat` and reports the number of rows and columns. Alternative approaches using `fetch` and `d3.csvParse` are provided as comments, showing different methods for asynchronous data loading.

Feb 22, 2022

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across the screen, rendered as a single SVG circle that moves in real time. The React component tracks pointer coordinates via the `onMouseMove` event handler, updating state with `useState` and `useCallback` to reposition the circle’s center. The visualization uses React DOM to render the SVG element directly to the page, with the circle’s radius fixed at 30 pixels. No external data sources are involved; the interaction is purely based on mouse position.

Feb 22, 2022

Loading thumbnail…

Smiley Face 1,2,3

This visualization shows a simple, stylized smiley face rendered as a yellow circle with black stroke, two eyes, and a curved mouth. Built with React and D3 v5, it uses the `d3.arc()` API to generate the mouth path based on inner and outer radii and start/end angles. The face components—background, eyes, and mouth—are composed from separate React function components, with the overall layout handled by a `FaceContainer` that centers elements via an SVG `<g>` transform. The face is drawn entirely with SVG, using fixed pixel dimensions for a 960-by-500 canvas.

Feb 22, 2022

Loading thumbnail…

Fork of React Starter

This example displays a static "Hello React!" message, centered on a plain web page. The visualization uses React to define an `App` component that renders the text, and ReactDOM to mount that component into the page's root element. The page loads React and ReactDOM from external UMD scripts, while the custom JavaScript in `index.js` uses the `ReactDOM.render()` API to complete the setup. The visual output is styled through a CSS rule that sets the message’s font size and alignment.

Feb 22, 2022