Skip to main content
Log in
A

Akhila-Battula

@Akhila-Battula·12 public vizzes

Loading thumbnail…

Family Tree

This family tree visualization displays three generations of a family using a collapsible tree layout, with each generation color-coded via type tags in the data. Nodes present names as rectangles with rounded corners, connected by curved links, and the entire SVG drawing supports zooming and panning through `d3.behavior.zoom`. The tree’s height adapts to the number of nodes at each depth, while colors are assigned per generation type, and the visualization loads its hierarchical data from a JSON file using `d3.json`. Node transitions are animated with `d3.layout.tree` and update functions.

Apr 3, 2022
Loading thumbnail…

US State Map

This example displays a choropleth-style map of the United States, showing state boundaries as gray filled polygons with white strokes on a blank background. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render the geographic shapes, while the TopoJSON `feature` API extracts state geometries from the `counties-10m.json` dataset hosted via jsdelivr. The map is drawn as SVG paths appended to a fixed 960×500 canvas, with styling applied through a CSS class.

Apr 3, 2022
Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection, with graticules, landmasses, and country interiors colored in a muted palette. The visualization uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render the geographic features from TOPOJSON data loaded via `d3.json`. React manages the SVG output, while `topojson.mesh` computes country interior boundaries for additional styling.

Apr 3, 2022
Loading thumbnail…

Social Network graph

A social network graph displays six people as labeled yellow circles, with orange links of varying thickness indicating connection strength between individuals. The visualization uses D3.js v4 with an SVG rendering approach, applying a force-directed layout via `d3.layout.force` to position nodes and manage collision and attraction. Links are drawn as lines with stroke widths proportional to each connection’s weight, while node labels are added as text elements. The data comes from a static JSON file containing nodes with group assignments and weighted links. Interactive dragging is enabled through `force.drag` on node groups, with positions updated on each tick event.

Apr 3, 2022
Loading thumbnail…

Area Chart

This area chart shows the Indian population from 2010 to 2022, with the year on the x-axis and population in billions on the y-axis. The chart uses a smooth curve to connect the data points, filled in orange. It is built with D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis`, rendering as SVG. The data is loaded from a CSV file hosted on GitHub.

Mar 27, 2022
Loading thumbnail…

Line Chart

This line chart shows the population of India from 2010 to 2022, with years on the x-axis and population on the y-axis. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to render the data as an SVG path. The data is loaded from a CSV file hosted on GitHub, with population values parsed as numbers. The chart features grid lines, axis labels, a title, and a green line styled with CSS.

Mar 27, 2022
Loading thumbnail…

Pie Chart

This pie chart displays undergraduate enrollment numbers for various universities, with each slice labeled in a legend showing the college name and enrollment count. The visualization uses D3 v3’s `d3.layout.pie` to compute arc angles, `d3.svg.arc` for path generation, and an ordinal color scale with a dark blue gradient. Data is loaded as CSV from a GitHub gist, and a custom legend is rendered via the `d3.legend` function defined in index.js, which positions circles and text based on data attributes.

Mar 27, 2022
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal and sepal measurements against each other while coloring each point by species. Constructed with D3 6.7.0's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, the visualization animates by cycling the x-axis through different measurement columns every two seconds using `setInterval`. Circles are rendered as SVG elements with per-species colors (green, indigo, red), and the plot is fully parameterized via a custom `scatterPlot` function for flexible reuse.

Mar 27, 2022
Loading thumbnail…

Bar Chart

This bar chart visualizes the elevations of 25 mountain peaks from a CSV dataset, using a horizontal bar layout where bar length encodes elevation in feet. Each mountain’s name appears on the y-axis, with an orange gridline and tick labels on the x-axis. The chart is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles. Data is loaded asynchronously via `d3.csv` and displayed after a brief loading state.

Mar 6, 2022
Loading thumbnail…

Scatter Plot for Iris dataset

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for 150 iris flowers. Each point represents a flower, with its position determined by the `scaleLinear` mappings for the x and y axes. The visualization uses D3 v6 with an SVG rendering approach, loading data from a CSV file via `d3.csv`. Axis ticks and labels are rendered using `axisBottom` and `axisLeft`, while custom text elements label the axes as "Petal Length" and "Sepal Length."

Mar 6, 2022
Loading thumbnail…

Loading and Parsing file data

This example demonstrates how to load and parse a CSV file containing mountain data, displaying summary statistics about the file’s size, row count, and column count as text. The visualization uses React hooks (`useState`, `useEffect`) to fetch the dataset with D3’s `csv` method and format the results using `d3.csvFormat`. A decorative SVG triangle sits in the corner, while the parsed data appears in a `<pre>` element. The interface also includes a placeholder message while the file loads.

Feb 23, 2022
Loading thumbnail…

Smile Along..

A smiling face rendered as an SVG graphic uses D3's `arc` helper from the `d3-shape` package to draw the mouth as a curved path. The face consists of a yellow circle with black stroke, two eyes, red blush circles, and the arc-based mouth, all positioned with fixed offsets. React manages the component structure, while D3 v6 supplies the geometry for the mouth. The static visualization demonstrates how D3 geometric primitives can be embedded within a React-rendered SVG scene.

Feb 16, 2022