Vishnu Sudireddy

@vr-23·29 public vizzes

D3 Data Dashboard

This dashboard visualizes global CO2 emissions across countries, continents, and years, allowing users to compare total emissions or per-capita values via an interactive world map, a pie chart of continental shares, and a bar chart of annual trends for a selected country. Built with D3 v4, it uses `d3.geoMercator` and `d3.geoPath` for map rendering from TopoJSON world atlas data, plus animated SVG transitions for the map, pie arcs, and bars. A year slider and radio buttons drive updates, with tooltips revealing detailed values from the CSV dataset.

Jul 26, 2023

Loading thumbnail…

Religions of Largest 20 Countries

This interactive bar chart visualizes the religious composition of the 20 most populous countries, showing population sizes per religion. Each horizontal bar is segmented by religion and colored using a categorical scale. It uses D3.js (version 3.5.5) with SVG rendering, including axes, a color legend, and a tooltip via d3-tip. Hovering over legend entries highlights the corresponding segments in the foreground layer, while a semi-transparent overlay fades the remaining bars.

Jul 26, 2023

Loading thumbnail…

Bar Chart - Top 10 Highest Populated Countries

This bar chart shows the top 10 most populated countries, ranked by their GDP in USD. The visualization uses d3.csv to load world data from a remote GitHub-hosted CSV file, then sorts the data in descending order and selects the first ten entries. Rectangular bars are rendered in SVG, with d3.scaleBand and d3.scaleLinear mapping countries and GDP values to x and y positions. The code adds rotated x-axis labels for readability and applies d3.axisBottom and d3.axisLeft for the chart's axes.

Jul 26, 2023

Loading thumbnail…

Population Density Bar Chart

This bar chart visualizes population density data for the first five countries in a CSV dataset. The chart uses steel-blue bars that turn orange on hover, with rotated country labels on the x-axis. Built with D3.js v7, the code fetches CSV data from a GitHub repository, parses it with `d3.csvParse`, and renders SVG rectangles scaled by population using `d3.scaleBand` and `d3.scaleLinear`.

Jul 26, 2023

Loading thumbnail…

Japan Country

This example displays a choropleth of Japan, rendered as an SVG path using the d3.geoPath projection. The visualization shows the country’s terrain, dynamically simplified based on a user-adjusted threshold slider, which filters out triangular areas below the set value. Built with d3.v4 and topojson, it loads GeoJSON data from a remote GitHub source and re-renders the map on slider input or window resize, using the d3.geoTransform for custom simplification.

Jul 21, 2023

Loading thumbnail…

Assignemnt 2 Q3 Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass, with points colored by species (Adelie, Gentoo, or Chinstrap). The graphic is rendered as an SVG using D3 v5. The code employs `d3.csv`, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` to parse the data and draw axes. It reads data from a GitHub Gist URL. Each data point is a circle, colored via a custom `marker` function, with additional bill measurements stored as attributes on the circles, though they are not visually encoded.

Jul 21, 2023

Loading thumbnail…

Stacked bar Assignemnt 2

This stacked bar chart compares the number of dishes for ten food types across ten Massachusetts cities, excluding Boston. It uses a vertical layout with horizontal bars, where each city is a row and colored segments represent cuisine counts. The visualization includes an interactive tooltip that displays the specific food type and count on hover. Built with D3 and the `d3-scale-chromatic` library, the chart renders as an SVG and uses `scaleLinear` and `scaleBand` for axes, with `scaleOrdinal` for color mapping.

Jul 21, 2023

Loading thumbnail…

Reusable Scatter plot Assigment 2 Q5

This example presents an interactive scatter plot of the Iris dataset, visualizing relationships between sepal and petal measurements for three flower species. The plot cycles through different variable pairings on the x-axis every few seconds, with points colored by species using a legend. Built with D3 version 6, the visualization uses reusable scales and axes defined in a custom scatterPlot module, employing D3’s scaleLinear, extent, axisLeft, and axisBottom APIs. Data is fetched as CSV from a GitHub gist, and the rendering relies on SVG circles with animation driven by setInterval.

Jul 21, 2023

Loading thumbnail…

Assignment 2 social network graph

This example shows a small social network graph with six named nodes connected by weighted links. The graph is rendered as an SVG using D3.js v4, with the force layout provided by `d3.layout.force`, which handles node positioning and dragging. Node labels appear to the right of each circle, and link thickness reflects each connection’s weight value. The data is loaded from a local `graphFile.json` file, and the network is interactive, allowing users to drag nodes and reposition the layout.

Jul 21, 2023

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3 version 7” in the center of the page using a font size of 13em. The visualization simply renders static text without any interaction or animation, serving as a minimal starter template for D3 projects. The code imports the `select` function from D3 version 7.8.5 (loaded from the unpkg CDN) and calls `select('body').text(...)` to set the content of the HTML body element. The rendering relies on the browser’s default CSS styling, with the body configured for centered alignment.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Q7-1 Tree

This interactive tree visualization displays a hierarchical dataset of devices, branching from "Devices" into Laptops and Mobiles, and further into specific models. The D3.js (v3) layout places nodes as colored rectangles with labels, using smooth animations for expansion and collapse. It renders SVG graphics with custom CSS for node states and tooltips, while the JSON data source drives the structure. The implementation leverages `d3.layout.tree` for positioning and `d3.behavior.zoom` for pan and zoom interactions.

Jul 21, 2023

Loading thumbnail…

World Map

This example renders a natural Earth projection world map as an SVG, showing country boundaries in black with red outlines against a light blue sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and landmasses, with TopoJSON’s `feature` method converting world-atlas data (110m resolution) into GeoJSON. The map is generated asynchronously, fetching the TopoJSON from a CDN and appending each country path to the SVG.

Jul 21, 2023

Loading thumbnail…

Age vs BMI Bubble Chart

This visualization is a multidimensional scatter plot that maps age on the x-axis against BMI on the y-axis for approximately 250 individuals, with each bubble’s size encoding insurance charges and its color indicating gender. The chart uses a D3 v7 selection with data binding to append SVG circles, scaled with `d3.scaleLinear` for axes and `d3.scaleOrdinal` for the male/female color mapping. A legend explains bubble size ranges and gender colors, while axes are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a CSV file using `d3.csv`.

Jul 21, 2023

Loading thumbnail…

Fork of NBA Player Efficiency Scatter Plot with Brush

This scatter plot visualizes NBA player scoring efficiency, where each dot represents a player positioned by minutes played (x-axis) and points scored (y-axis), with darker colors indicating higher efficiency. The visualization uses React with D3 v5 libraries, including `scaleLinear` for axes and `scaleSequential` with `interpolatePuRd` for the efficiency color encoding, rendered as SVG circles. A brushed time series panel at the bottom, implemented with `brushX`, filters the main scatter plot by a time range.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Q7-2 social network graph

This interactive social network graph visualizes connections between ten friends, with nodes representing individuals and directed edges indicating friend relationships. The graph uses D3 v6’s force simulation (d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide) to position nodes, while arrow markers on link lines show relationship direction. Users can drag nodes to rearrange the layout, and hovering highlights the focal node. Data comes from a local graph.json file, rendered as an SVG with circle nodes and text labels.

Jul 21, 2023

Loading thumbnail…

Activity 8 Task 5-1 World Map

This example displays an interactive world map using D3 version 5 and TopoJSON. It shows countries with white fills, red borders, and a sky-blue ocean, with hover states that turn countries maroon. The visualization uses d3.geoEquirectangular for projection and d3.geoPath to render geographic features, while d3.zoom enables panning and zooming. Country boundaries come from the world-atlas dataset (countries-110m.json), processed through the TopoJSON feature method to create GeoJSON objects for SVG path rendering.

Jul 21, 2023

Loading thumbnail…

Bubble chart Assignment 2 Q4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes, with each circle sized by MPG and colored by manufacturer. The visualization uses d3.v7 to load CSV data and render an SVG with axis scales, a tooltip on mouseover, and a legend for both bubble size and color categories. Hovering highlights a bubble via opacity changes and displays the make in a styled tooltip.

Jul 21, 2023

Loading thumbnail…

Stacked Bar Chart Assignemnt 2 Q2

This stacked bar chart shows the distribution of movie ratings across six genres, with each bar segment representing the percentage of movies falling into one of five rating brackets (from "below 5.0" to "above 8.5"). The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.stack()` to compute the stacked segments and `d3.scaleOrdinal()` for color encoding. A custom tooltip, built with HTML div elements, displays the exact percentage for each segment on mouseover, while the y-axis uses `d3.scaleBand()` for categorical genre labels. The data originates from a local CSV file.

Jul 21, 2023

Loading thumbnail…

SDV Assignment 1

This example shows a force-directed network visualization rendered with React and D3. The code uses `d3.forceSimulation` to position nodes and links, with the simulation’s tick events updating SVG elements in the DOM. It displays data from a source labeled “v3” by the author, drawing circular node marks and connecting paths as lines. The visualization also includes styled axes and labels with customizable colors, implemented using standard D3 scales and SVG rendering.

Jul 19, 2023

Loading thumbnail…

Pie Chart Activity 8 Task 2

This pie chart displays the count of students from each major at UNT, with each slice colored and labeled with a value in thousands. The visualization uses D3 v5 to load CSV data, generate the pie layout with `d3.pie()` and `d3.arc()`, and render SVG paths. A legend on the right maps colors to major names, while slice labels use `format('.4~g')` for compact numerical display. The code also applies `scaleOrdinal` for color mapping and custom styling via CSS.

Jul 19, 2023

Loading thumbnail…

Activity 8 Task 5-2 Country

This example displays a map of India rendered as an SVG path, centered within a 960-by-500 viewport. It uses D3 version 5 and TopoJSON to load the world-atlas dataset, extract the country’s geometry by name, and project it with a Mercator projection fitted to the country’s bounds. The `d3.geoPath` generator then draws the boundary, with no additional styling or interactive elements.

Jul 17, 2023

Loading thumbnail…

Area Chart Activity 8 Task 4

This area chart visualizes the cost of sales from 2000 to 2013, using a green filled region beneath a smooth black line to show trends over time. The chart employs D3 v5’s `scaleTime` and `scaleLinear` for axes, with `area()` and `line()` generators using `curveBasis` for smoothing. Axis labels and tick text are styled via CSS, and data is loaded from a CSV hosted on GitHub Gist.

Jul 17, 2023

Loading thumbnail…

Line Chart Activity 8 Task 3

This example displays a line chart of annual sales costs from 2000 to 2013, with a light green stroke on an SVG canvas. The chart uses D3 v7’s `scaleBand` for the year axis and `scaleLinear` for the cost axis, drawing the line with `d3.line()`. Data is loaded from a CSV file via `d3.csv`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`. The visualization includes red axis labels and a centered title, highlighting cost fluctuations over time.

Jul 17, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This example shows an interactive scatter plot of the Iris dataset, displaying sepal length against petal length with species encoded by marker shape. It uses D3 v7’s `scaleLinear` for axes and `scaleOrdinal` with `symbolsFill` to map species to distinct shapes. A custom-shape legend, built with `d3.symbol`, lists each species. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then rendered as SVG paths using `d3.symbol` generators.

Jul 10, 2023

Loading thumbnail…

Vishnu's Assignment Q10

This example displays a large background SVG image loaded from an embedded base64-encoded PNG, with a pattern filling the entire viewBox. The page also demonstrates loading D3.js via UNPKG and importing local ES6 modules, using `select`, `csv`, and `csvFormat` from D3. The main visualization fetches an external CSV from a GitHub gist and renders the first ten rows as JSON inside black preformatted text elements appended to the body.

Jun 30, 2023

Loading thumbnail…

BMI by Age

This visualization displays average body mass index (BMI) across age groups, using orange bars to represent binned age ranges. The chart loads CSV data from a GitHub gist, calculates BMI from height and weight values, and bins the data with `d3.bin`. Scales are created with `scaleLinear`, axes are rendered via `axisBottom` and `axisLeft`, and rectangles are drawn using D3 v7's join pattern. The y-axis shows computed average BMI per bin, with labeled axes and a title, all rendered as SVG.

Jun 14, 2023

Loading thumbnail…

activity 6 2

This example loads the classic Iris flower dataset from a CSV file and displays the average sepal length for each of the three species as a formatted JSON summary. It demonstrates loading data asynchronously via `fetch`, parsing it with `csvParse`, and converting string values to numbers. The code uses `flatRollup` and `sum` from D3 v7 to aggregate the data, then renders the result as plain text in a `<pre>` element.

Jun 14, 2023

Loading thumbnail…

Fork of budha

This example displays a dense, chaotic field of randomly colored, rotated polygons, layered over a large, intricate black-and-white SVG path that resembles a Buddha figure. The work visualizes the output of a nested loop structure, where each map iteration generates a polygon with highly randomized position, fill color, and rotation. Built with React and rendered as SVG, the code uses the `Math.random()` function extensively to drive the visual noise. The prominent path data is drawn directly into the SVG using the `d` attribute, creating a sharp contrast against the vibrant, disordered shapes behind it.

Jun 12, 2023

Loading thumbnail…

MY Tree ICE-8

This interactive family tree visualization shows a multi-generational genealogy chart with expandable and collapsible nodes. Using D3.js version 3.5.17, the tree layout (d3.layout.tree) arranges family members hierarchically, with cyan nodes connected by blue diagonal links. The chart features animated transitions (750ms duration) when clicking nodes to expand or collapse branches, with data embedded directly in the page as a JavaScript array. SVG rendering styles nodes with red strokes and orange background, while text labels display each person's name.

Apr 12, 2023