A

Ankit-Ian-53787

@Ankit-Ian-53787·41 public vizzes

Loading thumbnail…

Corona Virus Line Chart

This example shows a modular smiley face built with React components and SVG, where each facial feature is a separate reusable component. The face is constructed from a yellow background circle, two eyes positioned by offset coordinates, and a mouth drawn using D3’s `arc` generator. The `FaceContainer` wraps the SVG and applies a translation transform to center all elements. The code also includes a placeholder `LineChart` component with empty data, and the `App` sets up an empty array, though the chart itself is not rendered. The visualization uses React 16.9 and D3 v5.

Loading thumbnail…

Loading and Parsing Corona virus Data

This example displays the total global COVID-19 deaths as a large red number, along with the date of the latest data point. It loads a time-series CSV from the CSSE at Johns Hopkins using `d3.csv`, then parses the last column as the most recent date. The code sums all country values for that date using JavaScript’s `reduce`, formats the total with `d3.format`, and updates the page text via the DOM. The visualization is minimal, focusing solely on the computed aggregate without any charts or maps.

Loading thumbnail…

Fork of Missing Migrants on a Map

This visualization displays a world map showing the percentage of deaths from self-harm across countries for the year 2017, using a yellow-orange-red sequential color scale. It combines D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for map rendering within a React component, with country boundaries sourced from the World Atlas TopoJSON. Missing data is shown in gray, and the choropleth uses the Missing Migrants Dataset’s global suicide death percentages.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes events from the Missing Migrants Dataset, with each circle representing a single migration incident plotted by reported date on the x-axis and total dead and missing on the logarithmic y-axis. The visualization uses React for component structure and d3 v5 functions including scaleTime, scaleLog, extent, and csv for data loading and axis rendering. SVG circles with tooltip titles display the data, while styled tick marks and axis labels provide clear context for the temporal and casualty dimensions.

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This visualization combines a bubble map and a time-series histogram to explore global migrant deaths. The map uses a natural Earth projection via `d3.geoPath` to plot incidents, with circle radius scaled by the square root of deaths. A linked `d3.brushX` on the histogram filters the map’s circles by date range, while both views share data from the Missing Migrants Project. Built with React and D3 v5, the histogram aggregates monthly totals using `d3.bin` and `d3.sum`.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows the total number of dead and missing migrants per month, binned from the Missing Migrants Dataset. The code uses React with D3 v5’s `scaleTime`, `scaleLinear`, `bin`, and `sum` APIs to aggregate monthly totals and render an SVG bar chart. Axes are built with custom components, and bars display tooltips on hover.

Loading thumbnail…

Fork of Missing Migrants on a Map

This visualization combines a bubble map and a date histogram to show the geographic distribution and timing of missing migrant events. Each circle on the map represents an event, with its radius scaled by the total number of dead and missing, projected using `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. Below, the histogram aggregates monthly totals from the same dataset. The code uses React for component structure, D3 v5 for scales and geographic rendering, and loads data from a CSV of the Missing Migrants Dataset alongside TopoJSON world atlas boundaries.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows the total number of dead and missing migrants per month, binned from the Missing Migrants Dataset. The code uses React with D3 v5’s `scaleTime`, `scaleLinear`, `bin`, and `sum` APIs to aggregate monthly totals and render an SVG bar chart. Axes are built with custom components, and bars display tooltips on hover.

Loading thumbnail…

Fork of Sized Points on a Map

This visualization presents a world map where each circle represents a city with a population exceeding 50,000, sourced from the Simplemaps World Cities Database. The circles’ radii are scaled using a square-root scale (`scaleSqrt`) based on population, with a maximum radius of 15 pixels. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country landmasses and interiors from World Atlas TopoJSON, plus graticules for a polished look. The visualization is built with React and SVG, loading data via custom `useWorldAtlas` and `useCities` hooks that fetch JSON and CSV respectively.

Loading thumbnail…

Fork of Fork of Missing Migrants Date Histogram

This visualization displays a date histogram of the total dead and missing migrants per month from the Missing Migrants Dataset. The chart uses React and D3 v5, employing `d3.bin` to group reported dates into monthly bins and `d3.sum` to aggregate the death tolls. SVG rectangles render the bars, with axes built from custom React components. The data is loaded asynchronously via `d3.csv` from a GitHub gist, and the y-axis shows total casualties while the x-axis spans time.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows the total number of dead and missing migrants per month, binned from the Missing Migrants Dataset. The code uses React with D3 v5’s `scaleTime`, `scaleLinear`, `bin`, and `sum` APIs to aggregate monthly totals and render an SVG bar chart. Axes are built with custom components, and bars display tooltips on hover.

Loading thumbnail…

Fork of Working with Time

This scatter plot displays the number of dead and missing migrants over time from the Data Canvas Sense Your City Dataset. The time axis is aggregated into monthly bins, with the total count per bin plotted. Built with React and D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.histogram` for binning, and `d3.extent` for domain calculation. SVG circles render the marks, with tooltips showing the month.

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, with circle size encoding population via a square-root scale. The map uses a Natural Earth projection with land masses, graticules, and country interiors rendered via `geoPath` and `geoGraticule` from D3. The React app loads TopoJSON from World Atlas and CSV city data, then projects coordinates through `geoNaturalEarth1` to position the SVG circles.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. A color legend on the right is interactive: hovering over a species name fades out all other points and highlights only that species. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and SVG circles for marks. Data is loaded via `d3.csv` from a GitHub gist.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Users can hover over the color legend to highlight a selected species while dimming all other data points. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading. React manages state for hover interactions, while SVG elements render the axes, legend, and data marks. The code also includes reusable AxisBottom, AxisLeft, ColorLegend, and Marks components.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with points colored by iris species. It uses a color legend to map species to categorical colors. Built with React and D3 v5, the SVG rendering uses D3’s `scaleLinear`, `scaleOrdinal`, and `extent` APIs to compute scales, while axes and legend ticks are generated via custom React components. The data is loaded asynchronously from a CSV URL using D3’s `csv` function, with tooltips showing the petal length formatted via `format`.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. Two dropdown menus dynamically select which numerical attributes appear on the x and y axes, while a third menu enables species filtering. The visualization uses React for state management, d3.scaleLinear for axis scaling, and d3.scaleOrdinal for categorical color encoding of species. SVG circles render each data point, with axes and legend built from custom React components that leverage d3’s tick generation.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, letting users explore the relationships between sepal and petal measurements across three flower species. The visualization presents a 2D projection of the multivariate dataset, with each flower represented as a circle positioned by its selected attributes on the x and y axes. Users can dynamically reassign which attribute controls each axis through dropdown menus, switching between sepal length, sepal width, petal length, and petal width measurements. The plot leverages React with d3.v5’s scaleLinear for axis scaling, with SVG rendering for circles and axis ticks.

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by switching the X and Y axes via dropdown menus. Built with React and D3 v5, the SVG renderings use d3.scaleLinear for axes and d3.extent for data domains. The code explicitly parses numeric CSV values and renders circles for each data point.

Loading thumbnail…

Fork of Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a list of options. It shows how a controlled `select` element updates the application state via `useState` and a custom `Dropdown` component. The code uses React 16.9.0 and ReactDOM, with the dropdown’s `onChange` event triggering a state update through `onSelectedValueChange`. Options include dog, cat, hamster, parrot, spider, and goldfish, with the initial value set to hamster. Styling is applied via inline CSS in the HTML file.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, letting users explore the relationships between sepal and petal measurements across three flower species. The visualization presents a 2D projection of the multivariate dataset, with each flower represented as a circle positioned by its selected attributes on the x and y axes. Users can dynamically reassign which attribute controls each axis through dropdown menus, switching between sepal length, sepal width, petal length, and petal width measurements. The plot leverages React with d3.v5’s scaleLinear for axis scaling, with SVG rendering for circles and axis ticks.

Loading thumbnail…

Fork of Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a list of six options. The interface pairs a label with a `<select>` element, where the chosen value is tracked in state and logged to the console on change. The code uses React hooks like `useState` for managing the selected value and renders the dropdown via a reusable `Dropdown` component that maps over option objects. ReactDOM renders the root app, with the dropdown styled using inline CSS in the HTML file.

Loading thumbnail…

Menus with React

This example demonstrates a pet-selection interface built with React, showing how dropdown menus manage state and re-render dynamically. It uses React hooks (`useState`) to track the selected value, initialized to "hamster," and passes it through a custom `Dropdown` component defined in `Dropdown.js`. The component maps over an array of pet options (goldfish, dog, cat, etc.) to generate `<option>` elements, triggering updates via the `onSelectedValueChange` callback. The page is styled with large typography and rendered into the DOM using `ReactDOM.render`.

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a yellow smiley face rendered as an SVG, composed of a circular background, two eyes, and an arc-shaped mouth. The React components are split into separate ES6 module files, with the mouth’s path generated using D3’s `arc` generator. The face is centered via an SVG `<g>` transform, with all dimensions (eye offsets, radii, stroke width) passed as props. The visualization uses React 16.9, D3 v5, and plain SVG elements, with no external data source.

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays temperature readings over time as a natural curve, with the x-axis showing abbreviated weekdays and the y-axis representing temperature values. The example uses React components to render SVG elements, leveraging d3's `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` for axis construction and data scaling. The data is loaded from a World Atlas TopoJSON file, although the plotted dataset itself is not visible in the provided code. The chart features custom axes with tick labels and a smooth curved line generated using d3's `line` and `curveNatural`.

Loading thumbnail…

Fork of Polished World Map

This visualization displays a world map with country boundaries rendered as filled teal shapes against a light gray sphere, overlaid with graticule lines and interior borders. The map uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the geographic features from World Atlas TopoJSON data loaded via `d3.json`. React manages the component structure, while SVG elements render the map within a fixed 960×500 viewport. Styling applies a polished color palette with subtle stroke distinctions for graticules and coastline interiors.

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes temperature over time in San Francisco, with each circle representing a daily measurement. The chart uses D3 scales (scaleLinear) to map data to positions, while React components render the SVG axes and marks. Axis ticks are styled with grid lines, and the data is loaded from a CSV file using D3’s csv method. Hovering over a circle reveals its timestamp via a native SVG title tooltip. The visualization is built with React 16.9 and D3 v5, using a Poppins font and a clean, minimal aesthetic.

Loading thumbnail…

Refractred Bar Chart

This chart displays the relationship between sepal length and sepal width for Iris flowers, using a scatterplot of circles. The underlying data comes from the classic Iris dataset, loaded via `d3.csv` from a GitHub gist. Built with React and rendered as SVG, the visualization uses `d3.scaleLinear` for both axes, with axis components and marks rendered as separate React components. The code includes a population-related axis label and formatting that suggests the chart may have been refactored from an earlier bar chart example, though the displayed data remains the Iris measurements.

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width. It uses React components for rendering SVG elements, with d3-scale functions like `scaleLinear` and `extent` to compute the axes and positions. Stylized tick marks and labels are generated by custom AxisBottom and AxisLeft components, while d3.csv loads and parses the data. The circles include native SVG `<title>` elements for tooltips, and the Poppins font is applied globally.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays the ten most populous countries in 2020 as a horizontal bar chart, using United Nations population data loaded via D3’s `csv` utility. React manages component state and rendering, while D3’s `scaleBand` and `scaleLinear` compute bar positions and widths, and `max` and `ticks` generate the axis. The SVG output is created through React elements, with gridlines and country labels drawn from D3 scales.

Loading thumbnail…

Rendering data with React

This example shows how React manages D3-loaded data to render a pie chart of CSS named colors. It loads a CSV of color names and hex values using `d3.csv` into React state via the `useState` and `useEffect` hooks. Each slice is drawn as an SVG `<path>` using `d3.arc` and `d3.pie`, with the fill color set directly from each row’s `RGB hex value`. While the data loads, a large “Loading…” message appears. The visualization renders entirely in SVG within a React component.

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a yellow smiley face rendered as an SVG, composed of a circular background, two eyes, and an arc-shaped mouth. The React components are split into separate ES6 module files, with the mouth’s path generated using D3’s `arc` generator. The face is centered via an SVG `<g>` transform, with all dimensions (eye offsets, radii, stroke width) passed as props. The visualization uses React 16.9, D3 v5, and plain SVG elements, with no external data source.

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of randomly generated smiley faces renders in SVG, each with a yellow circular face, black outline, eyes, and an arc-shaped mouth. The example demonstrates how to combine React components with D3’s `arc` generator to create reusable, data-driven visual elements. Using React’s component model and ES6 modules, the `Face` component composes smaller subcomponents like `BackgroundCircle`, `Eyes`, and `Mouth`, while `FaceContainer` wraps the SVG output. D3’s `range` utility generates the grid, and each face’s dimensions vary via `Math.random()` within the `App` component.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, each colored by its corresponding hex value. The visualization loads data from a CSV file using D3's `csv` utility, then uses React to render an SVG containing the pie chart. The pie layout is computed with D3's `pie` function, while each slice is drawn as an SVG path using the `arc` generator. The React component manages state and renders the final visualization, with a simple loading message shown before data arrives.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the distribution of CSS named colors by plotting each color’s keyword against its RGB hex value as a computed field, using a semi-transparent area mark with tooltips for individual names. It loads color data from a CSV via d3.csv, then renders the visualization through the Vega-Lite API, which registers Vega and Vega-Lite instances and configures an SVG view with a custom tooltip handler. The chart auto-fits to the window size and applies a dark themed configuration for labels and axes.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load a CSV dataset of CSS named colors using D3 utilities and React state management. The application fetches the data from an external GitHub gist via the `d3.csv` function, then displays a concise summary showing file size in kilobytes, row count, and column count within a styled `<pre>` element. React's `useState` and `useEffect` hooks control the data loading lifecycle, initially rendering a "Loading..." message until the asynchronous request completes. The visualization highlights the integration of D3's data-fetching capabilities with React's component-based rendering and state handling.

Loading thumbnail…

Loading data with react and d3

This example demonstrates how to load and display CSV data in a React component using D3’s `csv` function. It fetches a remote dataset of CSS named colors from a GitHub gist and tracks the loading state with React’s `useState` hook. Once the data arrives, the component renders a simple status message indicating whether the data is “Loaded” or “loading.” The code combines React 16.9 with D3 v3, and uses `ReactDOM.render` to mount the app into the HTML page.

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size and column count. It first fetches the text data asynchronously, then uses `d3.csvParse` to convert it into an array of objects. The code reads a CSS named colors dataset from a GitHub gist, checks its size in kilobytes, and counts the parsed columns before updating the page’s message container. The example relies on the Fetch API and D3.js v7 for parsing and text manipulation.

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time. The React application uses the `useState` and `useCallback` hooks to track mouse coordinates from the `onMouseMove` event, then renders a single `<circle>` element whose `cx` and `cy` attributes are bound to that state. The circle starts at the canvas center and moves smoothly as the user moves the pointer, with the SVG viewport set to 960 by 500 pixels.

Loading thumbnail…

Fork of Smiley Face Part II

A matrix of randomized smiley faces rendered as SVG via React components, with each face composed of a yellow background circle, two eyes, and an arc-based mouth built using d3.arc. The d3.range function generates 18 face instances, each with variable eye radius and mouth width produced by Math.random. React 16.9 and d3.v7 are loaded via CDN, and the Face, Eyes, Mouth, and BackgroundCircle components manage the visual structure.

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal React application that renders the text “Hello JSX” as a heading. It uses React and ReactDOM (both from UMD production builds) to mount a functional component into a `div` element with the id `root`, which is defined in the accompanying `index.html` file. The page’s body is styled with no margin and hidden overflow, while a commented-out SVG block suggests an alternative static circle drawing approach that is not active. The rendering relies on standard React DOM reconciliation, producing an SVG-free, HTML-based output.