srividya-bachina

@srividya-bachina·6 public vizzes

ICE8_Tree

This interactive tree diagram displays a hierarchical classification of animals, with branching categories for vertebrates and invertebrates. The visualization uses D3.js to render an SVG layout with collapsible nodes, where clicking a node toggles its children in an animated transition. Data is loaded directly from a static JavaScript object, while the tree layout and diagonal link projections come from D3’s layout library. The animation updates node positions smoothly over a set duration, with circles and styled text labels for each species.

Mar 30, 2023

Loading thumbnail…

ICE8_WorldMap

This example displays a world map with countries colored by population estimates, using a green fill that darkens on hover and supports interactive zooming. Built with D3 v5 and the topojson library, it loads geographic data from the world-atlas package and renders paths via `d3.geoPath` with a Mercator projection. The visualization applies a linear color scale based on population values from a TSV data file, and includes zoom functionality through D3’s `d3.zoom` module.

Mar 30, 2023

Loading thumbnail…

ICE8_SocialNetwork

This example visualizes a small social network of five people, showing friendship links between them with directed arrows and labels. The network uses a force-directed layout created with `d3.forceSimulation`, applying `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes. Nodes are rendered as yellow circles with SVG text labels, and links are drawn as blue lines with arrow markers. The data is loaded from a local `data.json` file, and nodes support drag interactions via `d3.drag` to reposition them.

Mar 30, 2023

Loading thumbnail…

ICE8_CountryMap

This example renders a choropleth-style map of the United States using React and SVG. It loads US state topology from a remote TopoJSON file via `d3.json`, then converts it to GeoJSON features and an interior mesh using `topojson.feature` and `topojson.mesh`. The map is drawn with `d3.geoPath` and the custom `geoAlbersUsaTerritories` projection, styling land areas cyan and state boundaries black, with a green hover effect on individual states.

Mar 30, 2023

Loading thumbnail…

ICE-6

A horizontal bar chart displays total COVID-19 deaths for 20 countries, with red bars ranked by country name on the y-axis and a linear death count scale on the x-axis. It loads CSV data via `d3.csv`, parses and filters the dataset, and renders SVG rectangles sized with `scaleBand` and `scaleLinear`. The React component manages state with hooks and uses D3’s axis utilities for gridlines and tick labels.

Mar 9, 2023

Loading thumbnail…

ICE6 : Scatter Plot

This example shows a scatter plot of penguin measurements, mapping flipper length on the x-axis and body mass on the y-axis. Each circle’s fill color encodes the penguin species (Adelie, Gentoo, or Chinstrap), while its horizontal and vertical radii encode bill length and bill depth, respectively. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file via `d3.csv`. Axes are created using `d3.axisLeft` and `d3.axisBottom`, with scales from `d3.scaleLinear` and data extents from `d3.extent`; the code also labels both axes and the plot title.

Mar 8, 2023