veginetiumeshchandra@lbrce.ac.in

@Umeshchandra9·10 public vizzes

Assignment7 Question 4

This area chart displays the average temperature trend in India from 2000 to 2023, using a lightseagreen filled region with a teal monotone curve and orange data points. The visualization is built with d3.v7, using `d3.area()` and `d3.line()` for the geometric shapes, with scales defined by `d3.scaleLinear()`. It loads climate data from a GitHub gist CSV and renders as an SVG with gridlines, axes, and rotated axis labels.

Oct 28, 2025

Loading thumbnail…

Assignment 7 question 3

This example presents a line chart of India’s average annual temperature from 2000 to 2023, drawn in SVG using D3 v7. The visualization plots a teal monotone curve with orange circular markers for each year’s temperature value. It uses d3.csv to load climate data from a GitHub gist, d3.scaleLinear for the x and y axes, and d3.axisLeft and d3.axisBottom to render ticks with gridlines. The chart includes labeled axes and a title, with data filtered to a single country and sorted by year.

Oct 28, 2025

Loading thumbnail…

Q2 Assignment 7

A pie chart displays the renewable energy share percentages for various countries in 2023, using colored slices with country labels and a legend that lists each country alongside its exact percentage value. The chart is built with D3 v7, loading CSV data from a GitHub gist, and renders as SVG. It applies d3.pie and d3.arc to compute the slice geometry, while d3.scaleOrdinal with the Tableau10 color scheme provides categorical colors for each country.

Oct 28, 2025

Loading thumbnail…

ClimateQ1

This reusable D3 scatter plot visualizes the relationship between per-capita CO₂ emissions and average temperature across countries, with each circle representing a data point. The chart uses d3.scaleLinear for both axes and d3.scaleOrdinal with d3.schemeTableau10 for color encoding. It includes gridlines, axis labels, and an interactive tooltip that appears on hover. The code defines a configurable scatterPlot function that selects a DOM element, appends an SVG canvas, and renders axes and circles using d3.axisBottom, d3.axisLeft, and standard SVG circle elements.

Oct 28, 2025

Loading thumbnail…

7 Question1

This reusable scatter plot visualizes downloads versus revenue across app categories, with each point colored by category and shaped using distinct symbols. Built with D3 v7, it renders as an SVG and includes gridlines, axis labels, and a tooltip. The chart uses d3.scaleLinear, d3.scaleOrdinal with d3.schemeTableau10, and d3.symbol variants for encoding categorical data.

Oct 27, 2025

Loading thumbnail…

Car Task 3

This example presents two charts built from a CSV file of car performance data: a multi-series line chart that plots each of the first three quantitative columns against the sample index, and a combined bar-plus-line chart. The line chart uses `d3.line` and `d3.scaleLinear` with a category color scheme, while the combo chart overlays bars and lines. The code loads data via `d3.csv` and renders both SVG charts.

Oct 20, 2025

Loading thumbnail…

Iris Task 2

This interactive scatter plot visualizes the Iris dataset with an animated transition, plotting the first two numeric columns (sepal length and sepal width) while color-coding each point by the categorical species column using a d3.scaleOrdinal. Built with D3 v7, the visualization renders as SVG circles with tooltips that display the exact attribute values on hover, along with horizontal and vertical gridlines generated via d3.axisBottom and d3.axisLeft. The code auto-detects numeric and categorical columns from the CSV source, applies dropout animation on mouseout, and includes a legend for species identification.

Oct 20, 2025

Loading thumbnail…

car 1 task

This bar chart visualizes car performance by comparing a categorical attribute against a numeric metric, displaying the top 20 values sorted in descending order. Using D3 v7, it loads CSV data from a GitHub gist, applies `d3.scaleBand` and `d3.scaleLinear` for positioning, and renders SVG rectangles with `d3.interpolateTurbo` coloring. Rotated axis labels and value annotations highlight each data point, while hover effects change bar fill color.

Oct 20, 2025

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes climate trends from 2010 to 2022 with a synthetic dataset of 156 monthly records. It combines sky-blue bars for rainfall on a left axis with tomato-colored temperature and green CO₂ lines on a right axis. The chart uses D3.js version 7, employing `d3.scaleTime` for the time axis, `d3.scaleLinear` for the dual quantitative scales, and `d3.line` for the path generation. `d3.select` appends SVG elements, while `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` render the axes.

Oct 20, 2025

Loading thumbnail…

ice 5 spectacles sales

This visualization displays annual sales figures for the top ten spectacle brands, using a bar chart where each bar's height represents millions of units sold. The chart loads CSV data from a GitHub Gist via `d3.csv` with `d3.autoType` for automatic data type inference. Bars are rendered as SVG rectangles using the `d3.scaleBand` and `d3.scaleLinear` scales, with axis labels created through `d3.axisBottom` and `d3.axisLeft`. Hovering over a bar changes its color from blue to orange.

Oct 6, 2025