A

AlankruthSai

@AlankruthSai·24 public vizzes

Loading thumbnail…

Tree Graph Alankruth

A tree graph displays hierarchical family connections, with each person as a yellow circle and black lines representing parent-child links. The data, a small hardcoded list of names, is processed through the `d3.stratify()` and `d3.tree()` APIs to compute layout positions. SVG elements render the structure, with circles and text nodes drawn within a group. Animation is applied through the `transition()` API, which animates the path lines from the source to the target and staggers text appearance based on depth, creating a dynamic reveal of the tree.

Loading thumbnail…

Alankruth

This example displays a choropleth map of India, rendering the country’s state boundaries as red-stroked SVG paths. It uses the `geoMercator` projection and `geoPath` from D3 v5 to project geographic coordinates, while React components manage the data loading and SVG rendering. The TopoJSON source is fetched from a GitHub gist, and the `feature` function from topojson converts the topology into GeoJSON features for drawing.

Loading thumbnail…

Alankruth

This example displays the countries of the world as solid red regions with yellow outlines, projected using a natural Earth projection. The map is rendered as SVG paths using D3’s `geoPath` and `geoNaturalEarth1` projection, with geographic data loaded from a world-atlas GeoJSON file. The TopoJSON library’s `feature` function extracts country boundaries from the source data, and each resulting path is appended to the SVG canvas with the country class for styling.

Loading thumbnail…

Ai_Graph

This example visualizes a small social network with six named nodes connected by weighted links, rendered as an SVG force-directed graph. The node labels are displayed next to yellow circles with red borders, and link thickness reflects the weight value from the JSON data. The visualization uses d3.layout.force to simulate the physics, with a gravity of 0.05, a link distance of 150, and a charge of -100. Users can click and drag nodes to reposition them, with the tick handler updating line coordinates and node transforms in real time.

Loading thumbnail…

Ai

This example displays a map of Kazakhstan, projected as a single orange path on a green background. Using the D3.js library, it employs the `d3.geoAlbersUsa` projection and `d3.geoPath` to render the country’s boundaries. The program fetches geographic data from the `world-atlas` JSON endpoint, filters for Kazakhstan, and appends the resulting SVG path to the canvas. The topojson library handles feature extraction from the GeoJSON data source.

Loading thumbnail…

ScatterPlot

This animated scatter plot visualizes the Iris dataset, color-coding points by species (setosa, versicolor, virginica) and cycling through the four numeric attributes for the x-axis every two seconds using `setInterval`. The reusable chart, built with D3 v6, uses `scaleLinear`, `axisLeft`, and `axisBottom` to map petal and sepal measurements to SVG circle positions, with a custom `scatterPlot()` factory function managing dimensions, margins, and axis updates.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying sepal and petal measurements as colored circles representing three flower species. The chart cycles through different measurement combinations every two seconds, updating the x-axis dynamically. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and reusable chart functions. The SVG rendering responds to window dimensions, and the animation runs via `setInterval`, with colors mapping species types.

Loading thumbnail…

Fork of World Population Area Chart

This area chart displays India’s population growth rate over time, with the y-axis labeled in billions and the x-axis representing years. The visualization uses D3 v5 with SVG rendering, employing `d3.area` and `curveBasis` to create a smooth filled path beneath the trend line. Data is loaded via `d3.csv` from a GitHub gist, with scales set through `scaleTime` and `scaleLinear`. Axis labels and ticks are customized using `axisBottom` and `axisLeft`, while the title and styling are applied via CSS classes.

Loading thumbnail…

Area Chart

This area chart visualizes one week of San Francisco temperature data, sourced from Data Canvas - Sense Your City, with the y-axis labeled "cost" and the x-axis as "Time." The code uses d3.scaleTime and d3.scaleLinear with d3.axisBottom and d3.axisLeft to construct the axes, and d3.area with a basis curve to render the filled region. The SVG output is styled via CSS, and the data is loaded asynchronously from a CSV using d3.csv.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization demonstrates a scatter plot exploring relationships between heart rate and steps, using the Iris Dataset as its foundation. The plot animates every two seconds, cycling through different column pairings to reveal various correlations. Built with D3 v6, it employs modular, reusable chart functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render interactive SVG circles. The code dynamically updates the x-axis mapping via `setInterval`, showcasing the flexibility of D3’s join pattern for smooth transitions between data dimensions.

Loading thumbnail…

Heart rate

A line chart shows heart rate over time, with time on the x-axis and heart rate values on the y-axis. The visualization uses Vega-Lite’s `line` mark, encoding a temporal field for x and a quantitative field for y. Data is loaded from a remote CSV file via a URL in the Vega-Lite specification. The chart is rendered in the browser using Vega-Embed, which loads the specification and displays the resulting visualization. The chart is set to a fixed width of 360 pixels.

Loading thumbnail…

Fork of Fork of Fork of ILINet Flu Surveillance Data

This visualization shows national ILI total flu cases per year, with lines from 2015 through 2019 plotted over time to reveal seasonal patterns and year-over-year differences. It uses vega-lite-api to create a line chart where each year is aggregated by summing counts, but encodes the year field with an unordered color scheme, making trend comparisons harder. The chart loads CSV data via d3.csv from a Gist, renders with vega-lite’s SVG output, and applies custom axis styling from a config module. Data originates from CDC FluView Interactive.

Loading thumbnail…

Fork of Fork of ILINet Flu Surveillance Data

This chart shows national ILI (influenza-like illness) totals across weeks for each year from 2015 to 2019, using overlaid line marks to compare seasonal patterns. It highlights which years peaked earlier or later, and which had higher overall case counts. The visualization is built with the Vega-Lite API and D3, using `vl.markLine` and an aggregated sum of `ILITOTAL` grouped by year, region, and week. Color encodes the year as a nominal field, though this unordered mapping makes it harder to infer chronological order. Data originates from CDC FluView via a CSV fetched with `d3.csv`.

Loading thumbnail…

Fork of D3: GeoEarth

This choropleth map visualizes brain and central nervous system cancer deaths for countries in 2019, using a yellow-to-red sequential color scale from D3’s `scaleSequential` and `interpolateYlOrRd`. The map renders with `geoNaturalEarth1`, `geoPath`, and TopoJSON world-atlas data. Hovering over a country reveals its name and total deaths via a tooltip appended with D3’s `select`. React manages state and lifecycle, loading CSV data from two external sources, while a static legend at the left encodes death-count ranges.

Loading thumbnail…

Pie Chart

A pie chart displays the proportion of profits for each country in a dataset loaded from a CSV file. The visualization uses D3.js v5, employing the `pie` and `arc` functions to generate the circular segments, which are rendered as SVG paths. A legend, built with SVG `rect` and `text` elements, identifies each country and its corresponding profit value. Color encoding is applied via `scaleOrdinal` with a custom color range, and profit values are formatted as thousands (K) using the `format` function. The chart is titled "Profits in Each Country."

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris Dataset, with points colored by species. The visualization cycles through four different x-axis mappings—petal width, sepal width, petal length, and sepal length—every two seconds, animating the transitions between views. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the plot, while a `setInterval` loop updates the x-value accessor and re-invokes the reusable chart function. SVG circles represent the data points, and axes are redrawn with each update.

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis. Points are colored by species—yellow for setosa, green for versicolor, and black for virginica—using a custom marker function. Built with D3 v6, it loads CSV data via `d3.csv`, scales axes with `scaleLinear` and `extent`, and renders circles as SVG elements. Axis labels for petal length and sepal length are added as SVG text, with circles using attributes `rx` and `ry` that reference sepal measurements, though these do not affect the visual shape.

Loading thumbnail…

Alankruth

This example displays a horizontal bar chart of units sold by country, using a dataset loaded from a CSV file. The chart renders as SVG within a React component, with D3.js handling data loading, scales, and axes. It uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and maps data to `<rect>` elements. Grid lines and axis tick labels are generated from the scales' tick values. The visualization is built with React hooks (`useState`, `useEffect`) and updates once the CSV data is fetched and parsed.

Loading thumbnail…

5320

This example demonstrates loading and parsing a CSV file of mammal data from a GitHub gist, displaying the file’s size, row count, and column count in an oversized yellow text block. The page uses D3.js v7’s `d3.csv` to fetch and parse the data, then `d3.csvFormat` to calculate the data’s size in kilobytes. A coral background and large heading provide a simple, bold visual style for the summary output.

Loading thumbnail…

CSV

This example demonstrates a minimal D3 version 7 setup that fetches a CSV file of mammal data from a GitHub gist and displays the text “Hello D3 version 7” in the browser. Using the `select` API from D3, it targets the `body` element to render the message. The code loads D3 from a CDN, then asynchronously retrieves the CSV via `fetch`, though no additional processing or visualization of the dataset is shown. The page styling centers the text with a large font size.

Loading thumbnail…

ICE

This visualization sequentially displays each mammal species from a CSV dataset by replacing the text on the page with the species name and logging its age to the console. The code uses `d3.select` and `text()` to update the body content, while loading data with `d3.csv` from a GitHub-hosted file. It demonstrates a simple, non-interactive data exploration loop, showing one record at a time rather than an aggregated chart.

Loading thumbnail…

ICE-5

This example displays a simple HTML page titled “ICE-5” that loads a CSV file of mammal data from a GitHub gist using the D3.js library’s `d3.csv` method. The code iterates through the parsed data, logging each mammal’s name and age to the browser’s console. The page’s visual output is a large static text message, while the dataset interaction takes place entirely in the background, with no charts or graphical elements rendered. The styling and layout rely on plain CSS embedded in the document head.

Loading thumbnail…

IC4

This example renders a stylized, abstract face using React and SVG. The face is composed of basic shapes, including a yellow circle for the head, gradient-filled eyes, a semi-circular mouth created with the d3.arc function, and a rectangular nose. A lighting filter from SVG is applied to a large rectangle to create a specular highlight effect across the entire composition. The code uses d3.v6 for the arc and range functions, while React manages the component structure.

Loading thumbnail…

SmileySad

This example uses React and D3.js to draw a simple smiley face in SVG. It renders a yellow circle with black stroke for the face, two small circles as eyes, and an arc path for the mouth using D3’s `arc()` generator. The code uses fixed numeric constants for positioning and styles all elements with inline SVG attributes.