nayak-sarvesh12

@nayak-sarvesh12·8 public vizzes

Fork of Stylized Line Chart

This example visualizes the geographic boundaries of the world’s countries using a React-based application with D3. It loads TopoJSON data from the World Atlas and converts it to GeoJSON via the topojson `feature` function. The map is rendered as SVG paths using `geoEqualEarth` and `geoPath` from D3, with each country stroked in teal. The visualization demonstrates a clean, stylized presentation of global land masses.

Nov 18, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the Iris dataset as a scatter plot of sepal length against petal width, with axes and labeled tick marks. The React-based code uses D3 v5 utilities like `scaleLinear`, `extent`, and `format` to compute scales and format tick labels. It renders an SVG with custom components for the bottom and left axes, marks as circles, and includes axis labels. Tooltips display the x-value on hover, and the styling uses the Poppins font with specific color classes for ticks and marks.

Nov 17, 2021

Loading thumbnail…

Rendering Data with React & D3

This example renders a pie chart of CSS named colors using React for component structure and D3 for data loading and shape generation. The code fetches a CSV of color names and hex values via `d3.csv`, then uses `d3.pie()` and `d3.arc()` to compute and draw SVG paths. Each slice is filled with its corresponding hex color, creating a full circular wheel where each color’s arc is equally sized.

Nov 17, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting each vehicle as a circle based on its origin, horsepower, and weight. The chart uses color to encode weight and circle size to represent miles per gallon, with tooltips showing vehicle names. Built with the Vega-Lite API and D3.js, it loads data asynchronously and renders an interactive scatter plot that fits the full window. The visualization configures axes and label styles, and integrates Vega tooltip for hover details.

Nov 16, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays the number of rows, columns, and file size (in kB) of a CSV dataset containing CSS named colors, presenting the results as large text on a blank page. It loads the data from a GitHub-hosted CSV file using the `d3.csv` method, then formats the summary using `d3.csvFormat` and the `Math.round` function. The code also includes commented-out alternatives using the `fetch` API with both promises and `async`/`await` syntax, as well as a nested “pyramid of doom” pattern, to demonstrate different approaches to asynchronous data loading.

Nov 16, 2021

Loading thumbnail…

Mouse Follower

A single yellow circle tracks the mouse cursor across an SVG canvas, returning to the center when the pointer leaves the window. The visualization is built with React state management, using `useState` and `useCallback` to update the circle’s `cx` and `cy` coordinates on every `mousemove` event. ReactDOM renders the SVG directly, while the circle’s position is derived from the event’s `clientX` and `clientY` values. No external data is involved; the example demonstrates real-time user interaction with D3’s scalable vector graphics rendered through the React component lifecycle.

Nov 16, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data using the D3 v5 library. The visualization fetches a CSS Named Colors dataset from a GitHub gist, then retrieves the raw text content through the Fetch API and `response.text()`. The code uses an async/await pattern within a `fetchText` function to handle the asynchronous data loading, ultimately logging the parsed text to the console. The example serves as a straightforward demonstration of data acquisition without any rendering or graphical output.

Nov 15, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A grid of small, randomized smiley faces is rendered as SVGs using React components. Each face is composed of separate React components for the yellow background circle, eyes, and a mouth drawn with a d3.arc path. The `d3.range` function generates 18 instances, each with randomized stroke widths, eye offsets and radii, and mouth dimensions, producing a playful array of varied expressions.

Nov 15, 2021