varshitreddy02@gmail.com

@Varshithreddy06·10 public vizzes

q2-2

An interactive network diagram displays flight routes among eight U.S. cities, with nodes colored by geographic region (East Coast, West Coast, South). The visualization uses D3 v7's `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables user repositioning of cities. Links represent connections between city pairs, and a legend explains the regional color encoding.

Apr 13, 2026

Loading thumbnail…

Q2

This example displays a hierarchical tree of food categories, from the root "Food" down to specific items like "Almonds" and "Broccoli." It uses D3 v7's `d3.stratify` and `d3.tree` layouts to compute node positions, with horizontal curved links drawn via `d3.linkHorizontal`. Nodes are rendered as SVG circles colored by depth, with labels positioned to the right for leaves and left for internal nodes. A legend at the top-left explains the color mapping for each hierarchy layer.

Apr 12, 2026

Loading thumbnail…

ASSIGNMENT-8

This choropleth map displays violent crime rates per 100,000 people across US states using 2019 FBI data. Each state is colored on a yellow-to-red scale based on its rate, with darker shades representing higher crime levels. The visualization uses d3.geoAlbersUsa for the projection and d3.geoPath to render state boundaries from TopoJSON data. Interactive tooltips appear on hover, showing the state name and crime rate, while a gradient legend displays the color scale.

Apr 12, 2026

Loading thumbnail…

ICE7-area chart

This area chart visualizes the rising popularity of Python from 2015 to 2024, with percentages increasing from 12.5% to 28.11%. The visualization, built with React and D3 v7, combines a semi-transparent blue area with a 3-pixel stroke line, circular data points, and value labels. It uses D3's `scaleLinear`, `area`, `line`, `axisLeft`, and `axisBottom` functions to render the SVG chart, drawing from a CSV dataset where each year is mapped to its corresponding popularity percentage.

Mar 29, 2026

Loading thumbnail…

ice7-linechart

This line chart displays the rising popularity of Python from 2015 to 2024, using annual percentage values from a local CSV file. The chart renders as an SVG via React and D3, with data points marked by circles and labeled with their exact percentages, connected by a blue line. The implementation leverages a custom reusable chart factory, D3’s scaleLinear, axisLeft, axisBottom, and line generators, with axes and labels clearly annotated.

Mar 29, 2026

Loading thumbnail…

ICE7

This interactive pie chart visualizes the distribution of the top 10 programming languages of 2024, with each slice’s size proportional to its usage percentage and a legend on the right listing each language with its exact value. Built as a reusable chart function using the `d3.pie` layout and `d3.arc` generators, it assigns categorical colors via `d3.scaleOrdinal` and `d3.schemeTableau10`. The React application loads the CSV dataset and renders the SVG to fill the browser window, labeling slices with values above 3%.

Mar 29, 2026

Loading thumbnail…

ice_7

This example presents a top-10 programming languages chart as an interactive scatter plot, showing the 2024 market share percentages from `data.csv`. Each language is a black circle positioned on an x/y grid; clicking a circle turns it white with a black outline. The visualization uses React with D3 v7, employing `renderCircles` with `scaleLinear` for axes and click handlers for selection. An SVG pie chart with a legend is also available via `pieChart`, using `pie` and `arc` with `scaleOrdinal` and `schemeTableau10` for coloring.

Mar 29, 2026

Loading thumbnail…

ICE7

A scatter plot of 40 cars from a small CSV dataset maps horsepower on the x-axis against miles per gallon on the y-axis. Each circle is colored by cylinder count (4, 6, or 8) using a Tableau10 ordinal scale, with a legend in the top-right corner. The visualization uses D3 v6's `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll().join()` pattern within a reusable chart module. Axis labels identify both variables, and the title font is set via the Share Tech Google Font.

Mar 27, 2026

Loading thumbnail…

module 6 assignment

This D3.js visualization presents three charts from the retail_superstore_clean.csv dataset. The first is a bar chart showing total sales aggregated by category using `d3.rollup` and `d3.sum`, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The second is a scatter plot mapping discount against profit for the first 100 rows, using `d3.scaleLinear` for both axes. The third is a multi-series line chart displaying data from the first 200 rows. All charts render as SVGs within a single HTML page.

Mar 11, 2026

Loading thumbnail…

ICE_5

This example presents a bar chart of National Park visitor numbers for 2023, sourced from a remote CSV file. The visualization summarizes the data file’s size, row count, and column count in a text box, then sorts parks by visitor totals for the chart. Using D3 v7, it fetches the data, parses it with `d3.csvParse`, scales axes with `scaleBand` and `scaleLinear`, and renders the bars and axes as SVG elements.

Feb 26, 2026