aravindsg99@gmail.com

@aravindsekar·10 public vizzes

ICE8-Network

A force-directed network visualization maps six named team members into three functional groups—Design, Engineering, and Research—using colored nodes and labeled links to show collaboration patterns. The example uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3.drag enables interactive repositioning. Nodes render as SVG circles with a categorical color scale, and a tick handler updates link coordinates and label positions in real time.

Nov 1, 2025

Loading thumbnail…

ICE 8 - Tree

This example displays an animal classification hierarchy as a tidy tree layout, showing the relationships from “Animals” down to individual species such as Dog, Eagle, and Snake. The visualization uses D3 v7’s `d3.stratify` to convert flat CSV data into a hierarchy, then applies the `d3.tree` layout to position nodes. Links are drawn as horizontal paths using `d3.linkHorizontal`, while nodes are rendered as colored circles scaled by depth, with labels adjacent to each circle.

Oct 31, 2025

Loading thumbnail…

ICE 8

This visualization shows a world map rendered with the Natural Earth projection, displaying country boundaries as blue filled polygons with white strokes overlaid on a graticule grid. The map loads geographic data from the `world-atlas@2/countries-110m.json` TopoJSON file, which is converted to GeoJSON using `topojson.feature`. The code defines a `d3.geoNaturalEarth1` projection, applies it through `d3.geoPath`, and draws both the graticule and country paths as SVG elements. A caption below the map identifies the data source and projection used.

Oct 31, 2025

Loading thumbnail…

Fork of ICE7-Q2b Area

This area chart visualizes the relationship between study hours and student scores, with a smooth monotone curve showing a generally positive trend across eight data points. The visualization uses D3 v7’s `d3.area()` with `d3.curveMonotoneX` to render a red filled region with a darker stroke, while `d3.scaleLinear` maps the x- and y-axes. Gridlines are drawn using `d3.axisBottom` and `d3.axisLeft` with custom tick sizes, and the SVG includes labeled axes and a bold title. Data is loaded from a CSV file via `d3.csv` with `d3.autoType`.

Oct 26, 2025

Loading thumbnail…

ICE7-Q2b Line

A line chart shows the relationship between study hours and student scores, with a smooth curve indicating a positive trend. The visualization uses D3 v7 to load a CSV file, sort the data by hours, and render an SVG with linear scales for both axes. Gridlines and axis labels are generated using `d3.axisBottom` and `d3.axisLeft`, while the line path is drawn with `d3.line` and a monotone X curve to create smooth interpolation. The chart includes a title and axis labels, with data points from the `study_hours.csv` source.

Oct 26, 2025

Loading thumbnail…

ICE7-Q2a Pie

This pie chart visualizes total study hours per group from a small CSV dataset, splitting respondents into Control and Treatment categories. Each slice is labeled with its percentage share, and a legend identifies group colors. The visualization uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.rollup` to aggregate and compute layouts, with `d3.schemeCategory10` for coloring and `d3.format` for percentage labels. SVG rendering places the chart and legend side by side.

Oct 26, 2025

Loading thumbnail…

ICE 7

A reusable D3 scatter plot displays the relationship between study hours and test scores, with points colored by treatment or control group using a categorical color scale. The chart loads CSV data with `d3.csv` and `d3.autoType`, then renders axes, labels, and circles through a factory function that sets width, height, and accessors via chained setters. D3 v7 handles scales (`d3.scaleLinear`, `d3.scaleOrdinal`) and axes (`d3.axisBottom`, `d3.axisLeft`) within a joined SVG structure.

Oct 26, 2025

Loading thumbnail…

ICE 6

A dark-themed dual-axis chart combines monthly visitor counts as cyan bars with conversion rates as a coral line, both plotted across twelve months from a CSV file. React manages state and lifecycle, while D3 v7 scales (`scaleBand`, `scaleLinear`) map the data; a `line` generator with `curveMonotoneX` smooths the conversion trend. The visualization includes value labels, gridlines, and separate left/right axes with formatted tick labels, all rendered as SVG elements.

Oct 19, 2025

Loading thumbnail…

ICE 5 Visualization

This visualization compares sepal length and width across Iris species using a D3.js scatter plot. It maps data from Fisher's Iris dataset, projecting each observation as a point with radius 19 and species-based coloring using a BBC-inspired color theme. Hovering over legend items filters points by species, reducing the opacity of non-matching data. The chart includes axes, labels, and a legend rendered through `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft`. Configurable margins, dimensions, and visual properties are managed via a `config.js` module.

Oct 6, 2025

Loading thumbnail…

ICE5 Visualization

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three species of iris flowers. The visualization uses D3.js v7 with SVG rendering to display data points colored by species, with interactive hover effects on the legend that highlight corresponding points. The chart includes labeled axes, a title, subtitle, and source attribution, with data loaded from a CSV file hosted on GitHub. The implementation uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, and d3.axisBottom and d3.axisLeft for axis generation.

Oct 6, 2025