vunnamnandini13@gmail.com

@vunnamnandini13-sys·18 public vizzes

Question 4 – Social Network Visualization

A colorful force-directed friendship network visualizes six named people as nodes with labeled circles and connecting lines. The graph uses D3 v7's `d3.forceSimulation` with link, charge, and center forces to position elements, while `d3.scaleOrdinal` with `schemeSet2` assigns node colors. Rendered as SVG, the visualization supports drag interactions and displays a hover tooltip with each person's name.

Nov 3, 2025

Loading thumbnail…

Question 3 – Family Tree Visualization

This colorful family tree visualization displays hierarchical relationships using a custom dataset of family names. The D3 v7 code builds an SVG rendering with a `d3.hierarchy` layout to position nodes and `d3.linkVertical` for the connecting edges. Each generation is distinguished through a `d3.scaleOrdinal` color scale, with interactive hover effects revealing tooltips that show the member name and generation depth.

Nov 3, 2025

Loading thumbnail…

Question 2 Canada Provincial Wellbeing Index

This choropleth map displays illustrative wellbeing scores (0–100) across Canadian provinces and territories, with a yellow-green sequential color scale and an interactive tooltip showing exact values on hover. Built with D3 v7, it loads GeoJSON province boundaries from the codeforgermany/click_that_hood repository and renders them as SVG paths using d3.geoPath with a Mercator projection fitted to the container. A legend with a linear gradient and axis communicates the color scale, and the chart redraws responsively on window resize.

Nov 3, 2025

Loading thumbnail…

Question 1 – World Population Map

This choropleth map displays world population data for select countries, using a blue sequential color scale to encode each nation's population in millions. The visualization is built with D3.v7 and topojson-client, loading geographic boundaries from a world-atlas dataset and using a Natural Earth projection via `d3.geoNaturalEarth1`. Hovering over a country triggers a tooltip showing its name and population, with `d3.scaleSequential` and `d3.interpolateBlues` driving the color mapping.

Nov 3, 2025

Loading thumbnail…

Question 2

This choropleth map displays a provincial wellbeing index for South Africa, using a green color scale to represent illustrative values from 0 to 100. The visualization loads TopoJSON data from a remote GitHub repository, converts it to GeoJSON features via topojson-client, and renders each province as a projected SVG path using d3.geoMercator and d3.geoPath. Interactive tooltips appear on hover, showing the province name and its associated wellbeing score through mouse events.

Nov 3, 2025

Loading thumbnail…

Question 2

This example renders a static HTML page with a large, centered message reading “Hello HTML!”. It uses plain HTML, CSS, and JavaScript: the `styles.css` file styles the message with a font size of 12em and text alignment, while `index.js` contains a single `console.log` call. No data source or interactive visualization is present, and the page does not use any external libraries such as D3 or Three.js. The demonstration shows the minimal structure of a web-based starter template.

Nov 3, 2025

Loading thumbnail…

1Question

This example displays a world population choropleth map, coloring selected countries from a custom dataset by population using a blue color scale. The visualization is built with D3 v7 and TopoJSON, projecting geographic data with `d3.geoNaturalEarth1()`. Country polygons are rendered using `d3.geoPath()`, and a hover tooltip shows the country name and population. A quantized legend created with `d3.scaleQuantize()` and `d3.axisBottom()` maps the color range to population values.

Nov 3, 2025

Loading thumbnail…

Reusable Scatter Plot (CO₂ vs GDP, 2025)

This reusable scatter plot compares GDP per capita against CO₂ emissions for countries in 2025, with circle size encoding population and color distinguishing regions. Built with D3 v7, the chart renders as SVG and uses d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to map data dimensions. Interactive tooltips appear on mouseover, showing country details such as renewable energy percentage, while data is loaded from a CSV file.

Oct 26, 2025

Loading thumbnail…

Area Chart (CO₂ vs GDP-sorted Countries, 2025)

This area chart displays CO₂ emissions across countries sorted by GDP per capita for 2025, using a monotone-curved blue fill. The visualization loads CSV data from a GitHub gist via `d3.csv`, then applies `d3.scalePoint` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The `d3.area()` generator with `curveMonotoneX` renders the shaded region, while SVG axes with rotated country labels handle the presentation.

Oct 26, 2025

Loading thumbnail…

Q2 (b) — Line Chart (CO₂ vs GDP-sorted Countries, 2025)

A line chart displays CO₂ emissions for countries sorted by GDP per capita in 2025. The visualization uses D3 v7's `scalePoint` for the categorical x-axis, `scaleLinear` for the y-axis, and `d3.line` with `curveMonotoneX` to draw the emission trend. Points mark individual data values while rotated axis labels improve readability. Data comes from a CSV file hosted on GitHub Gist.

Oct 26, 2025

Loading thumbnail…

Pie Chart (CO₂ Share by Region, 2025)

A pie chart displays the estimated share of global CO₂ emissions by region for 2025, with five categories (Asia, Europe, Americas, Africa, Oceania) derived from country-level data mapped to regions. Each slice is colored via `d3.scaleOrdinal`, and percentage labels are placed using `d3.arc` centroids. A hover tooltip shows the regional share. The visualization uses D3.js v7 to load CSV data from a GitHub gist, compute aggregates with `d3.rollup`, and render the chart as SVG elements with an interactive HTML legend.

Oct 26, 2025

Loading thumbnail…

Multi-Series Chart — CO₂ and Renewables 2025

This example shows a multi-series combo chart comparing CO₂ emissions (bars, in million tonnes) and renewable energy percentage (line) for countries in 2025. Country data is sorted by emissions and color-coded by region. Built with D3 v7, it renders an SVG canvas and uses `d3.scaleBand`, `d3.scaleLinear`, and axes with gridlines. Data is loaded from a CSV via `d3.csv` with `d3.autoType`, and an interactive tooltip responds to hover. The chart animates on load and displays a legend for regional categories.

Oct 19, 2025

Loading thumbnail…

GDP vs CO₂ Scatter Plot — 2025

This scatter plot visualizes the relationship between GDP per capita and CO₂ emissions for countries in 2025, with each point’s color indicating the region (Asia, Europe, Americas, Africa, Oceania) and its size encoding population. Built with D3 v7, the chart maps GDP to the x-axis, CO₂ emissions to the y-axis, and uses a square-root scale for point radii. The data is loaded via `d3.csv` from a GitHub gist, and the visualization features a grid, axis labels, and region color coding, all rendered in SVG with hover tooltips.

Oct 19, 2025

Loading thumbnail…

CO2 Bar Chart 2025

This bar chart displays CO₂ emissions by country for 2025, ranking nations from highest to lowest emissions. Each bar’s length encodes emission values in megatons, while color distinguishes geographic regions through a scaleOrdinal. The visualization uses d3.csv to load remote data, d3.scaleBand and d3.scaleLinear for positioning, and includes hover tooltips showing country, region, and precise values. Animated bar transitions grow from the baseline, and the SVG rendering includes axis labels and an interactive legend.

Oct 19, 2025

Loading thumbnail…

ICE Step3

This visualization displays the first five entries of the Denton Street Murals dataset in a styled HTML table. Using D3.js v7, it loads the data from a CSV URL, dynamically generates table headers from the column names, and renders rows with the dataset’s values. The page applies a dark theme with gold accents, and includes a loading message before the table appears once data is fetched.

Oct 6, 2025

Loading thumbnail…

Denton_Street_murals

This visualization explores Denton street mural data from a CSV file, showing dataset summaries, a table of the first ten rows, and counts of murals by material using animated SVG bar charts. The page also includes a decorative artistic mural rendered in SVG. It uses D3.js v7 with fundamental APIs such as `d3.csv`, `d3.rollup`, `d3.scaleBand`, `d3.scaleLinear`, and `transition` to load and process data and drive the animations.

Oct 5, 2025

Loading thumbnail…

ICE-5 Denton Street Murals Visualization

This visualization presents summary statistics and a table preview of the Denton Street Murals dataset. It uses D3.js v7 to load CSV data and render SVG elements, including a summary card, a table of the first ten records, and a bar chart showing mural counts by material. The code computes row/column counts and area statistics, then draws a decorative artistic mural SVG.

Oct 5, 2025

Loading thumbnail…

ICE-5 Denton Street Murals Visualization

This interactive scatter plot compares sepal dimensions across three iris species using D3.js. The visualization displays sepal length against sepal width, with color-coded points representing each species and a legend supporting hover interactions that highlight matching data points. Data loads from a CSV file using d3.csv, while d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft handle scaling and axes. The code includes a resize observer for responsive dimensions and BBC-inspired color styling.

Oct 5, 2025