Nagasharan Sai Nandyala

@n297·12 public vizzes

Streaming Data Tree

This example shows a hierarchical tree of streaming services, with Netflix and Hulu branching into genres and specific titles. Each node’s shape and color encode its depth: a green circle for the root, yellow triangles for platforms, red hexagons for genres, and brown diamonds for titles. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders SVG paths with `d3.linkHorizontal` for links and custom-generated SVG shapes for nodes. Labels are positioned dynamically based on whether a node has children.

Apr 9, 2025

Loading thumbnail…

Streaming Data Network Chart

A force-directed network chart visualizes the relationships between streaming services, their genres, and specific titles using colored custom shapes. Nodes and links are repositioned in real-time through the `d3.forceSimulation` physics engine with link, charge, and centering forces, rendered as SVG. The code defines flat node and link data, assigns distinct polygon shapes by group type, and updates positions on each simulation tick via the `simulation.on('tick')` handler.

Apr 9, 2025

Loading thumbnail…

Reusable Scatter Plot for ICE-7

A reusable scatter plot displays three numeric attributes—weight, height, and price—from a CSV dataset, letting users switch axes via dropdown menus. Built with D3 v6, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to render SVG axes, while `d3.selectAll('circle')` binds data points as steelblue circles. The chart updates by removing and reappending axes and circles on dropdown changes.

Apr 1, 2025

Loading thumbnail…

Area Chart for ICE-7

This area chart visualizes the relationship between weight (kg) and price (USD) for items in the ICE-7 dataset, with weight on the x-axis and price on the y-axis. The chart uses a steelblue, semi-transparent filled area to show price variation across the sorted weight range. Built with D3.js v7, it loads CSV data from a GitHub gist, applies linear scales via `d3.scaleLinear`, and draws the area using the `d3.area()` generator along with `d3.axisBottom` and `d3.axisLeft` for axes.

Apr 1, 2025

Loading thumbnail…

Line Chart for ICE-7

This line chart visualizes the relationship between weight (kg) and price (USD) for items in the ICE-7 dataset, sourced from a CSV file. The code uses D3.js v7 to load and parse the data, then sorts it by weight before plotting a continuous line with `d3.line()`. Linear scales `d3.scaleLinear` map weight to the x-axis and price to the y-axis, with axis labels added via SVG text elements. The chart renders as an SVG element with steel blue strokes, displaying how price changes across the sorted weight range.

Apr 1, 2025

Loading thumbnail…

Pie chart of Vegetables based on price US Dollars

This pie chart visualizes the distribution of vegetable prices in US dollars, with each slice representing a vegetable's total price proportion. The SVG chart is generated using D3.js v6, with a legend on the right side and percentage labels displayed on each slice. The code uses `d3.csv()` to load data from a GitHub gist, then `d3.rollups()` to aggregate prices by item name and `d3.pie()` to compute the pie geometry. Colors come from `d3.scaleOrdinal(d3.schemeCategory10)`, and slices are drawn as SVG paths using `d3.arc()` with a custom centroid-based label placement.

Apr 1, 2025

Loading thumbnail…

Scatter Plot for Vegetables Price vs Weight Scatter Plot

A scatter plot displays the relationship between vegetable price in USD and weight in kilograms, with each red dot representing an item from a CSV dataset loaded via `d3.csv`. The visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and an SVG container with circles positioned via `cx` and `cy` attributes. Axis labels clarify the variables, while the chart scales from zero to the maximum observed values.

Mar 25, 2025

Loading thumbnail…

Bar chart of Fresh Vegetables in USA

A horizontal bar chart displays the price per pound of fresh vegetables in USD, using pink bars sorted by vegetable name. The visualization is built with React and D3 v5, leveraging `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `axisLeft`/`axisBottom` for tick marks. Data is loaded asynchronously from a CSV file via `d3.csv` and rendered as an SVG using `React.createElement`. Axis labels and a title provide context without interactive features.

Mar 25, 2025

Loading thumbnail…

Fresh Vegetables Data

This example summarizes a CSV dataset of fresh vegetables in the USA, displaying key metrics such as file size, row and column counts, average price per pound, most common region, and most common season. It loads the data using `d3.csv` from a GitHub gist, then computes aggregations with `d3.nest().key().rollup()` for region and season counts, and calculates the average price by parsing the `Price per Pound (USD)` column. The summary is rendered as formatted HTML inside a styled `div`, with the page styled using inline CSS on a red background.

Mar 19, 2025

Loading thumbnail…

Fork of Airlines

This example demonstrates basic data loading and parsing by displaying a summary of flight information from a small, hardcoded CSV dataset. The visualization shows the file size in kilobytes, the total number of rows, and the column count within a styled HTML container. The code uses D3.js v5, specifically the `d3.csvParse` function to convert the CSV string into a JavaScript array of objects. It then retrieves the dataset's dimensions via `data.length` and `data.columns.length` and injects the result into the page using standard DOM manipulation through `document.getElementById`.

Mar 18, 2025

Loading thumbnail…

Fork of Airlines

This example demonstrates how to load and parse CSV data using D3 v5. It embeds a hardcoded CSV string containing flight information and parses it with `d3.csvParse`. The visualization displays a summary of the dataset, including its approximate size in kilobytes, the number of rows, and the number of columns. The results are rendered into a styled HTML div element using the `innerHTML` property, with basic CSS styling applied to the page.

Mar 18, 2025

Loading thumbnail…

Fork of Donut with nuts and cherries

This canvas visualization renders a chocolate donut with a variety of toppings, including strawberry jam, cinnamon, crushed nuts, shredded coconut, and cherries. The donut is drawn using the Canvas API's `arc` and `ellipse` methods, while a clipping path restricts toppings to the donut's ring shape. Topping placement is randomized, creating a unique configuration each time the page loads.

Feb 23, 2025