sandeep-gollamudi

@sandeep-gollamudi·14 public vizzes

ICE-8 Social Network graph

A force-directed network graph shows character relationships from the television show Brooklyn Nine-Nine. Nine nodes represent characters, and eight weighted links show connections between them. The visualization uses the D3 v4 library, though it also loads the older d3.v2 library. The code uses the d3.layout.force API to compute a physics-based layout with gravity, charge, and distance parameters. The SVG rendering displays orange circles for nodes and blue lines for links, with stroke-width proportional to link weight. Nodes are draggable via the force.drag callback.

Apr 5, 2022

Loading thumbnail…

ICE-8 family tree

The ICE-8 family tree is an animated hierarchical node-link diagram built with D3.js v6, using SVG elements and transitions. It displays a mock royal family lineage where nodes are colored by generation level, ranging from red for the root to lightblue, lightgreen, and white for subsequent depths. The layout is computed using `d3.stratify()` and `d3.tree()`, with links drawn as animated paths that grow from parent to child positions. Node labels appear directly inside each circle, and the visualization uses custom styling with blue strokes and a light yellow background.

Apr 5, 2022

Loading thumbnail…

ICE-8 country map

This map of the United States displays state boundaries using a custom geoAlbersUsaTerritories projection from the geo-albers-usa-territories library. React renders SVG paths generated by d3.geoPath, with land filled in light yellow and state interiors stroked in blue. The visualization loads geographic data from the us-atlas TopoJSON dataset, using topojson.feature() and topojson.mesh() to extract land masses and internal borders. A graticule layer, defined by d3.geoGraticule, appears in yellow, though it is not explicitly rendered in the current marks.

Apr 5, 2022

Loading thumbnail…

ICE-8 world map

This example displays a world map using an Equal Earth projection, rendered as an SVG with D3 v5 and TopoJSON. It loads geographic data from the World Atlas TopoJSON file and draws each country as a separate path with a light green fill and subtle blue stroke. The code uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `topojson.feature` to convert TopoJSON to GeoJSON. A distinct green sphere outlines the globe's boundaries.

Apr 5, 2022

Loading thumbnail…

Most visited countries

This visualization presents a pie chart of the most visited countries, using a legend to display each country's name alongside its tourist count in millions. The chart is rendered as SVG using D3 v5, with the `d3.pie` layout and `d3.arc` segments forming the chart, while a categorical color scale from `d3.scaleOrdinal` assigns distinct colors. Data is loaded from a CSV hosted on GitHub via a gist URL, and tourist figures are formatted with the `d3.format` function.

Mar 29, 2022

Loading thumbnail…

reusable iris scatter plot

This reusable scatter plot animates through different pairings of the four Iris dataset measurements, cycling every two seconds to reveal patterns across species. Each flower is colored by species (setosa, versicolor, virginica) and rendered as a circle. The visualization uses D3.js version 6.7.0, employing `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function with fluid SVG transitions. Data loads via D3’s `csv` from a GitHub Gist, with the animation driven by `setInterval` to update the x-axis mapping.

Mar 29, 2022

Loading thumbnail…

Area chart for ICE-7

This area chart displays Netflix paid memberships in millions over time, sourced from a CSV file and rendered as an SVG. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with a basis curve. The chart features a bold black line, a skyblue filled region beneath it, orange background, and labeled axes with a rotated y-axis title.

Mar 28, 2022

Loading thumbnail…

Line chart for ICE-7

A line chart displays Netflix paid memberships in millions over time, with year on the x-axis and membership count on the y-axis. The chart uses d3.csv to load external data, d3.scaleTime and d3.scaleLinear for scaling, and d3.line to generate the SVG path. Axes are drawn with d3.axisBottom and d3.axisLeft, styled with tick marks and labels. The visualization renders as an SVG element with a blue stroked line on a light blue background, using d3.v5.

Mar 28, 2022

Loading thumbnail…

Pie chart

This pie chart visualizes the top 10 countries by tourist visits, with each slice labeled with its value in thousands. The chart renders as an SVG using D3 v5, employing `d3.pie` to compute arc angles and `d3.arc` to generate the path segments. Slice colors come from a `scaleOrdinal` mapping, and a legend lists each country with its corresponding color and value. Data is fetched as CSV from a GitHub gist, with tourist counts formatted using `d3.format` for concise display.

Mar 27, 2022

Loading thumbnail…

ICE 6, task 2 - Scatter Plot Using Iris dataset

This scatter plot displays the relationship between petal length and sepal length for 150 iris flowers, using the classic Iris dataset loaded from a GitHub gist as CSV. Each flower is represented as a circle positioned by d3.scaleLinear scales mapping the data attributes to SVG coordinates. The visualization builds axes using d3.axisLeft and d3.axisBottom, with labels added as SVG text elements. The code applies D3 v6’s csv parsing with a custom row conversion function, dynamically sizes the SVG to the window, and styles tick labels via CSS.

Mar 8, 2022

Loading thumbnail…

ICE - 6 Task 1

This interactive bar chart visualizes the top ten clubs in the Champions League by their points. The horizontal bars are rendered as SVG rectangles using React, with their lengths proportional to each club's score. The visualization uses a D3 linear scale for the x-axis and a band scale for the categorical y-axis, from data loaded via `d3.csv` from a GitHub Gist. Grid lines and tick labels are generated from the scales, and the chart is titled "Top ten Clubs in champions league".

Mar 8, 2022

Loading thumbnail…

ICE-5

This example displays a summary of a dataset about UEFA Champions League club rankings, fetched as a CSV from a GitHub gist. It shows the file size in kilobytes, the number of rows, and the number of columns. The page uses D3 v5’s `d3.csv` to load the data and `d3.csvFormat` to measure its size, then writes the results into a `<pre>` element. Styled with CSS and HTML, it also includes a static yellow SVG circle and a red heading, demonstrating a basic React-free data visualization setup.

Feb 26, 2022

Loading thumbnail…

ICE - 5

This example demonstrates loading and parsing CSV data from a GitHub gist using D3’s `d3.csvParse` within a minimal HTML page styled with CSS. The page fetches a remote CSV file containing Champions League club rankings via the Fetch API, then logs the approximate file size in kilobytes, the number of parsed rows, and the column count to the browser console. The interface displays a large title heading and a static message, while the core interaction is purely diagnostic, showing how raw text data is transformed into a structured table using D3’s parsing utilities without any visual chart.

Feb 22, 2022

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a stylized, emoji-like face using React and D3’s `arc` generator. It shows a blue circle with a black stroke as the head, two offset circles as eyes, and a curved mouth path created from an arc with specified inner and outer radii and angles. The SVG is centered via a group translation, and the computed dimensions and offsets are defined as constants. The code imports React and `d3` from CDNs, uses React’s `ReactDOM.render` to mount the component, and relies on JSX curly braces for inline JavaScript expressions.

Feb 19, 2022