A

Ankit5ingh

@Ankit5ingh·19 public vizzes

Loading thumbnail…

Working with Time

This interactive scatter plot visualizes the relationship between reported dates and the total number of dead and missing migrants, using the Data Canvas Sense Your City dataset. The visualization is built with React and D3.js, where D3’s `scaleTime` and `scaleLinear` map the temporal and numeric variables to SVG coordinates. Each data point is rendered as a circle, with hover tooltips displaying the full date. The chart includes labeled axes for time and casualty counts, with tick marks styled using D3’s `timeFormat`.

Loading thumbnail…

indiaMap experiment

This visualization displays a choropleth map of India using a Mercator projection, where each state is rendered as a filled SVG path in a teal color. The map appears to be an experiment with state boundaries, as it renders the GeoJSON features from a local `states.json` file. Built with React and D3 v5, the code uses `geoMercator` for projection and `geoPath` for rendering the geographic shapes. The visualization demonstrates a basic map rendering without additional data encoding, serving as a foundational example for geographic data visualization.

Loading thumbnail…

world map

A world map visualization displays global landmasses and country boundaries using a natural Earth projection rendered as SVG. The map shows land areas in teal, country interior borders in a lighter stroke, and background graticule lines. Built with React and D3 v5, the code uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to generate the projection and paths. TopoJSON data from the World Atlas dataset provides the land and country mesh features, which are processed through the `feature` and `mesh` APIs.

Loading thumbnail…

points on world map with text input

This visualization displays the populations of major world cities as scaled circles on a natural Earth projection map. A dropdown menu selects how many top cities to show, while a slider adjusts the maximum circle radius. The map uses D3’s `geoNaturalEarth1` and `geoPath` for rendering landmasses and graticules, with `scaleSqrt` mapping population to circle area. Data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv` and TopoJSON world atlas features.

Loading thumbnail…

points on world map

A world map displays cities as brown circles, with circle size proportional to each city’s population using a square-root scale. A dropdown menu lets users select the number of cities shown, from a radius setting to top 10, 50, or 200 cities. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projections, d3.scaleSqrt for sizing, and React for the interface. City data comes from the Data Canvas Sense Your City dataset, loaded via d3.csv.

Loading thumbnail…

Scatter Plot With Menue

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus control which measurements appear on the x and y axes, while a color legend enables highlighting individual species by dimming others. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and renders SVG circles positioned via x and y scales, with native tooltips on hover.

Loading thumbnail…

menu react

This example shows a pet selector dropdown built with React, where choosing a pet from the menu updates the selected value state. The interface renders a labeled `<select>` element using a reusable `Dropdown` component that maps over six predefined pet options. The code uses React’s `useState` hook to manage the current selection and ReactDOM to render the app into the DOM, while D3 is loaded only for potential charting, though no visualization is drawn here.

Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature variations in San Francisco, using data from a CSV file loaded with d3.csv. The chart plots timestamps on the x-axis with a time scale and temperatures on the y-axis with a linear scale, both implemented using d3.scaleTime and d3.scaleLinear. The React component renders SVG elements, including a smooth path generated with d3.line, circular data point markers, and custom axes built with React components. The visualization is styled with Poppins typography and uses d3.extent to set domain boundaries.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length against sepal length for individual flowers. The visualization uses React with D3 scales (`scaleLinear`, `extent`) to map data values to SVG coordinates, with custom axis components generating tick marks and labels. The D3 CSV loader fetches the data from a remote gist, while circles with 0.6 opacity represent each observation. The chart includes labeled axes and applies `nice()` to domain padding for cleaner tick intervals.

Loading thumbnail…

Bar Chart using D3

An animated bar chart displays the top ten countries by population in 2020 using React to render SVG elements and D3 v7 utilities. The chart reads CSV data from a GitHub gist, scales bar widths with a custom linear function, and derives y-positions from data indices. Grid lines, axis ticks, and country labels are drawn as SVG primitives, while the x-axis presents population values. The visualization pairs React state management with D3’s `csv` and manual scale calculations for layout.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a series of horizontal bars with no axes or labels, using React to manage state and SVG for drawing. The chart loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, then scales bar widths linearly using `d3.scaleLinear` and positions rows with `d3.scaleBand`. A hardcoded divisor in the width calculation replaces a proper scale range, making the visualization intentionally crude. The chart updates asynchronously after data fetching, displaying a loading message until the dataset arrives.

Loading thumbnail…

Rendering Data using D3 and React

This example renders a radial pie chart using D3.js and React, displaying the distribution of CSS color names from a CSV file fetched via `d3.csv`. Each color's arc is generated with `d3.arc`, mapping its RGB hex value to the fill, while React manages the loading state and SVG output. The visualization uses SVG paths positioned around a central point, with the chart embedded in a React component that updates once data is loaded.

Loading thumbnail…

Vega-Lite API Template

This example shows a line chart of temperature readings over time, rendered as a single thick stroke. The visualization uses the Vega-Lite API to specify the mark type and encodings, including the x-axis as a temporal field and the y-axis as a quantitative field with a non-zero scale. Data is fetched from a CSV file containing weekly San Francisco temperature measurements using d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip to enable interactive tooltips, and applies custom axis styling from a configuration object.

Loading thumbnail…

Loading Data using D3 to React

This example demonstrates how to load a CSV dataset into a React application using D3’s `d3.csv` method, then display a summary message about the fetched data’s length and size in kilobytes. The React component `App` manages state with `useState` and `useEffect`, triggering the data fetch asynchronously. The message is computed by a helper function that relies on `d3.csvFormat` to measure file size. The SVG-rendered smiley face is commented out, so the visualization focuses purely on the data-loading workflow.

Loading thumbnail…

Loading And Parsinmg .csv Data

This example demonstrates loading and parsing a CSV file with D3.js, displaying the dataset’s record count and approximate file size in kilobytes. It uses `d3.csv` to fetch and parse remote data from a GitHub gist containing CSS color names, then formats the result with `d3.csvFormat` to calculate its size. The parsed data is shown in a large `<pre>` element, updating the page text via `document.getElementById`. A commented alternative illustrates parsing fetched text with `d3.csvParse` using async/await. The visualization relies on D3 v7 and plain JavaScript without additional frameworks.

Loading thumbnail…

MouseMover Smiley Face

This example demonstrates a single, small circle that follows the mouse cursor across an SVG canvas. Built with React, it uses the `useState` hook to store the cursor’s client coordinates and the `useCallback` hook to define the `onMouseMove` event handler, which updates those coordinates on every mouse movement. The view renders a yellow smiley face (a face with eyes and a mouth) as a static SVG background, while the movable circle acts as an interactive pointer. The code relies on React’s `ReactDOM.render` to mount the component into the page’s root element.

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces renders as overlapping SVG circles and arcs. Each face uses React components for structure, while D3’s `arc` API generates the mouth path with randomized radius and width. Eye positions, sizes, and stroke thicknesses vary per face through JavaScript’s `Math.random`. The `FaceContainer` wraps all elements in a translated SVG group, with faces stacked without layout separation.

Loading thumbnail…

Fork of Smiley face part one

This example uses React and D3 v7 to render a yellow smiley face as an SVG. It constructs the face with three circles for the head and eyes, and a D3 arc path for the mouth, all positioned using computed coordinates and a transform. The code leverages D3’s `arc` API to define the mouth’s inner and outer radii and its angular range, while React handles the declarative SVG markup. The rendering is static, with no interaction or animation included.

Loading thumbnail…

Smiley face part one

This example shows a yellow smiley face rendered as an SVG graphic. The face is composed of a large yellow circle with a black outline, two smaller black circles for eyes, and a curved mouth created with a D3 arc. The code uses React to construct the SVG elements and the d3 `arc` function to generate the mouth path. All shapes are drawn using React's SVG syntax within a `<svg>` element.