Kiran-tech007

@Kiran-tech007·8 public vizzes

Fork of World Map

This example displays a natural Earth projection of the world map, with countries rendered as green landmasses on a light blue sphere. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and draw geographic features, while `topojson.feature` converts country boundaries from a TopoJSON world-atlas dataset loaded from unpkg. The SVG includes a background sphere path before adding individual country paths, resulting in a clean, stylized global visualization.

Sep 4, 2023

Loading thumbnail…

headlight

This example uses React to create a minimal SVG visualization of a headlight beam projecting onto a wall and ground. It draws a blue vertical wall, a gray ground line, and a yellow circle representing the headlight, with green and red dashed lines simulating the light beams. The code constructs SVG elements directly via the DOM API (`document.createElementNS`) and appends them to the document body. The visualization is a static, hardcoded scene with fixed coordinates, sizes, and stroke styles, demonstrating basic SVG shape rendering without interactivity or data-driven input.

Aug 25, 2023

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data with D3 and manage it through React state. It fetches a CSV file of CSS named colors using `d3.csv`, stores the result in a React `useState` hook, and renders a text summary with the `message` helper. The summary reports the row count, column count, and file size in kilobytes, computed with `d3.csvFormat`. While loading, the interface displays "Loading..." until the data arrives. The visualization uses React 18 and D3 v7, rendering plain text within an SVG-less `<pre>` element.

Jul 25, 2023

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the fundamentals of loading and parsing tabular data with D3 v7. It fetches a remote CSV file containing CSS named colors and displays the dataset’s size in the browser: row count, column count, and formatted size in kilobytes. The main approach uses the asynchronous `d3.csv` method to fetch and parse the file, then `d3.csvFormat` calculates the text length for the size estimate. The result is rendered as large text inside a `<pre>` element. Commented-out code shows alternative techniques using `fetch` with `d3.csvParse` and manual text handling.

Jul 24, 2023

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor within an SVG canvas. The circle’s position updates in real-time based on the pointer’s coordinates, creating a direct and responsive visual link between user input and the rendered graphic. This interaction is built with React using the `useState` hook to track mouse position, which is updated via an `onMouseMove` event handler on the SVG element. The chart is rendered as SVG, leveraging the `d3` library’s `arc` import, though it primarily relies on React’s state management for the dynamic behavior.

Jul 24, 2023

Loading thumbnail…

PAnda FAce

A panda's face is constructed from geometric primitives in an SVG canvas, using D3's selection API to append circles, ellipses, and paths to the root element. React manages the component lifecycle, while D3 applies transforms and attributes for the head, ears, eyes, nose, and mouth. The rendering uses fixed coordinates and radius values, with D3 v7 and React 18.

Jul 7, 2023

Loading thumbnail…

SMiley FAce

A yellow smiley face is rendered on an SVG canvas, with a black outline and two black eyes. The face is constructed from separate React components for the head, eyes, and mouth, all centered within a single SVG element. The mouth is drawn using a `d3.arc` path to create a curved smile. The head's radius is derived from the canvas height, and the stroke width and eye positions are set as constants. The visualization is purely a static geometric composition, with no data input or interaction.

Jul 6, 2023

Loading thumbnail…

Reverse SMiley FAce

This example builds a yellow SVG smiley face with black eyes and a curved mouth, but flips the mouth arc upside down to create a reversed or “unhappy” expression. The face is drawn using React and D3.js, with D3’s `arc` generator constructing the mouth path inside an SVG `<path>`. Circles are positioned relative to the center using translation and offset constants. The code renders directly to SVG, using React to structure the markup and D3 solely for the arc geometry.

Jul 4, 2023