N

nagasai-gummadi

@nagasai-gummadi·22 public vizzes

Loading thumbnail…

ICE 08 Network Graph 11540905

This example visualizes a social network of eight friends using a force-directed graph rendered as SVG. Nodes represent people, and links show their friendships, with arrow markers indicating relationship direction. The simulation uses `d3.forceSimulation` with link, charge, collision, and center forces to position the nodes. Interactive drag behavior lets users reposition nodes, while hovering highlights connections. The graph is built with D3 v6 in a React framework, loading data from a JSON file and styling nodes with a single steelblue color scale and custom CSS gradients.

Loading thumbnail…

ICE 08 11540905 India Map

This example displays a choropleth map of India with each state filled by a categorical color and labeled with its name. It uses a D3 geoMercator projection with custom translation and scaling to position the map, and d3.geoPath to generate SVG paths from TopoJSON data. State names are placed using pathGenerator.centroid, and hover effects change the fill to wheat. The visualization leverages d3.select, scaleOrdinal with schemeCategory10, and topojson’s feature method, with data loaded from a GitHub gist.

Loading thumbnail…

ICE 08 11540905 Tree

A phylogenetic tree displays the hypothesized evolutionary relationships among major dinosaur clades, from Dinosauria down to subgroups like Stegosauria and Theropoda. Each node is labeled and colored according to its taxonomic level. The visualization uses the D3.js v5 `tree` layout and `hierarchy` to compute node positions, with `linkHorizontal` generating the curved connecting paths. Rendering is done via SVG within a React framework, and the viewport supports pan and zoom through D3's `zoom` behavior. Data is loaded from a local JSON file.

Loading thumbnail…

Fork of ICE - 8: Visualizing Tree

This interactive tree diagram maps the corporate ownership structure of major car companies, displaying a hierarchy that branches from a central "Car Company" node into brands like General Motors, Volkswagen, and BMW Group. The visualization uses D3.js tree layout and SVG diagonal links to draw the organizational chart, with collapsible node circles and labels. The code implements d3.layout.tree, d3.svg.diagonal, and animated transitions over 750 milliseconds to smoothly expand and collapse branches when users click on parent nodes.

Loading thumbnail…

ICE 08 11540905

This example displays a world map with countries filled in green and an ocean-blue background. It uses the `geoEquirectangular` projection from D3 v5, applying `geoPath` to render the geographic shapes, and the `topojson.feature` function to convert data from the world-atlas countries-110m.json TopoJSON file into GeoJSON features. The map is drawn as SVG paths, and countries change to red when hovered.

Loading thumbnail…

Fork of ICE7 reusable scatter plot

This example visualizes the Palmer Penguins dataset with an animated scatter plot that cycles through different x-axis measurements (culmen length, culmen depth, flipper length, and body mass) against body mass on the y-axis. Data points are color-coded by penguin species (Adelie, Chinstrap, and Gentoo) using custom SVG circle elements with varying radii. Built with D3 v6, the visualization uses the reusable scatterPlot module with d3.scaleLinear, d3.axisBottom, and d3.axisLeft, while a setInterval animation updates the x-scale every few seconds.

Loading thumbnail…

ICE7-Pie Chart 11540905

A pie chart displays Covid case totals for nine countries, with each slice labeled by its case count and a color-coded legend listing country names and values. The visualization uses D3 v5 to load CSV data from a GitHub gist, compute pie arc angles with `pie()`, and render SVG `path` and `text` elements via `arc()`. Colors are assigned with `scaleOrdinal()`, while D3’s `format()` handles numeric labels. The chart is centered in an SVG container, with legends positioned to the right.

Loading thumbnail…

Reusable Scatter Plot 11540905

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length with distinct D3 symbols representing different species. The D3 v6 code uses a custom reusable `scatterPlot` module with `scaleLinear` for axes, `scaleOrdinal` for symbol encoding, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded as CSV and parsed into numeric columns. The SVG renders within the full viewport, with marks generated via `d3.symbol` and a fixed symbol size of 100.

Loading thumbnail…

ICE 7 Area Chart

This area chart displays Amazon's annual net income in millions from 1994 to 2021. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map years and income values, while `area()` and `line()` generators with `curveBasis` draw the smoothed trend line and crimson-filled area below it. The SVG output includes custom-styled axes with tick lines and labels, and the data is loaded from a CSV file via `csv()`.

Loading thumbnail…

ICE 7 Line Chart

This chart visualizes Amazon’s annual net income in millions from 1994 to 2021, using a single red line to emphasize growth over time. Rendering to an SVG, it computes a time-scaled x-axis and linear y-axis using `d3.scaleTime` and `d3.scaleLinear`, with gridlines and labeled axes generated via `d3.axisBottom` and `d3.axisLeft`. The line path is drawn with `d3.line`, fed by CSV data parsed with `d3.csv`; dates are formatted using `d3.timeParse` and numeric values are coerced to numbers. The chart’s styling is applied through an external CSS file, while D3 v5 is loaded from a CDN.

Loading thumbnail…

ICE7 Line Chart 11540905

This line chart displays the cumulative COVID-19 case counts across nine countries over time, with the x-axis representing total cases and the y-axis showing countries. The visualization uses D3 v5 with an SVG canvas, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render the axis and path. Data is loaded from a remote CSV file via `csv()`, with values parsed and scaled before being drawn as a single red line path.

Loading thumbnail…

ICE-6_11540905_DV

This visualization displays the top 10 most populous countries as a horizontal bar chart, with each bar representing the number of followers in millions. The chart uses React for component management and D3 v5 for rendering SVG elements, including scales, axes, and gridlines. Data is loaded from a CSV file using `d3.csv` and processed with `useState` and `useEffect` hooks. The visualization employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars colored in the default SVG rect style.

Loading thumbnail…

ICE_06_DV_11540905

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each point colored by species. Built with D3 v5 and React, it renders an SVG graphic with axes labeled and a title. The code uses `d3.csv` to load data, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for scaling and axes, and manually maps species to colors.

Loading thumbnail…

ICE-6_11540905_DV

This example visualizes the top 50 most followed Instagram accounts, displaying a subset of the top 10 as a horizontal bar chart. Each bar shows the account owner’s name on the y-axis and the number of followers in millions on the x-axis. The chart is built using React and D3 v5, with `d3.csv` loading the dataset from a GitHub Gist. D3 scales like `scaleBand` and `scaleLinear` position the bars, while the SVG elements are rendered directly through React, with gridlines and tick labels generated using `xScale.ticks()`.

Loading thumbnail…

ICE_06_Task1

This example demonstrates a minimal "Hello World" message rendered using D3 version 7, displaying the text "Hello D3 version 7" in the center of the page. The code imports the `select` function from the `d3` module and appends the text directly to the document body. The `index.html` file sets up the page with a massive font size and loads D3 from the unpkg CDN, while `bundle.js` executes the JavaScript. The visualization serves as a basic introduction to D3’s selection and text-insertion APIs, with no external data source involved.

Loading thumbnail…

Fork of ICE-6 (penguin dataset)

This example visualizes the Palmer penguin dataset as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis, with circles colored by species (Adelie, Gentoo, and Chinstrap). Each circle’s rx and ry attributes encode bill length and depth, though these do not affect the SVG rendering. The code uses d3.csv for data loading, d3.scaleLinear for scales, d3.extent for domains, and d3.axisLeft and d3.axisBottom for axes. The SVG is rendered full-screen using d3.select and d3.join.

Loading thumbnail…

Fork of ICE-6 (penguin dataset)

This fork of ICE-6 visualizes the penguin dataset as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis, with each circle colored by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5 functions `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, create SVG circles, and render axes. It also encodes bill length and depth as unused attributes, while styling tick text and labels directly in the SVG.

Loading thumbnail…

Fork of Penguins dataset

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by penguin species. The chart also encodes bill length and bill depth as additional attributes. Built with D3 v5, it uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and renders circles via SVG, with axis labels and a title styled in HTML.

Loading thumbnail…

ICE5_11540905

This example displays a dataset summary for customer order information, showing the file size in kilobytes along with the total row and column counts. The visualization uses a custom background image and styled headings to present a linked CSV dataset. It loads data from a remote GitHub-hosted CSV file using the `d3.csv` method, then calculates and renders the metadata into a preformatted text element. The page utilizes D3 v5 within a plain HTML structure, with no additional frameworks beyond the core library.

Loading thumbnail…

Fork of Cat smiley

A playful cat smiley face rendered as SVG, with a magenta circular head, pink and red eyes with black pupils, purple ears, and a black mouth. The face is composed of overlapping geometric shapes, including circles, ellipses, lines, and arcs, with decorative colored whisker-like strokes. Built with React and D3 v7, the visualization uses D3’s `arc()` generator to define the mouth, eyes, and ears, while React manages the SVG elements. Each facial feature is positioned manually via transformed coordinates, creating a whimsical, static illustration.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiley face built with D3.js animates its eyebrows in a looping upward-and-downward motion. The face is composed of SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code uses D3 selections and the `arc` generator from `d3-shape`, along with chained `transition` calls to move the eyebrow group over repeated two-second intervals.

Loading thumbnail…

Forking

A smiling face rendered in SVG continuously raises and lowers its rectangular eyebrows through chained D3 transitions. The example demonstrates fundamental DOM manipulation with D3 v5, using selection methods like `append` and `attr` to build the face from basic shapes—a circle for the head, arcs for the mouth, and rectangles for the brows. The code explicitly uses `d3.arc` and `d3.select` to construct the mouth path and animate the eyebrow group’s `transform` attribute over timed durations.