jayakrishnanallani5@gmail.com

@Jayakrishna5212·10 public vizzes

act 7

This area chart visualizes employee hires over time, using a steel-blue filled path to show the number of hires per year. The code loads a CSV dataset from GitHub via `d3.csv`, parses dates with `d3.timeParse`, and aggregates counts by year. It renders an SVG area using `d3.area`, with `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for labeled axes.

Apr 6, 2025

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This interactive pie chart visualizes student mental health and academic data, letting the viewer examine the distribution of records across categories like stress levels, depression, relationship status, and grades. Selecting a different attribute from the dropdown redraws the chart based on precomputed counts from the CSV data. Built with D3 v7, the example uses `d3.csv`, `d3.rollup`, `d3.pie`, and `d3.arc` to generate SVG paths and labels, with hover interactions that expand a slice and trigger a tooltip. A categorical color scale, `d3.scaleOrdinal`, with the `d3.schemeTableau10` palette colors each segment.

Apr 6, 2025

Loading thumbnail…

activity 7

A pie chart visualizes the distribution of employees across departments in an HR dataset. It shows the relative counts for each department as colored slices with hover tooltips revealing exact values. A legend identifies each department's color. Built with D3 v7, the code loads CSV data, aggregates counts using `d3.rollup`, and renders the chart with `d3.pie()` and `d3.arc()`, applying an ordinal color scale and SVG elements for the slices and legend.

Apr 6, 2025

Loading thumbnail…

Fork of activity 7.2

This example shows an annual house price index from 2000 to 2010, highlighting a sharp rise in prices through 2006 followed by a decline. A blue-to-cyan linear gradient fills the area under the line, created with `d3.area()`. The visualization uses `d3.scalePoint()` for the year axis and `d3.scaleLinear()` for the price axis, with axes generated by `d3.axisBottom()` and `d3.axisLeft()`. The SVG chart is rendered with D3 v7.

Apr 6, 2025

Loading thumbnail…

Fork of activity7_question1

A pie chart displays the poverty percentage for the years 2000 through 2004, with each year’s value shown as a proportional slice and labeled directly on the chart. The visualization uses D3 v7 and renders to an SVG element. The code builds the chart with `d3.pie` to compute arc data and `d3.arc` for the path geometry, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to years. A legend, added separately, lists each year and its numeric poverty percentage.

Apr 6, 2025

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Each circle’s position is determined by horsepower (x-axis) and torque (y-axis), while its radius encodes highway MPG, and color distinguishes car brands. The visualization uses D3.js (v7) with SVG rendering, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color assignment, and interactive tooltips that display exact values on mouseover. Data is loaded from a CSV file, with circles animated via D3’s `.join` operation.

Mar 30, 2025

Loading thumbnail…

scatter plot

This scatter plot visualizes the relationship between horsepower and torque for ten car makes, with each make represented by a colored circle. The plot uses D3.js v7 with SVG rendering and interactive tooltips that display the car make and its values on hover. Axes are labeled and scaled using `d3.scaleLinear`, while circles are positioned with `d3.axisBottom` and `d3.axisLeft` for the grid. The chart is animated through CSS transitions on tooltip opacity, providing a clean, hover-driven exploration of the dataset.

Mar 30, 2025

Loading thumbnail…

stacked graph

This stacked bar chart uses Chart.js to compare the proportional contributions of horsepower, torque, and highway MPG across 31 car makes. Each bar is segmented into three colored sections using the `stack: 'Stack 0'` property, with values calculated as percentages of each car’s total attribute sum. The canvas-rendered visualization includes tooltips that display the exact percentage per segment, and axes are labeled “Percentage” and “Car Make” for clarity.

Mar 30, 2025

Loading thumbnail…

Fork of Activity 6 - task 2

A horizontal bar chart displays 2010 population estimates for twenty countries, from China to Thailand. The visualization uses Chart.js to render a single dataset onto an HTML5 canvas, with country names on the y-axis and population counts on the x-axis. Data is loaded from an external script into global variables, and the chart is instantiated in a window load handler with blue bars and labeled axes.

Mar 30, 2025

Loading thumbnail…

Activity 6 - task 1

This visualization presents a horizontal bar chart ranking the ten most populous countries in 2000, using population values from a static JavaScript array. The bars extend proportionally to population size, with each bar labeled by its exact count in full numerals. Built with D3.js v6, the chart uses `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and renders bars as SVG rectangles with steelblue fill. Axis ticks are formatted in millions, and the chart includes gridlines via `tickSize(-innerHeight)` within an SVG container.

Mar 30, 2025