madanvemulapally

@madanvemulapally·9 public vizzes

ICE 8 - Social Network

A force-directed social network visualization shows seven people as labeled nodes connected by weighted links. The network is centered on Isabella, with a dense cluster of connections to the other six individuals, while additional edges form a secondary link between Ana and Derek. The SVG rendering uses `d3.layout.force` with gravity, charge, and distance parameters to position the nodes, and the links have stroke widths proportional to their weight values. Node and link styles are defined via CSS, and the JSON data file provides the names, group assignments, and edge relationships.

Mar 30, 2023

Loading thumbnail…

ICE 8

This interactive visualization presents a classification tree of animals, grouping species into herbivores, omnivores, and carnivores with further subcategories. Built with D3.js version 3.5.17, the tree layout uses SVG rendering with animated transitions. Nodes are represented by teal circles with bold labels, connected by blue curved links. Clicking any node toggles its children, collapsing or expanding branches with smooth 750-millisecond transitions. The data structure is hardcoded in JavaScript, and the tree positions child nodes at fixed 180-pixel depth intervals.

Mar 30, 2023

Loading thumbnail…

ICE-8 SOCIAL NETWORK CHART

This example shows a hierarchical social network chart based on family tree data, with nodes and links rendered in SVG. The visualization uses d3.stratify() and d3.tree() to compute node positions from parent-child relationships, then draws animated paths between connected nodes. Each node appears as a light green circle with a dark green border, labeled with a child name, while the blue background contrasts the lime-colored connecting lines. The animation uses D3 transitions to grow the circles and draw the links over time.

Mar 29, 2023

Loading thumbnail…

Madan's ICE-8

This example displays a world map using an equirectangular projection, with countries rendered as yellow-filled SVG paths with black borders. Hovering over any country turns it white. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method, then projects it with `d3.geoPath` and `geoEquirectangular`. The visualization is built with D3 v5 and rendered as SVG elements within a fixed-width page.

Mar 29, 2023

Loading thumbnail…

Madan's ICE-8 Country Map

This interactive map displays the 50 U.S. states as red land areas with black borders, using a geographic projection. The visualization relies on `d3.geoPath` with the `geoAlbersUsaTerritories` projection to render the map from TopoJSON data loaded via `d3.json` and the `topojson` library’s `feature` and `mesh` functions. React manages the component state and SVG rendering, while CSS hover styling changes state colors from red to blue. The map refreshes its data asynchronously, initially showing a loading message before presenting the full geographic layout.

Mar 29, 2023

Loading thumbnail…

ICE-7 AREA CHART

This area chart displays youth population trends over time, using a smooth curved line and a filled yellow area beneath it. The visualization is built with D3 v5, utilizing `scaleTime` and `scaleLinear` for axes, `area` and `line` generators with `curveBasis` for smoothing, and `axisLeft` and `axisBottom` for labeled ticks. Data is loaded from a CSV file containing yearly population figures.

Mar 13, 2023

Loading thumbnail…

ICE-7 LINE CHART

A line chart displays the average rent for one-bedroom, one-bathroom (1b1b) housing from 2008 to 2020, with time on the x-axis and cost on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data to SVG coordinates, d3.axisBottom and d3.axisLeft for the labeled axes, and d3.line to generate the path. The dataset is loaded via d3.csv from a GitHub gist, and the chart is rendered on an SVG canvas with styled tick marks, axis labels, and a title.

Mar 13, 2023

Loading thumbnail…

ICE - 7 PIE CHART

A pie chart displays employee salaries by profession, using colored slices segmented from a CSV dataset of annual incomes. The chart renders with D3.js v5, using `d3.pie` to compute angles and `d3.arc` to generate SVG paths. A legend pairs each profession name with its corresponding annual income, formatted in thousands with `d3.format`. The visualization also uses `d3.scaleOrdinal` to assign colors from a fixed palette, and the salary data is loaded asynchronously via `d3.csv`.

Mar 13, 2023

Loading thumbnail…

ICE-7 Reusable scatter plot

This example demonstrates a reusable scatter plot created with D3.js, visualizing the classic Iris dataset. It maps petal width and sepal length on the x- and y-axes, and uses different SVG symbols to represent the three iris species. The chart cycle through multiple data attributes every 15 seconds, updating the x-axis scale and re-rendering the marks. The implementation follows Mike Bostock’s reusable chart pattern, using accessor functions and D3’s `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` APIs.

Mar 13, 2023