Mounika0927

@Mounika0927·9 public vizzes

ICE 8 animals family tree

This interactive family tree visualizes animal classifications and their evolutionary relationships using a hierarchical tree layout. Users expand or collapse branches by clicking on nodes, with smooth 1.1-second transitions animating nodes and links to their updated positions. The code uses d3.layout.tree to position nodes, d3.svg.diagonal for curved connection paths, and d3.json to load the embedded data.json file containing taxonomic groupings. The SVG rendering includes custom node styling defined in CSS, with collapsed nodes distinguished by lightsteelblue fill.

Mar 30, 2023

Loading thumbnail…

ICE8_Network

A circular network layout renders five green person nodes connected by green, arrowed lines, with each node labeled with a name. The visualization uses `d3.forceSimulation` for layout, combining `forceLink` with a distance of 120, `forceManyBody` for repulsion, `forceCollide` to keep nodes separate, and `forceCenter` to center the graph. Data is loaded from `data.json` via `d3.json`. Nodes are draggable, and hovering triggers a `nodeHover` CSS class change.

Mar 30, 2023

Loading thumbnail…

Untitled

This example visualizes the hierarchical structure of world regions and countries using a force-directed radial tree layout. The visualization displays country names as text nodes, grouped by sub-regions and continents, with curved links connecting parent and child nodes. It uses D3.js with `d3.forceSimulation` to position nodes and a custom link generator for the curved paths. Data is loaded from a JSON file containing a nested hierarchy of geographical classifications, and the code applies a radial arrangement to organize the tree structure.

Mar 30, 2023

Loading thumbnail…

country map with Topojson data

A map of India displays district-level administrative boundaries, with each district colored by its state using an ordinal color scale derived from `d3.scaleOrdinal` and `d3.schemeCategory10`. The visualization loads two TopoJSON files—one for state outlines and one for districts—then projects them onto a `d3.geoMercator` projection centered on the country. `d3.geoPath` generates SVG paths for both layers, with hover effects on districts and zooming enabled via `d3.zoom`.

Mar 29, 2023

Loading thumbnail…

ice8

This interactive map displays world countries and a graticule on a rotatable orthographic projection, with a click on the United States switching to a Mercator projection. The visualization uses D3’s `d3.geoPath`, `d3.geoProjection`, and `d3.geoGraticule` to render SVG paths, and supports dragging to rotate the globe. Country boundaries come from the world-atlas TopoJSON dataset, while names map via ISO codes from a TSV file. The animation transitions between projections using D3’s `.transition().duration(750)`.

Mar 29, 2023

Loading thumbnail…

ice8

This interactive world map demonstrates the use of three projections: Mercator, orthographic, and Albers USA, though the default view is orthographic. Users can drag to rotate the Earth and zoom with the mouse wheel. Clicking on countries switches between projections, with the United States triggering a Mercator projection. The code employs `d3.geoPath`, `d3.geoGraticule`, and `topojson.feature` to render country boundaries from the world-atlas dataset, including dynamic updates on projection changes.

Mar 29, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the annual salaries of 20 employees as a horizontal bar chart, with each bar’s length encoding salary magnitude and yellow fill distinguishing marks. Built with React for component state and D3 v5 for scales and data loading, it uses `d3.csv` to fetch a remote dataset, `scaleBand` for y-axis positioning, and `scaleLinear` for x-axis values. Custom SVG rendering draws axis ticks, gridlines, and rectangles, while manual text labels replace D3’s axis generators.

Mar 9, 2023

Loading thumbnail…

ICE6 : Scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with color encoding for species and point size reflecting bill dimensions. Built with React and D3 v5, the visualization uses `d3.csv` to load the Penguin dataset, `scaleLinear` for axis scaling, and SVG `circle` elements for marks. The code maps bill length and depth to the `rx` and `ry` attributes, creating elliptical points that vary per observation. Axis labels and custom fonts are rendered through SVG text elements, with the plot centered on screen.

Mar 8, 2023

Loading thumbnail…

ICE5

A red circle face with black-outlined eyes and a curved mouth is drawn using D3.js v7. The animation moves the rectangular eyebrows up and down via chained `transition` calls, each lasting two seconds. The face is constructed with SVG primitives, including `circle`, `rect`, and `path` elements, positioned relative to the SVG’s center. The page also loads employee data from a CSV file and displays its file size, row count, and column count as text.

Mar 2, 2023