sathwikrajidi

@sathwikrajidi·9 public vizzes

Fork of Social Network Graph ICE-8

This graph visualizes a small social network where nodes represent people and links show friendship relationships. Built with D3.js and React, it uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. The SVG rendering includes cyan circles with green arrow markers on links, and supports drag interactions plus hover highlighting via the `nodeHover` CSS class. Data comes from an external `data.json` file containing node groups and link relationship attributes.

Apr 6, 2022

Loading thumbnail…

Social Network Graph ICE-8

This example visualizes a social network of eight people using a force-directed graph rendered with SVG. The graph shows people as cyan nodes with labels and their friendships as green arrowed lines, with the relationship type and connection strength encoded in the data. The layout is driven by d3.forceSimulation with link, charge, collision, and center forces, and nodes are interactive via d3.drag, highlighting on hover. The code loads node and link data from a JSON file and uses D3 v6 within a React application.

Apr 6, 2022

Loading thumbnail…

Fork of Fork of Family Tree

This interactive family tree visualizes hierarchical relationships using nested nodes and connecting links, with each person represented as a colored rectangle labeled by name and type. The tree expands and collapses on click, and supports pan and zoom via mouse interactions, while tooltips display additional link information. Built with D3.js v3 and React, the SVG-based animation uses the `d3.layout.tree` algorithm to position nodes and `d3.behavior.zoom` for navigation, with data loaded from a JSON file defining the family structure.

Apr 6, 2022

Loading thumbnail…

Fork of Family Tree

This interactive family tree visualization displays hierarchical relationships between named individuals, with color-coded nodes indicating different family types. The tree renders as an SVG using D3 v3's tree layout and includes pan-and-zoom functionality through d3.behavior.zoom. Nodes are clickable and expand or collapse their children with animated transitions. The data comes from a JSON file, and the implementation uses jQuery alongside D3 for DOM manipulation, styling nodes, links, and tooltips with custom CSS classes.

Apr 6, 2022

Loading thumbnail…

Family Tree

This visualization presents a family tree as an animated, zoomable node-link diagram. It reads hierarchical data from a JSON file and renders it as colored, clickable rectangles connected by labeled links, using D3.js v3 and React. The layout, computed via `d3.layout.tree`, supports interactive expansion and collapse of nodes, with tooltips and drag-to-pan functionality. The tree's size adjusts dynamically based on the data, and the code includes custom SVG definitions for arrows and drop shadows.

Apr 6, 2022

Loading thumbnail…

Fork of ICE8 USA Map

This example renders a map of the United States using React and D3’s geoAlbers projection, with SVG paths generated by d3.geoPath. It displays the nation’s landmass in yellow, state boundaries as black lines, and a white sphere background. Geographic data comes from the us-atlas TopoJSON file, processed via topojson.feature and topojson.mesh to extract land and interior borders. The visualization loads asynchronously using d3.json within a React useEffect hook, showing a loading message until the data is ready.

Apr 6, 2022

Loading thumbnail…

ICE8 USA Map

This example presents a choropleth map of the United States using a yellow fill for land areas, black state boundaries, and a white sphere background. Built with React and D3 v5, it uses `d3.geoAlbers` for projection and `d3.geoPath` to render the geometry, with `topojson`’s `feature` and `mesh` functions loading US states and nation data from the `us-atlas` package. The SVG output is styled via CSS classes for land, sphere, and interiors.

Apr 6, 2022

Loading thumbnail…

Fork of World Map ICE 8

This example displays a world map with countries rendered in red on a yellow sphere, using a natural Earth projection. It loads world geography data from a JSON file via `d3.json` and processes the TopoJSON with `feature` from the `topojson` library. The map is drawn as SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization is built with D3 v5 and React, with styling applied through CSS classes for the sphere and country paths.

Apr 6, 2022

Loading thumbnail…

World Map IC8

This visualization displays a world map with countries filled in red and a yellow sphere, using a Natural Earth projection. The map is rendered as SVG paths, with country boundaries drawn using a path generator. The code uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate paths, fetching GeoJSON data from a remote source and converting it with `topojson.feature`.

Apr 6, 2022