A

Ameer Nuri

@ameernuri·16 public vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders a row of five red circles on an SVG canvas. The code uses D3 v7 APIs, including `d3.select` to access the SVG element, `d3.range` to generate an array of five fruit objects, and the data-join pattern with `.data()`, `.enter()`, and `.append()`. Each circle is positioned horizontally via a calculated `cx` attribute and vertically centered, with a fixed fill color and radius. The page loads D3 from a CDN and runs the script from a separate bundle file.

Loading thumbnail…

Fork of React Starter

This example displays a single, large text message centered on the page using React. The interface, defined by the `index.html` file, loads React and ReactDOM from unpkg, while the `bundle.js` script renders the component. The code uses the standard React `createElement` function to construct and manage the DOM elements, applying a 13em font size for prominent visual impact.

Loading thumbnail…

D3 Area Chart

This example displays a stepped area chart of a time series where values rise in distinct plateaus from zero to 80,000, then fall back to zero. The chart uses an SVG path generated by d3.area, with d3.axisBottom and d3.axisLeft for scales, and linear scales for both x and y dimensions. Data is provided as a hardcoded array mapped to x/y points, rendered with yellow fill on a red background. The visualization demonstrates how d3.v7 constructs area shapes from discrete data points.

Loading thumbnail…

D3 Dynamic Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, with a dropdown menu to switch the x-axis between sepal length and width. Built with React and D3 v7, it renders SVG circles whose positions map sepal measurements to linear scales. The application fetches CSV data via `d3.csv`, computes extents with `d3.extent`, and uses `scaleLinear` for axes. Custom React components handle the x/y axes, dropdown, and data marks, with tooltips for values.

Loading thumbnail…

React D3 Starter

This example presents a minimal React and D3 starter template, displaying an empty SVG canvas within a React application. The code sets up a 960 by 500 pixel SVG element using React’s JSX syntax, rendered into the DOM via `ReactDOM.render`. It imports D3 v7 and React 17 from CDN links, with all styling handled by CSS that removes page margins. The visualization currently shows no data or chart, serving purely as a foundational scaffold for building interactive D3 visualizations within the React framework.

Loading thumbnail…

D3 World Atlas

This example displays a world map using a natural Earth projection, rendered as SVG paths. The visualization shows landmasses in blue, country borders, graticules, and a semi-transparent sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. The map is drawn with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs within a React component structure.

Loading thumbnail…

D3 Iris Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis for individual flower samples. Each data point is rendered as a circle, with a native HTML tooltip revealing the sepal length value on hover. The visualization is built with React and D3 v7, using `d3.scaleLinear` and `d3.extent` to map data to SVG coordinates, while custom React components handle axis rendering. The data is loaded asynchronously via `d3.csv` from a remote URL.

Loading thumbnail…

Population Bar Chart

A horizontal bar chart ranks the world’s 15 most populous countries by estimated 2020 population, with a native SVG title element showing exact values on hover. The React component builds linear and band scales from d3-scale, renders axes and rectangles as SVG, and formats tick labels from billions to “B” using d3-format. Data is loaded asynchronously from a CSV via d3.csv and styled with Poppins typography.

Loading thumbnail…

ECharts

This example demonstrates a React-based visualization using ECharts, rendered within a minimal HTML page that loads React and ReactDOM from a CDN. The page displays a single large message, styled with CSS, centered in the viewport. The code initializes a root DOM element and relies on bundled JavaScript to mount the React application, though the actual chart configuration is not included in the visible files. It showcases how ECharts can be integrated into a React project using the standard ReactDOM rendering API.

Loading thumbnail…

D3 color spiral

A D3 color spiral arranges named CSS colors in a circular arc around a central point. Each color is rendered as a slice using a d3.arc with a large outer radius, creating a radial gradient of hues. The code fetches color data from a CSV file via d3.csv, then uses d3.pie to map each row to a segment. Built with React and ReactDOM, the visualization displays the colors in an SVG canvas sized 960 by 500 pixels.

Loading thumbnail…

Vega Vehicle Scatter Plot

This example renders a scatter plot of vehicle data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, and miles per gallon, with origin as a color-coded category. Built with React and the Vega-Lite API, it uses `vl.markCircle` to encode fields for x, y, size, color, and tooltip, while the `config.js` file customizes axis styles and label appearance. The visualization fetches data asynchronously via `d3.csv`, registers the Vega tooltip handler for interactive tooltips, and dynamically sizes the plot to fit the window using `autosize`.

Loading thumbnail…

Vega Chart - Emissions by Year

This example shows annual emissions totals as a filled area chart, with color encoding representing solid emissions by year. The visualization uses the Vega Lite API, registered with Vega and React, to render SVG output. Data is loaded via `d3.csv` from a GitHub-hosted CSV file. The chart is configured with custom axis styles, a black color scheme, and tooltips provided through the `vega-tooltip` Handler, scaling responsively to the window size.

Loading thumbnail…

Vega Bar Chart

This bar chart visualizes the top 20 countries by population, with bars colored by religion and sorted in descending order, using a zero-free y-axis scale to emphasize proportional differences. Built with the Vega-Lite API within a React framework, the visualization loads CSV data via d3.csv and renders an interactive SVG with tooltips through the Vega tooltip handler. The configuration applies custom dark styling to axis labels and titles, while the chart responsively fits the full window dimensions.

Loading thumbnail…

Fork of Vega

This visualization displays a line chart of weekly temperature data in San Francisco, rendered as a single black line across a dark background. The chart uses a Vega-Lite specification defined through the `vega-lite-api` library, with the line mark encoding timestamp on the x-axis and temperature on the y-axis, both with zero scales disabled. Data is loaded asynchronously using the D3 `csv` function, while the chart is rendered via Vega’s SVG renderer and integrated into a React application. Custom styling for axes and labels is applied through a config object.

Loading thumbnail…

Named colors

This visualization displays summary statistics about a named-colors dataset, including its file size in kilobytes, row count, and column count. The data loads from a CSV file hosted on GitHub, and the display updates in a large preformatted text block. The code uses D3 v7’s `d3.csv` to fetch and parse the data, `d3.csvFormat` to measure its size, and plain DOM manipulation to render the results. The example highlights basic data loading and formatting operations within a minimal HTML page.

Loading thumbnail…

Follow Mouse

A circle follows the mouse cursor as it moves across an SVG canvas. The circle's center position updates to match the cursor’s coordinates, which are captured through the `onMouseMove` event handler using React’s `useState` and `useCallback`. The example uses ReactDOM and D3.js v7 to render the SVG, with the circle’s radius fixed at 30 pixels.