ankitgoudpoodhari07@gmail.com

ICE-8 2A Ankit goud Poodhari

This example shows a hierarchical tree of food categories, with a brown elliptical root node for "Food," orange rectangular nodes for categories (Fruits, Vegetables, Grains), and green circular leaves for individual items. The visualization uses d3.hierarchy and d3.tree to compute the layout, with d3.linkHorizontal for the connecting paths. Nodes and labels are rendered via SVG, with positions and shapes determined by each node's depth. The styling uses distinct fill colors and text anchors to differentiate the three levels of the hierarchy.

Nov 3, 2025

ICE-8 1A Ankit goud Poodhari

This D3.js visualization presents two interactive choropleth maps. The global map displays internet usage as a percentage of the population across countries, using the `d3.geoMercator()` projection and a blue sequential color scale. The United States map depicts renewable energy share per state, employing the `d3.geoAlbersUsa()` projection with `d3.geoPath()` for rendering. Both maps load TopoJSON data from external sources using `d3.json()`, processing it with the `topojson-client` library to generate SVG paths with tooltips.

Nov 3, 2025

ICE 7

A monthly area chart displays website visit counts from a CSV file across the year 2024. The visualization uses D3 v7's `d3.area`, `d3.scaleTime`, and `d3.scaleLinear` to render a smooth blue-filled region with data points and value labels. The SVG rendering includes axes with month and visit labels, leveraging `d3.axisBottom` and `d3.axisLeft` with custom time formatting.

ICE 7

This line chart shows monthly website visits across 2024, peaking in December at 3,200 visits. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.csv` to load the `visits.csv` dataset, `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and `d3.line` with a monotone curve to draw the path. Individual data points are marked with `circle` elements, and each value is labeled directly above its point. The code applies `d3.axisBottom` and `d3.axisLeft` with custom formatting for the month labels.

ICE 7

This pie chart visualizes sales by category, displaying five segments for electronics, furniture, clothing, and toys. The chart uses D3.js v7 to load the sales.csv dataset, then applies `d3.pie()` and `d3.arc()` to compute slice geometries, with `d3.scaleOrdinal` and `d3.schemeTableau10` assigning colors. It renders as SVG with category labels positioned via `labelArc.centroid()` and includes a legend showing each category and its value. Hovering over a slice reveals a tooltip with the category name and numeric value.

ICE-7

A pie chart visualizes sales by category from a CSV dataset, using d3.csv to load values. The SVG graphic displays category labels on each slice via d3.arc and a legend on the right. D3 v7’s pie generator computes the arc angles, while d3.scaleOrdinal with schemeTableau10 assigns colors. The code uses `d3.pie()` and `d3.arc()` to generate paths, with tooltips added as titles, and a legend built from rectangles and text elements.

ICE - 7

This example displays the text “Hello D3” centered on the page at a very large font size. The code uses the `select` function from the d3 library to target the `body` element and sets its text content. The HTML structure styles the body with a 14em font size and a top margin of 130 pixels. The page is rendered with a simple module script that imports d3 from a CDN via an import map.

Oct 26, 2025

Fork of HTML Starter

This bar chart displays the average runs scored by cricket players, grouped by their country of origin. Built with D3 v7, the visualization aggregates data from a CSV file using `d3.rollups` and `d3.mean` to compute country-level averages. The SVG rendering uses `d3.scaleBand` for the categorical x-axis and a sequential color scale to encode the average runs value, with interactive tooltips appearing on mouseover.

Fork of React & D3 Vibecoding Starter

This is an interactive bar chart that visualizes the frequency of letters in a dataset loaded from a local CSV file. The chart uses SVG bars with rounded corners and a color gradient, where clicking a bar toggles a selected state that highlights the bar and dims others. Built with React and D3 v7, it uses `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to create the scales and axes, with a `ResizeObserver` in a custom `useDimensions` hook to make the visualization responsive.

Fork of Simple Bar Chart

This polished bar chart displays categorical data from a CSV of Indian players, encoding values through bar height and a teal color gradient. Built with D3 v7, it uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for gridlines. Bars render as SVG rectangles with hover effects that trigger a tooltip showing the category and value. The chart includes axis labels and a clean, shadowed design, with data loaded asynchronously via `d3.csv`.

Fork of HTML Starter

This visualization shows total runs scored by individual Indian cricket players as a bar chart, with player names on the x-axis and run totals on the y-axis. The code loads data from a CSV file using d3.csv, then encodes the values through bar height and position using d3.scaleBand and d3.scaleLinear. Rectangles are drawn into an SVG container with a blue fill, and axes are rendered with d3.axisBottom and d3.axisLeft, with rotated player labels for readability.

Fork of Hello VizHub

This fork of Hello VizHub demonstrates three linked D3.js visualizations. It shows total sales by brand and region in a bar chart, units sold versus sales in a scatter plot, and profit alongside average price in a multi-series chart with bars and a line. The code uses `d3.csv` to load a remote dataset and `d3.scaleBand`, `d3.scaleLinear`, `d3.rollups`, and `d3.schemeTableau10` to bind data to SVG rects, circles, and a path via `d3.axisBottom` and `d3.axisLeft`. A dual y-axis is implemented for the final chart.

Fork of HTML Starter

This example presents three linked SVG charts built with D3 v7 that visualize an Indian players dataset, loaded from a remote CSV URL. It shows a vertical bar chart of player runs, a scatter plot comparing matches played against runs scored, and a multi-series chart that combines bars for runs with a red line for batting average. The implementation uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `d3.curveMonotoneX`.