nghosh319

World Map

This example displays a world map with country boundaries rendered as SVG paths on a Natural Earth projection. It visualizes land masses, country interiors, graticules, and the globe’s sphere using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3-geo. The data comes from the World Atlas TopoJSON, processed with `feature` and `mesh` from topojson to generate land polygons and interior boundaries. Styling applies distinct fills and strokes for each layer.

May 7, 2023

Scatter Plot with Menus

This interactive scatter plot visualizes the penguins dataset, allowing users to choose which attributes appear on the x- and y-axes via dropdown menus. Built with React and the D3.js library, the SVG chart renders circles for each penguin, with axes and tick marks generated by D3's scale functions. The code imports data from a CSV file using D3's `csv` method. Tooltips show the x-axis value for each point, and axis labels dynamically update to reflect the selected attributes. The dropdowns use the `react-dropdown` library, while D3's `scaleLinear`, `extent`, and `format` utilities handle scaling and tick formatting.

May 7, 2023

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements (sepal length/width, petal length/width) and species. Two dropdown menus, built with `react-dropdown`, control which attributes appear on the x- and y-axes. The visualization uses React components with D3 scales (`scaleLinear`, `extent`) and SVG rendering to draw the circles and axes. The code also demonstrates reusable axis and mark components that update dynamically when menu selections change.

Fork of Stylized Line Chart

This example shows a stylized line chart tracking the daily closing price of Google stock over time. The visualization uses a smooth natural curve to connect price points, with circular markers at each data value and interactive tooltips that display the date when hovered. Built with React and D3 v5, the chart renders as SVG and uses `scaleTime` and `scaleLinear` for axes, while `d3.line` with `curveNatural` generates the path. Data is loaded from a CSV file via `d3.csv` and styled with a teal color scheme and Poppins font.

Bar Chart

This bar chart displays the top 10 most populous countries based on 2020 UN Population data, with horizontal bars showing each country’s population count. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. SVG `<rect>` elements render the bars, while custom axis components generate tick marks and labels using D3’s `ticks()` and `format()` APIs, with population values formatted using the SI prefix format (e.g., “1.4B”).

Bar Chart

This horizontal bar chart displays the number of registered electric vehicles by car make in Washington State, using data from the Department of Licensing. Bars extend from left to right, with the x-axis showing the count and the y-axis listing makes. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the count x-axis, and SVG `rect` marks. Tick labels are formatted with D3's `format` function, and hover tooltips show exact counts.

Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding color from a CSV dataset. React manages the component state and rendering, while D3 utilities load the data and compute the pie geometry. The code uses `d3.csv` for data loading, `d3.pie` to generate angle values, and `d3.arc` to create SVG path shapes, which React then maps to colored `<path>` elements inside an SVG canvas.

Polished World Map

This example displays a world map using a Natural Earth projection, with country boundaries, graticules, and a sphere outline rendered as SVG paths. It loads country and land topology from the World Atlas Topojson dataset via `d3.json` and converts it using `topojson.feature` and `topojson.mesh`. The map is drawn with `d3.geoPath` and `d3.geoNaturalEarth1`, while React manages the component structure and data loading through the `useData` hook.

Loading Data with React & D3

This example demonstrates how to load external data into a React application using D3 utilities. The visualization displays a text summary of CSS named colors data fetched from a GitHub gist, showing the file size in kilobytes, row count, and column count. The code uses React hooks like `useState` and `useEffect` to manage asynchronous data loading, while `d3.csv` parses the CSV file and `d3.csvFormat` measures its size. A fallback "Loading..." message appears until the data arrives.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the file size, row count, and column count of the CSS Named Colors dataset. It uses the `d3.csv` method to fetch and parse the data from a remote URL, then formats the output with `d3.csvFormat`. An alternative approach using the Fetch API with `async/await` and `d3.csvParse` is shown in commented-out code. The result is rendered as plain text in a large HTML `<pre>` element.

Random color of Mouse Follower

A React SVG application renders a circle that follows the mouse cursor, changing to a random hex color on every mouse movement. The mouse position is tracked via the `onMouseMove` event handler on the SVG element, updating state with `useState` and `useCallback`. The circle's fill color is generated using a custom `getRandomColor` function that constructs a random hexadecimal string. The visualization demonstrates interactive state management and event handling within a React component.

Loading and Parsing CSV Data to console

This example demonstrates the initial step of a data pipeline: loading a CSV file and printing its raw contents to the browser console. A React framework is not used; instead, it relies on the native JavaScript `fetch` API to retrieve the text from a remote GitHub Gist containing CSS named colors, then logs the response. The code highlights the asynchronous pattern with `fetchText`, contrasting it with a commented-out "pyramid of doom" nested promise approach.

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, moving smoothly in real time as the pointer travels. The visualization uses React state to track the cursor's x and y coordinates via an `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes on every movement. Built with React 16.9 and rendered as a single SVG element with a fixed width and height, it demonstrates a simple interactive pattern without external data or animation libraries.

Fork of Smiley Face Part II

This example shows a full-screen smiley face rendered as an SVG graphic, with the face centered and scaled to fit the browser window. The face consists of a yellow circle for the head, two black eye circles, and no mouth, using a React component structure. The code leverages React 16.9 and ReactDOM to render SVG elements, calculating the face’s dimensions dynamically from `window.innerWidth` and `window.innerHeight`. The face’s size, stroke width, eye offsets, and eye radius are all defined as constants in the React component.

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces renders in SVG through React components. Each face uses D3’s `arc` generator to draw the mouth, while React functional components compose the eyes, background circle, and face container. The background circle’s fill color is randomly assigned per render. Eye positions, radii, mouth width, and stroke width vary randomly for each face, though all faces share identical dimensions and are centered within their own viewport.

Smiley Face Part VI

A grid of eighteen smiley faces is rendered with React, each face having randomized eye offsets, eye radius, mouth width, and stroke width. The faces are drawn as SVG circles, with the mouth path generated using d3.arc. The FaceContainer component creates an SVG element and translates a group to center each face. The code uses ReactDOM to render the array of Face components, and d3.range generates the grid count.

Smiley Face Part V

This example shows a smiley face drawn with SVG shapes. A yellow circle forms the head, with two black circles for eyes and a curved path for the mouth. It uses React to structure the components, with the mouth’s arc generated by the d3 arc API. The SVG is rendered with a black stroke and yellow fill, positioned at the center of a 960x500 canvas.

Smiley Face Part IV

This example shows a smiling face built from basic SVG shapes, centered on a yellow circle with a black outline, two eyes, and a curved mouth. The face is rendered using React components that generate SVG elements, with the mouth created using D3’s `arc` generator to produce a path. The code uses React’s `ReactDOM.render` to mount the app, and D3 v5’s `arc` API to define the mouth’s inner and outer radii and angles. The background circle, eyes, and mouth are positioned relative to a central transform group.

Smiley Face Part III

This example renders a classic smiley face using React and D3, with SVG shapes positioned around a central origin. A yellow circle forms the head, two dark circles serve as eyes, and a mouth is drawn using D3’s `arc` generator with specified inner/outer radii and angle ranges. The visualization demonstrates declarative component composition in React, where D3 is used solely for generating the path data for the mouth arc. The fixed dimensions are 960 by 500 pixels, with stroked outlines and offsets defined as constants.