Deepak Tomson

@deepaktomson·10 public vizzes

Fork - Colors pie view with D3 and React

A circular pie chart displays color swatches in a color wheel, with each slice filled by a color from a CSV dataset loaded from a GitHub gist. This D3.js and React example uses `d3.arc` to generate the pie slice paths and `d3.pie` to compute angular values, though the code manually calculates start and end angles. The chart is rendered as an SVG, centered within a fixed 960 by 400 viewport. Individual color values from the CSV's "HEX" column directly determine the fill of each path, creating a rainbow-like ring of distinct hues.

Jul 30, 2021

Loading thumbnail…

Fork - Colors pie with React & D3

This example demonstrates a simple React component that loads a CSV dataset from a GitHub gist and displays a summary message about it. The App component uses the useState and useEffect hooks to fetch the data with d3.csv, then passes it to a helper function that formats the file size, row count, and column count using d3.csvFormat. While the page is loading, it shows "Loading.." in a large preformatted text element. The visualization integrates React 16.9 for UI state management with D3 v5 for data parsing and formatting.

Jul 30, 2021

Loading thumbnail…

Fork of Fork - Loading data with d3 and React

This example demonstrates loading a CSV dataset into a React application using D3’s `d3.csv` method, then displaying a summary message with row and column counts. The React `useState` and `useEffect` hooks manage the asynchronous data fetching, while a separate `Message.js` module formats the output via `d3.csvFormat`. The visualization renders a large text message in a `<pre>` element, initially showing “Loading..” until the remote CSV from a GitHub gist arrives. It uses React 16.9 and D3 v5.11, with styling that hides overflow and sets a large font size.

Jul 30, 2021

Loading thumbnail…

Fork - Rendering colors pie chart with React & D3

This example demonstrates a hybrid data-loading comparison inside a web page. It uses D3’s `d3.csv` utility to fetch a remote CSV file from a GitHub Gist, then reports the file’s kilobyte size, row count, and column count as formatted text. A second path uses the native `fetch` API with `d3.csvParse` to show an analogous result, highlighting D3’s parsing functions versus a raw HTTP request. The page also embeds a YouTube tutorial on rendering pie charts with React and D3, linking the code snippets to a broader instructional context. The implementation relies on D3 v5 and standard browser fetch, with no interactive chart rendered on screen.

Jul 30, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for various car models, with tooltips revealing the car's name on hover. Built with the Vega-Lite API, it renders as SVG and automatically fits the browser window. The visualization loads the auto-mpg.csv dataset from a GitHub gist, applies custom axis and label styling, and uses semi-transparent square marks to represent data points, revealing overlapping clusters.

Jul 24, 2021

Loading thumbnail…

Fork - Loading data with d3 and React

This example demonstrates how to load and summarize CSV data using D3 and React. It shows a simple text message reporting the data's file size in kilobytes, row count, and column count. The app uses React hooks (`useState` and `useEffect`) to fetch data from a GitHub gist via `d3.csv` and `d3.csvFormat` to calculate the metrics. The visualization is minimal, presenting only the computed statistics in a large `<pre>` element.

Jul 24, 2021

Loading thumbnail…

Fork - Parsing csv data with d3

This example demonstrates how to parse CSV data with D3 utilities in a React context, comparing the results from `d3.csv` and `d3.csvParse`. It fetches a remote CSV file from a GitHub gist, then displays the file size, row count, and column count in the browser. The code uses the Fetch API to retrieve the raw text and D3 v5 functions `d3.csv` and `d3.csvParse` to process the data, with output rendered into HTML `<pre>` elements.

Jul 24, 2021

Loading thumbnail…

Fork - Circle move

This example visualizes a single black-outlined circle that follows the user’s mouse cursor across an SVG canvas. It shows an interactive direct-manipulation effect where the circle’s center repositions in real time to the pointer’s coordinates. The application is built with React using the `useState` and `useCallback` hooks to manage and update the cursor position. It renders a fixed 960x500 SVG element, and the `onMouseMove` event handler updates the circle’s `cx` and `cy` attributes based on the client coordinates.

Jul 23, 2021

Loading thumbnail…

Fork - Loading data

This example demonstrates how to load a CSV file from a remote URL and print its contents to the browser console. It uses the Fetch API with an asynchronous `async`/`await` pattern to request the raw data from a GitHub Gist and parse the response as text. The code includes a commented-out promise-based alternative, showing two approaches for handling asynchronous data retrieval. No visualization is rendered; the focus is solely on the data-loading step that would precede any chart or graph.

Jul 23, 2021

Loading thumbnail…

Fork of Hello HTML

Built with React and D3 v7, this example renders a cartoon face as an SVG composed of reusable components. A yellow background circle, two black-outlined eyes, and a D3-generated arc path for the mouth are positioned within a transformed `<g>` container. The `Face` component receives numeric props for dimensions, offsets, and stroke widths, and the face is centered on a 960 by 500 canvas using static coordinate calculations.

Jul 23, 2021