Skip to main content
Log in
T

Tharun Reddy

@tharun112·13 public vizzes

Loading thumbnail…

ICE-8 Social Network Tree

This example visualizes a social network as a force-directed tree, showing ten people connected by "Friend with" relationships from the data.json file. Large light green circular nodes, labeled with names, are positioned through d3.forceSimulation, d3.forceLink, and d3.forceManyBody, with collision detection via d3.forceCollide. Blue lines with arrowheads, defined using SVG markers, indicate the direction of each friendship, and users can drag nodes to rearrange the network. Hovering over a node highlights it with a red stroke, achieved through CSS class toggling.

Apr 13, 2023
Loading thumbnail…

ICE-8 Tress and Network

This example shows an interactive collapsible tree visualization of Valorant game agents, organized hierarchically by role categories like Duelists, Controllers, Initiators, and Sentinels. Built with D3.js v3, the tree layout uses SVG rendering with animated transitions when nodes expand and collapse. The implementation uses d3.layout.tree for positioning, d3.behavior.zoom for pan and zoom controls, and foreignObject elements for wrapped text labels. Node colors are assigned programmatically with purple shading, and tooltips appear on hover to provide additional context.

Apr 11, 2023
Loading thumbnail…

ICE8 World Map

This world map uses a natural Earth projection to display global country boundaries, with the sphere rendered in green and landmasses in a dark tan with subtle black strokes. The visualization is built with D3 version 5 and topojson, using `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map. Country features are loaded from a remote JSON source that contains coordinate data for each nation.

Apr 11, 2023
Loading thumbnail…

ICE8 - USA Map

This map of the United States uses an Albers equal-area projection to show state boundaries and landmasses. The visualization renders a static SVG using D3’s `geoAlbers`, `geoPath`, and `geoGraticule`, with React managing the component lifecycle. It loads topoJSON data from the us-atlas package, using `feature` for the nation outline and `mesh` for interior state borders. The land layer is filled with green, the sphere backdrop is pale blue, and state boundaries appear as black strokes, with styling defined in CSS.

Apr 11, 2023
Loading thumbnail…

Area Chart Of Auto Sales

This area chart shows auto sales from 2005 to 2022, with the year on the x-axis and sales figures on the y-axis. The visualization uses smoothed lines and a green filled area beneath the curve to emphasize the trend over time. Built with D3 v5, the code imports and uses `scaleLinear`, `line`, `area`, `curveBasis`, `axisLeft`, and `axisBottom` to construct the chart. Data is loaded asynchronously from a CSV file hosted on GitHub, and the SVG rendering is configured with margins, axis labels, and tick formatting.

Mar 25, 2023
Loading thumbnail…

line chart of Auto Sales

This line chart illustrates auto sales in the United States from 2005 to 2022, with sales figures plotted on the y-axis against time on the x-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path, with data loaded from a CSV file. The chart includes axis labels and a title, and the line is styled in green with a four-pixel stroke width.

Mar 25, 2023
Loading thumbnail…

pie chart of state gdp

A pie chart displays the top 10 US states by GDP, with each slice sized proportionally to the state’s economic output and colored using a categorical scale. The visualization loads data from a CSV file via `d3.csv` and renders the chart as SVG using `d3.arc` and `d3.pie`. Interactive tooltips appear on hover, showing the state name and GDP value, with slice opacity adjusting to highlight the selected segment. The chart is built in React with D3 v4, using `d3.scaleOrdinal` for colors and mouse event handlers for interactivity.

Mar 25, 2023
Loading thumbnail…

Reusable scatter plot with different symbols

This example shows a reusable scatter plot of dog breed measurements, plotting female minimum height against male maximum height. The chart uses different D3 symbols to represent each breed, drawn as SVG paths via the `d3.symbol` API with a `scaleOrdinal` mapping symbols to data values. It uses `d3.csv` to load the dataset and `d3.scaleLinear` for axes, with `axisLeft` and `axisBottom` for the scales. The plot is built as a custom chart function with configurable accessors for x, y, symbol, and size, demonstrating a modular approach to D3 visualization.

Mar 25, 2023
Loading thumbnail…

ICE-6:Fork of Penguin Data set scatter Plot

This scatter plot displays the relationship between flipper length and body mass for three penguin species, with each point colored by species (Adelie, Chinstrap, and Gentoo). The visualization uses D3 v5's `csv` loader to fetch data from a GitHub gist, then maps it through `scaleLinear` functions for both axes. Circles are rendered via SVG with a fixed radius, and the chart includes axis labels and a title. The code specifically calls `axisLeft` and `axisBottom` for the y and x axes, respectively.

Mar 12, 2023
Loading thumbnail…

Fork of HTML Starter

This example renders a single centered message, “Hello HTML!”, in large text using plain CSS. The page contains an HTML `<div>` element styled with a `font-size` of 13em and `text-align: center`. It demonstrates a minimal setup with inline `<style>` tags and no external libraries, serving as a basic template for embedding JavaScript or React frameworks. The visualization relies solely on HTML and CSS layout, with no data or interactive behavior.

Mar 12, 2023
Loading thumbnail…

ICE-6: rendering Marks and channels with react and D3

This example visualizes the top 100 movies by IMDB rating as a horizontal bar chart, though it currently displays only the first five entries from a CSV dataset. The chart uses React for component state management, with D3 v5 handling scales, axes, and data loading via `d3.csv`. Marks are rendered as SVG `<rect>` elements, with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and the code draws custom tick labels and gridlines. It encodes movie names and ratings through spatial position and bar length.

Mar 12, 2023
Loading thumbnail…

Top100 Movies list

This visualization presents a gallery for the top 100 movies ranked by IMDB rating, offering a direct CSV data link alongside static posters for the top three films. It uses D3.js v7 to fetch and analyze the dataset, displaying the file size, row count, and column count within a message container to summarize the data. The page's layout is styled with custom CSS, including a background image and styled boxes for the movie posters.

Mar 4, 2023
Loading thumbnail…

smile face emoji

A smiley face emoji rendered with SVG elements—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—drawn using D3.js select and append operations on a centered group. The eyebrows animate upward via a two-second `transition` on the group's transform attribute, while the mouth is created using the `d3.arc` function with an inner and outer radius. This example demonstrates fundamental DOM manipulation and basic shape construction with D3 v5.

Feb 25, 2023