A

akshayamsgrad@gmail.com

@akshu101020·17 public vizzes

Loading thumbnail…

ICE-8 1q world map

This choropleth map visualizes global CO₂ emissions by country in million metric tons, using a red sequential color scale where darker shades represent higher emissions. Built with D3.js v7 and TopoJSON, it renders world countries as SVG paths via a Natural Earth projection and `d3.geoPath()`. Hovering over a country triggers a tooltip showing its name and emission value while temporarily highlighting the region. A gradient legend at the bottom uses `d3.scaleSequential` with `d3.interpolateReds` to communicate the mapping from data values to colors.

Loading thumbnail…

ICE-8 2q network

This interactive force-directed network visualizes connections between eight U.S. cities, with nodes colored by group and labeled with city names. The D3.js visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while SVG lines and circles render the routes and cities. Drag behavior via `d3.drag()` allows users to move nodes, updating the simulation in real time. The chart operates on static, hardcoded data representing conceptual city pairs.

Loading thumbnail…

ICE-8 2q network

This example shows a vertical family tree for ICE-8 Section 2A, using a parent-child data array to display three generations of descendants from a single ancestor. The visualization uses d3.stratify to convert the flat data into a hierarchy and d3.tree with vertical links to lay out the nodes. It renders as an SVG with blue circular nodes and concise text labels positioned above each person, with the root individual, John, at the top and all descendants branching downward.

Loading thumbnail…

ICE-8 2q tree

This example shows a hierarchical tree of programming languages organized top-down, with root, category, subcategory, and leaf nodes distinguished by color. The visualization uses D3.js v7’s `d3.hierarchy` and `d3.tree` layouts to compute positions, then renders SVG paths via `d3.linkVertical` and circles with text labels. Node colors vary by depth, and hover interactions thicken circle strokes. The data is hardcoded in JavaScript with categories like Procedural, Object-Oriented, and Functional, each branching into specific languages.

Loading thumbnail…

ICE-8 1q country map

This choropleth map visualizes US state populations using a sequential YlGnBu color scale. State boundaries are rendered as SVG paths via d3.geoPath, populated with data loaded from TopoJSON (us-atlas). A tooltip displays state names and population values on hover. The map uses d3.geoAlbersUsa for projection and d3.scaleSequential for color mapping. A legend with a linear gradient and d3.axisBottom provides a scale for interpreting the population values in millions.

Loading thumbnail…

Project Increment 3

A scatter plot matrix reveals pairwise relationships among six happiness factors and overall life satisfaction for countries in the 2020 World Happiness Report. The visualization uses D3 v7 with an SVG renderer, building a grid of cells where each cross-section plots two variables. Axes are rendered at the edges using `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleLinear` maps data values. Circles colored by `d3.scaleOrdinal` with `schemeTableau10` represent countries, and hovering triggers tooltips showing country names and values. A legend identifies the regional indicator groupings.

Loading thumbnail…

Project Increment 2

This heatmap displays pairwise Pearson correlations among 18 numeric columns from the World Happiness Report 2021 dataset, using a diverging color scale from blue (negative) to red (positive) via `d3.scaleDiverging` and `d3.interpolateRdBu`. Each cell represents the correlation between two variables, with tooltips revealing exact r values. The code loads CSV data with `d3.csv`, computes correlations pairwise while ignoring missing values, and renders an SVG matrix with `d3.scaleBand` for axes and positioning.

Loading thumbnail…

Project Increment 1

This radar chart compares the six happiness factors from the 2022 World Happiness Report across four rank groups of countries. The visualization shows averaged scores for GDP per capita, social support, healthy life expectancy, freedom, generosity, and perceptions of corruption, with distinct colored polygons representing top, mid-high, mid-range, and low-ranked nations. Built with D3 v7, the chart uses `d3.csv` for data loading, `d3.scaleLinear` for radial scaling, and SVG paths with `d3.line` for polygon generation. The data file uses comma-separated values with European decimal notation.

Loading thumbnail…

ICE-7 Q1 for car data

This scatter plot visualizes the relationship between engine size (liters) and fuel efficiency (mpg) for car models across ten brands, using color to distinguish each manufacturer. It shows the expected tradeoff: larger engines generally achieve lower fuel efficiency. The visualization is built with D3.js, using reusable chart components with `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` for ticks. The data comes from a local CSV file, rendered as an SVG with circles and a stacked legend.

Loading thumbnail…

ICE-7 Q4 11699544

This area chart visualizes daily solar energy generation over 150 days, with values rising from approximately 52 to 232 megawatts. The visualization uses D3 v7 to load data from a CSV file and render an SVG. The chart employs `d3.area` with `curveMonotoneX`, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` with grid lines. The deep maroon filled area sits above a baseline set at 95% of the minimum value, with the y-axis labeled as megawatts and the x-axis representing days.

Loading thumbnail…

ICE-7 Q3 11699544

This line chart compares daily renewable energy generation, focusing on solar energy output in megawatts across a 150-day period. The visualization uses a smooth, monotone curve to display the upward trend in solar power production over time. Rendered as an SVG using D3.v7, the chart employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.curveMonotoneX` to create the smoothed line. The data is retrieved from a CSV file containing solar, wind, and hydro energy measurements.

Loading thumbnail…

ICE - 7 Q2 11699544

This pie chart visualizes global smartphone sales share by brand for 150 rows of market data across countries. It aggregates sales by brand, showing the top 12 slices, with all remaining brands grouped into an "Others" slice. Using D3 v7's `pie`, `arc`, `scaleOrdinal`, and `schemeTableau10`, the chart labels each slice with its percentage and provides a legend. Data is loaded from `smartphone_market_share.csv` via `csv()`, with SVG output and a custom `labelArc` for placements.

Loading thumbnail…

ICE 7 Q1 11699544

This scatter plot visualizes the relationship between air quality (PM2.5 levels) and GDP per capita across global cities. The reusable D3 v7 chart applies logarithmic scaling with deterministic jitter to both axes, allowing dense data points to separate visually. Cities are colored by income tier (Low, Middle, High) using `d3.scaleOrdinal`, with a legend indicating the categories. The visualization uses `d3.csv` to load the dataset, `d3.scaleLinear` for axis scales, `d3.axisBottom` and `d3.axisLeft` for ticks, and includes hover tooltips displaying city details.

Loading thumbnail…

module 07 Q1

This scatter plot visualizes a synthetic fitness dataset of 150 individuals, showing the relationship between hours of exercise per week (x-axis) and calories burned per week (y-axis). The points are colored by four activity-level clusters—Sprinters, Marathoners, Crossfitters, and Yoga Enthusiasts—using a D3 ordinal color scale. Built with D3 v7, the visualization uses `d3.select`, `d3.scaleLinear`, `d3.scaleOrdinal`, and the `join` pattern to render axes, circles, and an interactive tooltip. The data is procedurally generated with a seeded random function to create natural-looking cluster distributions.

Loading thumbnail…

ICE6 Q3 multi-series bar+ line chart

This example presents renewable energy production trends across 150 days using two linked SVG charts. The first chart displays three multi-series line charts for solar, wind, and hydro energy using d3.line and d3.scaleOrdinal. The second chart combines a bar chart for solar energy with an overlaid line chart for wind energy, using d3.csv to load the energy_data.csv dataset. Both charts share axes and legends, with the bar-plus-line combination highlighting the relationship between solar and wind output over time.

Loading thumbnail…

ICE6 Q2 scatter plot

This scatter plot displays the relationship between engine size (in liters) and fuel efficiency (in miles per gallon) for 100 cars across ten brands, with each point colored by manufacturer. The D3.js v7 visualization uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` to color-code the brands, rendering as an SVG with axes, labels, and a legend.

Loading thumbnail…

ICE6 Q1-BarChart

This bar chart visualizes average annual rainfall in millimeters for over 100 cities worldwide, using data loaded from an external CSV file. Each city’s rainfall value is represented by a green bar, with axes labeled and rotated city names for readability. The visualization is built with D3 v7, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG chart, while mouse hover changes bar color to orange.