Skip to main content
Log in
R

Raja Srinivas Nelluri

@RajaSrinivasN·14 public vizzes

Loading thumbnail…

ICE8 country Map

This example shows an interactive map of the United States, coloring each state green and highlighting it orange on hover. It uses D3 v5's `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from a TopoJSON file loaded via `d3.json` from the us-atlas repository. State names appear as tooltips using SVG `title` elements. The map is styled with CSS for hover effects.

Apr 4, 2022
Loading thumbnail…

Fork of ICE - 8 Family Tree

This example presents a family tree as an animated SVG diagram, using a custom dataset of parent-child relationships. It shows ten named individuals connected through hierarchical links, with pink circular nodes and lime-green animated edges. The visualization is built with D3 v6, using the `d3.stratify()` utility to convert the flat data array into a tree structure and `d3.tree()` to compute node positions. Links are drawn as SVG paths that animate from the parent’s position to the child’s location over 1000 milliseconds, matching the `transition()` API for a dynamic reveal effect.

Apr 4, 2022
Loading thumbnail…

Network Graph

A force-directed network graph displays seven named nodes connected by weighted links, with thicker strokes representing higher link weights. Nodes appear as red circles with blue outlines and black text labels, positioned through a simulated physical layout that responds to drag interactions. The visualization loads node and link data from a JSON file and uses the D3.js v4 library, specifically `d3.layout.force` for the simulation and SVG elements for rendering.

Apr 4, 2022
Loading thumbnail…

D3 World Map.js!

This example renders an interactive world map using D3.js and TopoJSON. It displays all countries as green SVG paths on a blue sphere, with countries highlighted in pink on hover. The map uses the `geoEquirectangular` projection and `geoPath` to draw geographic features from the world-atlas dataset loaded via `json`. The code demonstrates basic D3 data joins with `selectAll`, `data`, and `enter`, and applies styling through CSS classes.

Apr 4, 2022
Loading thumbnail…

Area Chart

This SVG area chart displays the number of users over a series of years. The visualization is built using D3 v6, specifically leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render the filled path. Data is loaded as CSV from a GitHub gist, with years parsed and user counts converted to numbers. The chart includes labeled axes, a title, and a grid created via tick lines.

Mar 28, 2022
Loading thumbnail…

line chart 3

This line chart visualizes GTA V total sales from 2013 to 2021, with a red line plotted against time on the x-axis and sales values on the y-axis. The code uses D3 v5 with scaleTime and scaleLinear to map years and totalsales, while axisBottom and axisLeft generate labeled axes with gridlines. Data is loaded from a CSV via d3.csv, and d3.line generates the path rendered as SVG. Axis labels rotate for the y-axis, and the chart includes a title and styled tick text.

Mar 28, 2022
Loading thumbnail…

ICE-7 Pie Chart

This pie chart compares the film counts of ten actors, with each slice sized proportionally to the actor’s total runs value from a loaded JSON dataset. A legend to the right links each colored slice to the actor’s name and formatted numerical value. The visualization is built with D3 v5, using the `pie` and `arc` generators to construct SVG paths, `scaleOrdinal` with `schemeCategory10` for colors, and `format` to abbreviate large numbers.

Mar 28, 2022
Loading thumbnail…

Fork of D3 Scatter Plot using iris data set

This interactive scatter plot visualizes the Iris dataset, displaying measurements of petal and sepal dimensions for three flower species. Using D3’s `scaleLinear`, `scaleOrdinal`, and `axisLeft`/`axisBottom`, the chart renders SVG symbols that change shape per species while the x-axis automatically cycles through different measurement columns every 15 seconds. The reusable chart component, inspired by "Towards Reusable Charts," relies on D3’s `selectAll` and `join` for incremental updates. Data is loaded asynchronously via `csv` from a remote URL, with all elements and axes redrawn to fit the full window size.

Mar 28, 2022
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length as the primary axes while encoding species by color. The visualization cycles through different column pairings every two seconds using `setInterval`, animating the axes and circle positions. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, alongside SVG circles and custom labels. The chart is rendered on a full-window SVG, with data loaded via `d3.csv` from a remote GitHub gist.

Mar 28, 2022
Loading thumbnail…

D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal width while coloring each point by species (setosa, versicolor, or virginica). The visualization cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis and circle positions accordingly. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles rendered via `selectAll` and `join`. The code also includes manually appended axis labels and a custom color scheme.

Mar 28, 2022
Loading thumbnail…

creating Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length to the x-axis and sepal length to the y-axis as red circles with hover tooltips. Built with React and D3 v5, it uses `scaleLinear` for both axes, `csv` for data loading, and `extent` to set the domains. Axes are rendered as SVG groups with custom tick lines and labels, while the `Marks` component generates each circle and its title element for tooltip display.

Mar 7, 2022
Loading thumbnail…

creating a bar chart using d3.js

This example displays a horizontal bar chart ranking films by their audience scores, using a CSV dataset with movie titles and percentages. The visualization renders as SVG elements, with the y-axis positioning film names and the x-axis scaling scores from zero to the maximum value. Built with D3 v7, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, while `csv()` loads the external data file. Rectangles are appended to a translated group, with bar widths proportional to each score.

Mar 7, 2022
Loading thumbnail…

ICE Assignment 5

This visualization displays summary statistics about a film dataset, reporting the data size in kilobytes, number of rows, and column count in a large text block. The page is built with a React framework and uses D3 v7 to load the CSV data from a GitHub gist and format the message. The SVG elements present decorative shapes, but the core functionality uses `d3.csv` to fetch and parse the data, then updates the HTML content dynamically.

Feb 28, 2022
Loading thumbnail…

Fork of Smiley Face Part

A yellow smiley face is rendered in an SVG, with two black eyes and a downward-curving mouth, representing a half-completed facial expression. The face is drawn using React elements and D3's `arc` generator for the mouth, while the head and eyes are simple SVG circles. The code sets specific dimensions and offsets for the facial features, centering the composition within a 960 by 500 viewport. The example demonstrates combining React's declarative component structure with D3's geometry utilities for SVG shape generation.

Feb 21, 2022