A

aniosindustries

@aniosindustries·26 public vizzes

Loading thumbnail…

Final Project

This visualization displays the landing sites of successful Mars landers on an interactive globe, projected using an orthographic projection with overlaid SVG markers. The map supports drag-to-rotate and scroll-to-zoom interactions, with tooltips showing each site’s name on hover. It renders the rotating globe’s shaded surface via Canvas and the site markers as SVG paths using `d3.geoPath`, while `d3.drag` and `d3.zoom` handle the gestures. The underlying GeoJSON data for landing coordinates comes from a remote JSON file, and the orthographic rotation uses the Versor library.

Loading thumbnail…

Fork of USA Country Map

This map of the United States renders the 50 states and their internal boundaries using a projected SVG path generated with d3.geoPath, based on a TopoJSON topology from the us-atlas dataset. A green fill colors each land area, while white strokes define state interiors for contrast; hovering over a state changes its fill to orange. The React component loads data via a custom hook that retrieves the TopoJSON file using d3.json and transforms it with TopoJSON’s feature and mesh functions.

Loading thumbnail…

USE THIS

Three SVG components built with React and D3.js (d3.arc, d3.timeFormat) render the current day of the year as a percentage. A progress bar, donut, and gauge all display the same fraction, computed from the date via timeFormat('%j'). Each component independently draws its background and foreground paths and labels the value directly in the SVG. The visualization demonstrates how multiple chart types can encode identical data with distinct visual metaphors.

Loading thumbnail…

Fork of Interactive Color Legend Scatterplot to determine Alcohol consumption Vs Life Expectancy

This interactive scatterplot visualizes the relationship between alcohol consumption and life expectancy across continents using data from a CSV file. Points are colored by continent, with an interactive color legend that highlights one continent at a time while fading others. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering, with mouse events on the `ColorLegend` component triggering the hover filtering.

Loading thumbnail…

Fork of [TEST] Pie Chart

A pie chart displays the distribution of credit ratings, with the dominant "AAA Local" category at 73.2%. The chart uses D3 v5's `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths, with a legend showing each label and its corresponding percentage. Data is loaded from a JSON file and formatted with `d3.format` for the legend values.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top five most populous countries as a rudimentary bar chart with no axes or labels. The visualization uses React to render an SVG, with React hooks managing state and data loading. The code leverages D3 v5's `scaleBand` for the categorical y-axis positioning and `scaleLinear` for the quantitative x-axis scaling, pulling data from the United Nations World Population Prospects 2019 dataset. Bars are drawn as SVG `<rect>` elements, positioned using the computed scales.

Loading thumbnail…

Fork of Rendering Data with React

This example displays all CSS named colors as a radial burst of pie slices arranged around a central point. It loads color data from a CSV file using D3’s `csv` utility, then computes pie angles with `d3.pie` and renders each slice as an SVG `<path>` using `d3.arc`. The visualization is built with React, where each color’s hex value directly fills its corresponding slice. A loading state appears while the data is fetched asynchronously.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented by a slice emanating from the center of an SVG canvas. It loads the data from a CSV file using D3’s `csv` utility, then processes it with `pie()` and renders the arcs via `arc()`. React manages the component state and updates the SVG elements when the data arrives, while the `fill` attribute of each path uses the color’s hex value. The visualization uses D3 v5 and React 16.9, with d3’s `pieArc` configured to span the full width.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting miles per gallon against horsepower, with weight encoded as color. The visualization is built using the Vega-Lite API, which is programmatically assembled in JavaScript via `vl.markPoint`, `vl.x`, `vl.y`, and `vl.color`. Data is loaded asynchronously from a CSV file using `d3.csv`. The chart renders as SVG with a custom dark theme and tooltips provided by `vega-tooltip`.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a dataset of automobiles, with each point representing a car model. The plot uses a scatterplot with tooltips displaying the car name, rendered as a full-screen SVG. Built using the Vega-Lite API, the code leverages `vega`, `vega-lite`, and `vega-lite-api` libraries while fetching data from a CSV via `d3.csv`. The visualization is configured with custom axis styling and an interactive tooltip handler for enhanced readability.

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a summary of CSS named color data loaded from a remote CSV file, showing the file size, row count, and column count. The visualization uses React state management with the `useState` and `useEffect` hooks to fetch and store the dataset, while D3's `csv` function handles parsing the remote data source. The resulting text is rendered in a large `<pre>` element, and the summary metrics are computed using `d3.csvFormat` and the data's array properties.

Loading thumbnail…

Mouse Follower

This example shows a smiley face that follows the mouse cursor across the full browser window. The face is rendered as a single yellow circle with two smaller black circles for eyes, drawn using React state and inline SVG. The code uses React's `useState` hook to track the mouse position via `onMouseMove`, updating the circle's `cx` and `cy` attributes in real time. It renders using React DOM into an SVG element sized to the viewport dimensions.

Loading thumbnail…

Fork of Smiley Face Part V

Six smiley faces, each rendered as an SVG circle with yellow fill and black stroke, display random variations in eye offset, eye radius, and mouth thickness. The React components split into separate files for the face, eyes, mouth, background, and container, using ES6 modules and React Fragments. D3’s `arc` generator shapes the mouth path, while `d3.range` creates six instances from a single React component.

Loading thumbnail…

Fork of Smiley Face Part V

A modular React smiley face is rendered as an SVG, centered on a yellow circle with black stroke, two eyes, and an arc-based mouth. The code splits components into separate files using ES6 modules, with React Fragments grouping the eyes. It uses `react` and `react-dom` for rendering, and the D3 `arc` generator from `d3` to create the mouth path. All dimensions are defined as constants in `index.js`, and the app mounts to a root div in the HTML.

Loading thumbnail…

Fork of Bar plot of Yelp data: top cities

This bar chart shows the top ten cities in the Greater Boston area by number of restaurants rated four stars or higher on Yelp, with Boston leading at over 1,000 establishments. The visualization aggregates raw Yelp dataset entries by city using JavaScript’s reduce method, then sorts and filters the results before rendering. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to draw the axes with custom tick styling. Bars are appended as SVG rectangles with a purple fill, and the data comes from a local CSV file.

Loading thumbnail…

Fork of React + D3 Hooks template

A scatterplot encodes student eye color as a 3D RGB color space, with circle position mapping red and green values and radius mapping blue intensity. The React component fetches JSON data from a GitHub gist, validates hex color codes, and renders SVG circles that animate through transitions with bounce easing. The visualization uses React hooks with a D3 v5 selection and scale API, demonstrating integration of the two libraries through a wrapping SVG container component.

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with multiple colored lines tracking each region’s population from 1950 to 2100. Data comes from UN population estimates merged with medium-variant projections. Using D3 v5, the code employs `d3.csv`, `d3.nest` for grouping, `d3.scaleTime`, `d3.scaleLinear`, and a custom color legend to distinguish regions. Lines are drawn with `d3.line` and `curveBasis`, while axes and labels use `d3.axisLeft` and `d3.axisBottom`, rendered as SVG.

Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart shows the declining populations of three sea turtle species—Green, Loggerhead, and Hawksbill—from 1910 to 1990, using mock data. The visualization uses d3.v4 with d3.stack and d3.area to construct the layers, while d3-area-label positions the species labels along the curves. It employs d3.scaleTime and d3.scaleLinear for axes, d3.schemeDark2 for colors, and includes hover effects that turn areas black, with basic tooltips revealing species names.

Loading thumbnail…

Fork of Choropleth Map Argentina Dptos Corona (Topojson)

This choropleth map shows confirmed COVID-19 cases per department in Argentina, with a logarithmic color scale from light yellow to deep purple and a corresponding axis legend. The visualization uses d3.geoPath with a geoTransverseMercator projection to render TopoJSON data from a GitHub repository, displaying department names and case counts via tooltips. Zooming via d3.zoom enables interactive exploration, while d3.scaleLog maps case values to an SVG linear gradient. The map includes hover effects, province borders, and a custom axis using d3.axisRight with formatted tick labels.

Loading thumbnail…

Fork of Smiley Face Part-3 (React and d3)

This example shows a yellow smiley face with black-outlined circular eyes and a curved mouth, composed using SVG elements. The face is drawn inside a group that is translated to the center of a 960 by 500 canvas. The mouth uses D3’s `arc()` helper from `d3-shape` to generate a path, while the eyes and face are plain SVG circles. The code runs in React, rendering the SVG via ReactDOM, and sets stroke, fill, and radius properties directly in JSX.

Loading thumbnail…

Fork of Let's Make a Face Part I

A half-finished smiley face takes shape as three black and yellow SVG circles on a plain white background. The example uses hand-coded SVG elements—a large yellow circle for the head and two smaller black circles for eyes—with no JavaScript or data binding. It demonstrates the foundational geometry of a face, positioning each circle with explicit `cx`, `cy`, and `r` attributes within a 960 by 500 viewport. The code includes styling for stroke and fill, but lacks the mouth, leaving the expression incomplete. The rendering relies solely on static SVG markup.

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a bare-bones starter template for combining React with D3.js. It shows a simple layout with gray and light-gray rectangles representing the SVG canvas and the inner plotting area, separated by visible margins. The code uses React’s `createElement` pattern and a reusable `VizContainer` component that abstracts standard margin conventions and renders an SVG `<g>` group. D3 v6 is loaded via CDN, and the setup uses ReactDOM to mount the visualization, with the margin rectangles toggled by a `showMargins` prop.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The face lacks a mouth, as noted in the README, so it is halfway to completion. The code uses raw SVG elements with fixed coordinates, including circle positioning and stroke styling, rendered at 960 by 500 pixels. No JavaScript libraries or data sources are involved beyond the static SVG markup.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a single yellow circle with a thick black outline, representing the first step in building a smiley face. The circle is centered within an SVG canvas and uses fixed pixel coordinates and radius values. The code is written in React, using JSX to create SVG elements directly within the component’s return statement, and renders via `ReactDOM.render` into a root div. Only the face outline is present; no eyes, mouth, or other features are drawn.

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is rendered as an SVG graphic that fills the browser window, with its face scaled relative to the viewport dimensions. The example uses React 16.9 to declaratively construct the SVG elements, computing the circle’s radius from the window height and positioning the eyes and mouth via translated coordinate offsets. Rather than a static graphic, the code adapts the drawing to the user’s screen size. It relies on ReactDOM to mount the component into the DOM, with styling provided by inline CSS in the HTML file.

Loading thumbnail…

Smiley Face pt 1

This example shows a yellow circular face with two black eyes, positioned on a blank SVG canvas. The face is centered on a 960×500 coordinate system, with the main circle drawn at (480, 250) and each eye offset horizontally. The code uses raw SVG elements—`circle` for the face and eyes—with explicit `fill`, `stroke`, and `stroke-width` attributes. The rendering is static, with no animation or interaction, and the document is a minimal HTML page. The design is a first step toward a smiley face, omitting the mouth.