M

Mahitha-Moparthi

@Mahitha-Moparthi·16 public vizzes

Loading thumbnail…

ICE - 8 Social Network Graph

This example displays a small social network graph showing friendship connections among ten people. The network uses a force-directed layout that positions nodes and links, with each person represented as a labeled circle and relationships as arrowed lines. The graph uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to compute the layout. Nodes are rendered as SVG circles with labels, and the simulation updates positions on each tick. The data comes from a JSON file with predefined nodes and links.

Loading thumbnail…

ICE-8_Family_Tree

This interactive family tree visualizes hierarchical relationships among named individuals using a collapsible, animated node-link diagram. The SVG-based visualization uses D3.js v3 with the `d3.layout.tree` API to compute tree layouts, and includes features like color-coded node types (Type1–Type4), zoom and drag behavior, and tooltip interactions. Data is loaded from a JSON file via `d3.json`, and animations are triggered through `d3.behavior.zoom` and node click handlers. The rendering emphasizes clear parent-child links and supports interactive exploration of the genealogy structure.

Loading thumbnail…

Fork of MY Tree ICE-8

A family tree chart visualizes hierarchical relationships across three generations, with names displayed beside circular nodes connected by blue curved links. Users can collapse and expand branches by clicking nodes, revealing or hiding descendants. The visualization uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs for layout and path generation, and applies CSS styling with cyan nodes, red strokes, and an orange background. SVG rendering is animated with transitions set to 750 milliseconds.

Loading thumbnail…

ICE - 8 : India Map

This visualization displays a choropleth map of India, with each state filled by a distinct color from a categorical scale based on its name. The map renders as an SVG using D3 v5, with geographic paths generated via `d3.geoPath` and a `geoMercator` projection. State boundaries come from a TopoJSON file parsed with `topojson.feature`, and hover interactions change the fill color through CSS.

Loading thumbnail…

World_Map_ICE_8

A world map illustrates country boundaries and graticules, with landmasses in beige and ocean in light blue, using a natural Earth projection. The visualization loads GeoJSON topology from the `world-atlas` package via `d3.json` and processes it with `topojson`’s `feature` and `mesh` functions to extract land outlines and interior borders. Rendering uses `d3.geoNaturalEarth1` projection with `d3.geoPath` to draw the sphere, graticules, and land paths as SVG elements within a React component. The polished style applies custom colors for land, water, and interior boundaries through CSS classes.

Loading thumbnail…

Bonus ICE

This example visualizes genre and YouTube video upload count per month using an interactive 3D bar chart. It displays multi-series data with each genre represented as a group of bars for the months January through May. The visualization is built with React, using d3.v5 for data processing and the d3-x3d library to render the 3D scene. Data is loaded from a CSV file via d3.csv, parsed, then passed to the chart holder through the barChartMultiSeries component. The X3DOM library handles the 3D rendering in the browser.

Loading thumbnail…

Bonus ICE - 2

This example shows two 3D scatter plots of the Palmer Penguins dataset, displaying bill length and bill depth on the x- and y-axes, with flipper length in one plot and body mass in the other. It uses Plotly’s `scatter3d` trace type within a single chart, rendered into a `div` via `Plotly.newPlot`. Data is loaded as CSV with D3.js (`d3.csv`) and mapped through a custom `unpack` function to extract numeric columns for each axis.

Loading thumbnail…

Fork of IMDb Movie ratings example

This stacked bar chart displays the percentage distribution of five IMDb rating categories (below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, above 8.5) across six movie genres, visualizing how genre impacts audience ratings. Using d3.v7 with SVG rendering, the chart employs `d3.stack()` and `d3.scaleOrdinal` to create stacked segments, interactive hover tooltips via `d3.select` reveal exact percentages, and the data is loaded from a CSV file.

Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This interactive scatter plot visualizes penguin measurements from a CSV dataset, allowing users to cycle through different x-axis variables such as body mass, bill depth, flipper length, and bill length via an automated interval. Built with D3 v6, it features species-specific color coding (paleturquoise, cornflowerblue, purple) with a static legend, while the y-axis remains fixed to bill length. The visualization uses SVG circle elements with animated transitions between attribute selections, includes axis labels, and applies the Share Tech font for styling.

Loading thumbnail…

ICE 7 Area Chart

This area chart displays the number of YouTube channels per year, with the x-axis representing years and the y-axis showing channel counts. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` functions to generate a smooth, filled path rendered as SVG. The chart includes labeled axes, a title, and a dark goldenrod fill for the area. Data is loaded from a CSV file hosted on GitHub Gist, parsed with `Date` and numeric conversions, and styled via CSS classes for the path, title, and axis labels.

Loading thumbnail…

ICE 7 Line Chart

This visualization is a line chart that displays the number of YouTube channels per year. The chart uses a brown, smooth line to connect data points, with labeled axes for "Year" and "Channel_Count". The visualization is rendered using D3 v5, specifically using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and `d3.curveBasis` to generate the line. Data is loaded from a remote CSV file hosted on GitHub, and the chart is drawn as an SVG.

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the top 10 YouTube channels by genre, with each slice sized according to channel count. The visualization uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` with `schemeCategory10` for color encoding. Data is loaded from a CSV via `d3.csv` and rendered as SVG paths, with a legend showing each genre and its corresponding channel count. The code sorts the data descending before slicing the top 10 entries.

Loading thumbnail…

ICE - 6 Part - 2

This example displays a scatter plot of penguin measurements, using flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It also encodes bill length and bill depth as the ellipse radii (rx and ry) of each circle, creating an additional visual dimension. The visualization is built with D3 v5, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data and render axes. Data is loaded as CSV via `d3.csv` from a GitHub gist, and the SVG is rendered directly to the page with React-style declarative `join` for circles.

Loading thumbnail…

ICE - 6

This example displays the top 12 YouTube channels ranked by video count as a horizontal bar chart. Using React hooks for state management and data loading, it reads CSV data from a GitHub gist via `d3.csv`. D3’s `scaleBand` and `scaleLinear` map channel names and video counts to SVG rectangles, while custom tick marks and labels draw axes without using `axisLeft` or `axisBottom`. The chart’s height is reduced by an extra 100 pixels, trimming the bottom margin. Data originates from a YouTube dataset, distinct from the UN population source mentioned in the README.

Loading thumbnail…

Assignment ICE-5

This gallery example displays a static image embedded within an SVG element, using a base64-encoded JPEG as the primary visual content. The image is rendered through an SVG pattern defined in the markup, with the pattern referencing the data URI. The page styling, handled by a separate CSS file, centers the content and applies a linen background color. The code loads the D3.js library version 5.11.0 from a CDN, though it does not utilize any D3-specific data visualization methods. The visualization appears to be a simple image display rather than an interactive or data-driven graphic.

Loading thumbnail…

ICE 4 - Buddha

A serene buddha silhouette rendered in brown polygon pattern with scattered translucent circles, overlaid on a warm linen-to-sienna gradient background. The React application uses SVGs to draw the buddha path and 20 randomly positioned circles referencing a polygon pattern, while the background is set via CSS linear-gradient and the body margin is removed for full-screen display.