dandamidhun41613@gmail.com

@MidhunDanda·12 public vizzes

ICE8Net

ICE8Net visualizes family relationships among biblical figures using a force-directed network. Nodes represent people, color-coded by generation, while links depict spouse versus parent connections with distinct stroke colors. The visualization employs D3.js v7’s `d3.forceSimulation()` with link, charge, and centering forces, rendering as SVG with draggable nodes and labels. The data is hardcoded in the script, showing Abraham, Sarah, Hagar, and their descendants across four groups.

Nov 9, 2025

Loading thumbnail…

ICE8Atree

This D3.js visualization presents the family lineage of Abraham, tracing descendants from Abraham himself through Isaac and Jacob down to the Twelve Tribes of Israel. The data is hardcoded as a nested JSON hierarchy, which is processed by `d3.hierarchy` and laid out using the `d3.tree()` algorithm to compute node positions. The SVG rendering uses circles and rectangles for nodes, differentiated by depth with gold, orange, red, and green fills, while connecting links are drawn with `d3.linkVertical()`.

Nov 9, 2025

Loading thumbnail…

ICE8CAmap

This choropleth map displays synthetic crime totals for each Canadian province, colored on a yellow-to-red sequential scale. It relies on the D3.js v7 API, projecting province boundaries with `d3.geoAlbers()` and rendering them as SVG paths through `d3.geoPath()`. The map loads GeoJSON from the `click_that_hood` repository, assigns random values, and includes an interactive legend with a color gradient and axis.

Nov 9, 2025

Loading thumbnail…

ICE8Wmap

This map shows global crime rates by country, using a yellow-to-red color scale to represent the range of synthetic crime rate values. Built with D3.js, it renders a Natural Earth projection using `d3.geoNaturalEarth1()` and draws country boundaries with `d3.geoPath()`. The code generates random crime rates and merges them with TopoJSON country data from the world-atlas package via `topojson.feature()`. It also adds a graticule layer with `d3.geoGraticule()` and an interactive color legend with axis labels.

Nov 9, 2025

Loading thumbnail…

ICE 71 MD

A reusable D3.js scatter plot displays the relationship between study hours and exam scores for roughly one hundred students, revealing a generally positive correlation with some variance. Built with D3 v7, the chart uses a factory function returning a chart that can be applied to different data selections, with `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is loaded via `d3.csv` from a local CSV file, with numeric fields parsed and rendered as semi-transparent steelblue circles in SVG.

Oct 26, 2025

Loading thumbnail…

ICE 72 MD

This D3.js visualization presents a pie chart comparing 2024 total renewable energy generation (solar, wind, and hydro combined) across multiple countries, sorted in descending order. The SVG-based chart uses `d3.pie()` and `d3.arc()` to draw slices, with each country assigned a distinct color from D3’s Tableau and Set3 palettes. The visualization loads data from a local CSV file, and hovering over a slice reveals a tooltip showing the country name and its percentage share of the total.

Oct 26, 2025

Loading thumbnail…

ICE 73 MD

Animated three-line chart showing renewable energy generation trends for the USA from 2010 to 2024, comparing solar, wind, and hydro sources. Built with D3 v7, it renders SVG paths for each energy source with colored lines and data point markers. The visualization uses linear scales for time-series axes, axis generators, and a tooltip for hover interaction. Data comes from country_energy_stats.csv, loaded via d3.csv, with lines drawn using the d3.line path generator.

Oct 26, 2025

Loading thumbnail…

ICE 74 MD

This animated area chart displays renewable energy generation trends for the USA from 2010 to 2024, comparing solar, wind, and hydro sources. The visualization uses D3 v7’s `d3.area()` and `d3.line()` generators with `curveMonotoneX` to render semi-transparent filled regions with stroked boundaries, while `d3.axisBottom` and `d3.axisLeft` provide labeled scales. Hover interactions reveal tooltips on data points, and the chart reads from a CSV file containing annual GWh values for multiple countries, though only USA records are visualized.

Oct 26, 2025

Loading thumbnail…

ICE63MD

This visualization presents two views of renewable energy data spanning 2010–2024. The first chart shows trends for Solar, Wind, and Hydro generation, with lines and points for each energy source. The second chart combines bars showing total generation per year with a line overlay tracking the solar trend specifically. The implementation uses the D3 library, with `d3.select` to build SVG elements, `d3.scaleLinear` and `d3.scaleBand` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` to render axes. Data is loaded from a CSV file using `d3.csv`.

Oct 19, 2025

Loading thumbnail…

ICE62MD

A scatterplot shows the relationship between weekly study hours and exam scores for 100 students, revealing a generally positive correlation. Each orange point represents a student and displays a tooltip with exact hours and score on hover. Built with D3 v7, it uses `d3.csv`, linear scales, SVG circles, `d3.axisBottom` and `d3.axisLeft`, and mouse event handlers for interactive tooltips.

Oct 19, 2025

Loading thumbnail…

ICE61MD

This bar chart displays the population growth percentage of 100 US cities from 2020 to 2024, using a dataset loaded from `city_population_growth.csv`. The visualization, rendered as SVG, sorts cities by growth in descending order and caps extreme values at 200% for clarity. It uses D3.js v7 (`d3.select`, `d3.scaleBand`, `d3.scaleLinear`) with interactive tooltips on hover, showing each city’s name and exact growth percentage. The axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Oct 19, 2025

Loading thumbnail…

ICE5

This example visualizes university computer science programs, plotting CS ranking against tuition costs. Each circle represents a university, colored by state, with hover tooltips revealing details like city, ranking, tuition, and available programs. The page also displays a technical summary of the source CSV file, including its size, row count, and column count. The visualization uses D3.js v7, specifically `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeSet2`, and `d3.axisBottom` and `d3.axisLeft` to render the SVG scatterplot.

Oct 5, 2025