Sravani93-creater

@Sravani93-creater·5 public vizzes

ICE on Network Graph

This example visualizes an ICE (Immigration and Customs Enforcement) network using a force-directed graph, with nodes representing entities and links showing connections between them. The graph uses a pink node design with blue labels, rendered in SVG within a React framework. It employs d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while data is loaded from a GitHub gist containing UNT network JSON. The visualization updates node and link positions on each simulation tick, creating an interactive network layout.

Mar 29, 2023

Loading thumbnail…

ICE for Animal Species

This example visualizes a hierarchical tree of animal species, branching from a top-level root into vertebrates and invertebrates, then further into specific groups like birds, fishes, mammals, and insects. It uses D3.js version 3.5 with the `d3.layout.tree` API to compute node positions and `d3.svg.diagonal` to draw curved links between parent and child nodes. Node shapes are rendered as SVG symbols via `d3.svg.symbol`, with red diamonds for values greater than or equal to nine and red circles otherwise, while link colors reflect each target’s level property. The chart is built in React and rendered as inline SVG on an HTML page.

Mar 29, 2023

Loading thumbnail…

ICE ON CREATING A WORLD MAP

This visualization displays a world map with countries rendered as individual SVG paths, using a blue sphere backdrop and white country shapes with green strokes. Countries highlight in yellow on hover. The map is built with React and D3 v5, using `d3.geoEquirectangular` for projection, `d3.geoPath` for path generation, and TopoJSON’s `feature` method to convert world-atlas data (countries-110m.json) into GeoJSON. The SVG is populated dynamically via `selectAll` and `enter` data joins.

Mar 29, 2023

Loading thumbnail…

CHINA MAP

This example displays a map of China, highlighting its administrative regions in green with yellow borders. Users can pan and zoom the map using mouse interactions, which are enabled through D3's `zoom` behavior. The visualization is rendered as SVG, with geographic paths generated using `d3.geoPath` and a `geoEquirectangular` projection. It loads TopoJSON data from a GitHub gist and uses `topojson.feature` to extract the regions, while D3's `scaleOrdinal` assigns colors from the `schemeCategory10` palette.

Mar 29, 2023

Loading thumbnail…

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

Mar 28, 2023