Skip to main content
Log in
R

reddyakshitha

@reddyakshitha·12 public vizzes

Loading thumbnail…

Network Tree

A network tree visualizes a small directed graph of six named nodes and six weighted links. D3’s force layout positions the nodes, with link thickness proportional to the weight value from the JSON data. The SVG rendering uses `d3.layout.force` for simulation and `force.drag` for interactivity, drawing nodes as pink circles with labels and black connecting lines based on the loaded `data.json`.

Apr 4, 2022
Loading thumbnail…

Family Tree

This family tree visualization displays a hierarchy of family members as circles connected by lines, with each person’s name placed inside its corresponding node. The layout, generated from a dataset of parent–child pairs, uses D3.js v6 with the `stratify()` method to build the hierarchy and the `tree()` layout algorithm to position nodes. The SVG renderer draws each circle with a fill color from the data (defaulting to yellow) and connects parent and child nodes with straight-line paths. Text labels are added to each circle using D3’s selection and `.text()` method, with a bold 20px font size.

Apr 4, 2022
Loading thumbnail…

Country Map

This example displays a black silhouette of India on a blank SVG canvas, derived from world map data. It uses D3 v5 methods `d3.json`, `d3.geoPath`, and `d3.geoNaturalEarth1` to load and project the geographic coordinates. The code fetches the world-atlas TopoJSON file, converts it to GeoJSON with `topojson.feature`, filters for the country named "India," and renders the resulting path. The projection is translated and scaled to focus on the country’s extent.

Apr 4, 2022
Loading thumbnail…

World Map

This world map visualization renders country boundaries as green SVG paths on a blue background using the Natural Earth projection. The code fetches TopoJSON data from the world-atlas package and converts it to GeoJSON using `feature` from TopoJSON, then applies `geoNaturalEarth1` and `geoPath` from D3 v5 to generate the geographic shapes. The static map displays all countries without interactive features, relying on D3’s JSON loading and SVG selection methods to append each country path.

Apr 4, 2022
Loading thumbnail…

Area Chart Crypto Users

This area chart visualizes the growth of cryptocurrency users in India over time. The x-axis represents years, while the y-axis shows user counts, with a pink filled area created using D3’s `area()` generator and `curveBasis` smoothing. The code loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and scales axes using `scaleTime` and `scaleLinear`. SVG rendering includes styled axis ticks, labels, and a title via D3 v5.

Mar 28, 2022
Loading thumbnail…

Line Chart Crypto Users

This line chart displays the growth of cryptocurrency users in India over time, using years on the x-axis and user counts on the y-axis. The visualization is rendered as an SVG using D3 v5, with data loaded from a CSV file hosted on GitHub Gist. The code employs D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions to construct the chart, including a custom-styled line path with a pink stroke and labeled axes. The rendering approach uses standard D3 data-binding and SVG path generation.

Mar 28, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This dynamic scatter plot animates through the Iris dataset, cycling four flower measurements along the x-axis while displaying petal width on the y-axis. Using a reusable D3 module pattern, the visualization updates every second via `setInterval`, with `scaleLinear` and `extent` computing axes, `scaleOrdinal` assigning species colors, and SVG circles redrawn through join operations. Data loads from a GitHub Gist, with axes rendered via `axisLeft` and `axisBottom`. A custom legend indicates species through colored rectangles.

Mar 28, 2022
Loading thumbnail…

Pie Chart for Nukes dataset

A pie chart displays the number of nuclear warheads per country, with each slice colored distinctly and a legend listing country names alongside their values. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths, while data is loaded from a CSV gist via `d3.csv`. Slices are rendered without gaps, and the chart is centered within an SVG of 960 by 500 pixels, with legend text styled via CSS.

Mar 28, 2022
Loading thumbnail…

Iris Scatter

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis, with all points rendered as uniform blue circles. The code uses D3 v6’s `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to construct the coordinate system and axes. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and the SVG output is created by appending a single `<svg>` element and iterating over parsed rows to draw the marks.

Mar 7, 2022
Loading thumbnail…

Marks and channels

This chart displays the number of nuclear weapons for various countries using horizontal bars. The visualization employs a bar chart with axes and scales, colored in a single red tone. Built with React and D3 version 5, the code uses `d3.csv` to load data from a remote URL, `d3.scaleBand` and `d3.scaleLinear` for scales, and renders the output as SVG. The chart’s axis labels and tick marks are generated from the scales, while the bar lengths encode the numeric values from the dataset.

Mar 7, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v5. The page displays the size of the dataset in kilobytes, the total number of rows, and the number of columns in separate text blocks. It uses the `d3.csv` method to fetch the data asynchronously, then accesses the parsed array and its `.length` and `.columns` properties to compute the metrics. The `d3.csvFormat` function is used to estimate the file size from the parsed data.

Feb 25, 2022
Loading thumbnail…

D3 face

This example renders a stylized smiley face using D3.js version 5 within a React framework, drawing an SVG scene onto a 960 by 500 canvas. The code constructs a yellow circular head, black rectangular goggles with handles, and circular eyes using SVG shape elements, while employing the `d3.arc` API to generate the mouth path. Through D3 selections and attribute chaining, it positions groups and elements relative to the SVG’s center, demonstrating a static, hand-coded vector illustration.

Feb 20, 2022