Sriram-Voruganti

@Sriram-Voruganti·14 public vizzes

Sriram ICE-8 Social network

A social network graph displays ten people connected by friendship links, with one relationship (Indu–Rahul) emphasized via a thicker line. It uses D3 v6's `d3.forceSimulation` with link distance, many-body charge, collision, and center forces to position nodes. Nodes are yellow circles with black outlines rendered as SVG, and arrows indicate link direction. The graph is interactive: nodes can be dragged, and hovering highlights them with a thicker stroke. Data comes from a local JSON file with node IDs, groups, and link metadata.

Mar 27, 2023

Loading thumbnail…

Sriram ICE-8 Plant Species

This radial tree diagram illustrates a hierarchical classification of small plant species, including grasses, trees, and flowers, with nested examples like Blue Grass and Coconut Tree. The visualization encodes data attributes directly into the visual elements: node radius is mapped from the `value` property, while stroke and fill colors are derived from the `type` and `level` fields. Implemented with D3 v5, the code uses `d3.hierarchy` and `d3.tree` to lay out the structure, renders cubic Bézier links, and applies circle and text nodes to represent the dataset.

Mar 27, 2023

Loading thumbnail…

Sriram ICE 8 Country map

This visualization displays the states of India as a colored SVG map, with each state filled using a categorical color scale and labeled with its name at the geographic centroid. The code leverages D3’s `geoMercator` projection and `geoPath` to generate the map paths from TopoJSON data, while `feature` and `mesh` from topojson extract the state boundaries. State names are positioned using `pathGenerator.centroid`, and the color scheme comes from `scaleOrdinal(schemeCategory10)`.

Mar 27, 2023

Loading thumbnail…

Sriram ICE 8

This visualization displays a world map using an equirectangular projection, with countries rendered as yellow filled paths with black strokes. The map is interactive, as hovering over a country highlights it in red. Built with D3.js v5 and TopoJSON, it uses `d3.geoPath` and `d3.geoEquirectangular` to project geographic data from the world-atlas countries-110m.json file into SVG paths. The background sphere is styled with a blue fill, and the countries are drawn as separate SVG path elements.

Mar 27, 2023

Loading thumbnail…

Sriram ICE 7 Area Chart

This area chart visualizes world population growth over time, using a red filled region with a thick steelblue outline to emphasize the data trend. The visualization loads CSV data from a GitHub gist, parsing years as dates and population values as numbers. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth path, alongside `axisBottom` and `axisLeft` for labeled axes with custom tick formatting.

Mar 12, 2023

Loading thumbnail…

Sriram ice 7 pie chart

This pie chart visualizes monthly expenditures by department, with each slice labeled and colored distinctly. A legend on the right lists each department alongside its formatted dollar amount. The code uses d3.pie and d3.arc to generate the segments, d3.scaleOrdinal for coloring, and d3.csv to load data from a remote GitHub gist. Text labels are positioned using the arc centroid method, while the legend is built with SVG rectangles and text elements.

Mar 11, 2023

Loading thumbnail…

Sriram ICE 7 Line chart

This line chart visualizes Amazon’s annual stock price from a CSV dataset, plotting each year’s price as a single blue polyline against time-scaled X and linear Y axes. The view uses D3 v5 with SVG rendering, leveraging `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and a `d3.line` generator. Data is parsed via `d3.csv` and `d3.timeParse`, with axis labels and grid ticks styled through the included stylesheet.

Mar 10, 2023

Loading thumbnail…

sriram scatter plot ice 7

This D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the y-axis and petal width on the x-axis. Different iris species are encoded using distinct symbols from D3’s `symbols` palette. The visualization uses `scaleLinear` and `scaleOrdinal` for positioning and symbol assignment, with axes generated via `axisLeft` and `axisBottom`. SVG rendering is fully responsive to the browser window, updating dimensions dynamically.

Mar 10, 2023

Loading thumbnail…

Sriram ICE 7

This interactive scatter plot visualizes the Iris dataset, displaying points with adjustable x-axis mappings that cycle through petal width, sepal width, petal length, and sepal length every second while the y-axis remains fixed on sepal length. Built with d3.js, the visualization uses scaleLinear, extent, axisLeft, axisBottom, and a reusable chart function pattern. The SVG animation transitions between different attribute combinations, with points rendered as circles and axes updating dynamically. The dataset is loaded from a GitHub Gist URL using d3.csv, and the plot resizes to fit the full browser window.

Mar 10, 2023

Loading thumbnail…

Sriram Viz for scatter plot

This example visualizes penguin measurements as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis. Each circle is colored by species (Adelie, Gentoo, or other) using a custom marker function, with the title "Scatter Plot" displayed above. Built with D3 v5 and rendered as SVG, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and process data from a GitHub gist, while CSS sets tick font size and removes page margins.

Mar 8, 2023

Loading thumbnail…

sriram viz

A horizontal bar chart displays average car prices for four car makes in the United States, using data loaded from a CSV file hosted on GitHub. The visualization is rendered as an SVG within a React application, utilizing D3 v5 functions for scaling, axes, and shape generation. Specifically, the code employs `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` implicitly through manual tick rendering, while directly invoking `csv`, `max`, and `format` from the D3 library. The chart maps car makes to vertical bands and prices to horizontal bar widths, with axes drawn as SVG elements.

Mar 7, 2023

Loading thumbnail…

Fork of Sriram ICE

This page displays metadata about a student dataset, including its size in kilobytes, row count, and column count, rendered as a large blue text block. It fetches the CSV data from a GitHub gist using `d3.csv` and calculates the file size with `d3.csvFormat`. The visualization also includes a background SVG image and a hyperlink to the raw dataset. The code uses D3 v7 within a minimal HTML and CSS setup.

Mar 1, 2023

Loading thumbnail…

Sriram ICE

This example displays metadata about a student dataset, including file size, row count, and column count, presented as text on a page with a background image. The visualization uses D3 v7 to fetch a CSV file from a GitHub gist via `d3.csv`, then calculates and formats the metadata with `d3.csvFormat` before inserting it into the DOM. The page is styled with CSS, including a background image and blue pre-formatted text for the output. The data source is a linked CSV file, and the result is rendered as a simple text summary.

Mar 1, 2023

Loading thumbnail…

Fork of sriram

This example uses D3 v5 to construct a cartoon smiley face entirely from SVG shapes. The code demonstrates fundamental DOM manipulation by appending circles, lines, and rectangles for the face, eyes, nose, hair, ears, and teeth. It also uses D3’s `arc()` generator to draw the mouth as a path, and applies basic attributes like `fill` and `stroke` to style each element. The scene is static, with no interaction or animation.

Feb 22, 2023