RevanthReddyG

@RevanthReddyG·4 public vizzes

ICE8_Tree

This interactive visualization displays a hierarchical family tree of academic data, showing the relationships between students, courses, names, and their associated attributes. The tree uses color-coded generation levels to distinguish between different depths, with animated SVG paths drawing connections between nodes, and circles representing each entity. Built with D3.js v6, the code uses `d3.stratify()` to structure the data and `d3.tree()` for layout, with transitions animating both the link paths and node radii over time.

Jul 10, 2022

Loading thumbnail…

Social Network Graph --> ICE-8

A force-directed social network graph displays ten people connected by twelve friendship links. The visualization uses a pink circular node for each person, with their name displayed inside, and red directed lines with arrowheads showing relationships. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter`. Nodes are interactive via `d3.drag`, and hovering changes the stroke color through CSS classes. Data comes from a JSON file containing nodes and links with relationship metadata.

Jul 10, 2022

Loading thumbnail…

Mexico map

This example displays a choropleth map of Mexico’s regions, rendered as SVG paths. Using D3’s `geoMercator` projection and `geoPath`, it draws country boundaries and graticules, with each region filled in red and outlined in yellow. The map is built with React, fetching TopoJSON data from a gist, converted via `topojson.feature`. The visualization omits data for missing regions, which are not plotted.

Jul 10, 2022

Loading thumbnail…

World Map

This example displays a world map rendered as an SVG, with each country filled in green and outlined with blue strokes. It projects the geographic data using the Natural Earth projection via `d3.geoNaturalEarth1` and generates paths with `d3.geoPath`. The code loads country boundaries from a TopoJSON file using `d3.json` and the `topojson.feature` API, then binds the resulting GeoJSON features to SVG path elements. The map is drawn on a static canvas without interactivity.

Jul 10, 2022