aiswaryapalla

@aiswaryapalla·5 public vizzes

ICE8-Social Network Graph Diagram

This example shows a small social network of six people connected by seven directed relationships, rendered as an interactive node-link diagram. The visualization uses D3’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and lines represent people and connections. Users can drag nodes via `d3.drag` to reposition them, and hovering triggers the “nodeHover” CSS class to highlight a node. The code loads its data from a local `data.json` file, applies a single turquoise fill color to all nodes, and displays each person’s name as a text label.

Mar 29, 2023

Loading thumbnail…

ICE8-PLANTS TREES

An interactive tree diagram visualizes the hierarchical relationships of plants, with a root "PLANTS" branching into categories like flowers, cacti, vegetables, and jades. Circular nodes represent each entity, connected by green paths, and clicking a node expands or collapses its children with animated transitions. The visualization uses the D3.js library’s internal layout and diagonal projection APIs to position nodes and draw links, while SVG elements and CSS styling define the visual appearance. The page is built with a minimal HTML structure, with the data embedded directly in JavaScript.

Mar 29, 2023

Loading thumbnail…

ICE8-Creation of Country Map

This example visualizes a choropleth-style map of the USA, displaying state boundaries as orange filled paths with red interior lines against a blue spherical backdrop. It uses the `geoAlbersUsaTerritories()` projection and the `geoPath` API to render the geographic data. The code retrieves US state topology from the `us-atlas` package via `json()` and processes it with the `feature()` and `mesh()` functions from TopoJSON, all within a React component that outputs the map as SVG elements.

Mar 29, 2023

Loading thumbnail…

Fork of MY ICE To Create a Country map

This example displays a choropleth map of the United States, with each state filled in red and state borders highlighted in yellow. It uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features as SVG paths. The data comes from the US Atlas TopoJSON file, processed with the `feature` and `mesh` functions from TopoJSON. React manages the component state and rendering, with the `useData` hook fetching and transforming the map data before passing it to the `Marks` component.

Mar 29, 2023

Loading thumbnail…

ICE8-CREATION OF WORLD MAP

This visualization renders a world map using D3.js and TopoJSON within a React project. It displays countries as orange SVG paths with red strokes on a blue sphere. The code uses `geoEquirectangular` and `geoPath` projections, sourcing geographic data from the world-atlas JSON. Countries highlight blue on hover, and the map is generated using D3's selection and data join methods.

Mar 29, 2023