Kritin Kesav

proj

This example presents two SVG visualizations of salary data. The first is a horizontal bar chart showing average salary by experience level, computed with `d3.group` and `d3.mean`. The second combines a blue line for average annual salary with a red line for COVID-19 new cases per year, using `d3.rollups` and `d3.line` on a dual-axis chart. Both are rendered with D3 v6, loading data from CSV files, and styled with basic CSS.

Apr 22, 2024

Fork of Fork of Hello VizHub

This example presents a pie chart of aggregated sales data by product category, loaded from a CSV file hosted on GitHub and rendered as an SVG. It uses D3 v6 APIs such as `d3.csv`, `d3.rollups`, `d3.sum`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart displays each category’s total sales in thousands and its percentage share, with labeled arcs and a legend.

Apr 20, 2024

Q2task9

A monthly sales trend is shown as a filled area chart. The chart displays sales figures over time, with the area under the line filled in a light teal and a darker teal stroke for the line itself. Data is loaded from a remote CSV file and parsed using `d3.timeParse` for the date axis and `d3.scaleTime` for the X-axis scaling. The visualization is rendered as an SVG via D3 v6, with axes and labels added using `d3.axisBottom` and `d3.axisLeft`. The area path is generated using `d3.area`.

Apr 20, 2024

Fork of Hello VizHub

This example shows a pie chart with a legend, displaying the quantities of four fruits. It loads D3 via UNPKG and uses local ES6 module imports. The visualization uses `d3.pie` and `d3.arc` to generate and render the slices, with `d3.scaleOrdinal` for categorical colors. It appends an SVG to the body, positions the pie in the center, and adds text labels using the arc centroid. A separate legend group is built with rectangles and text, anchored to the right side of the SVG.

Apr 20, 2024

Tutorial 4.

A bubble chart visualizes the correlation between GDP per capita, happiness score, and population for ten countries. Each circle’s position encodes economic output and subjective well-being, while its radius represents population size. The visualization includes axes, labels, a legend for population magnitudes, and interactive tooltips that display exact values on hover. It uses D3 v7 with SVG rendering, loading data from a CSV file and applying linear scales for position and bubble sizing.

task 3 question678

This scatter plot visualizes the relationship between study hours and exam scores for ten students, with each point colored by student ID to distinguish individuals. The D3.js v7 code loads data from a CSV file, converts the values to numbers, and uses linear scales with `d3.axisBottom` and `d3.axisLeft` to render axes labeled "Study Hours" and "Exam Score." SVG circles are appended via data joins, with their positions mapped through the scales and their fill colors assigned using `d3.scaleOrdinal` with `d3.schemeCategory10`.

Activity6_tak2.1

This stacked bar chart visualizes product sales across three categories, with each bar segment representing a product's sales contribution. The chart uses horizontal bars, with colors differentiating categories and a legend identifying each one. The visualization is rendered as an SVG using D3.js v7, employing the `d3.stack()` function to compose the stacked data structure, `d3.scaleLinear()` and `d3.scaleBand()` to set the scales, and `d3.scaleOrdinal()` for color encoding. Mouseover events log category sales amounts to the console, providing an interactive element.

Task 3 3.2

This scatter plot shows the relationship between sepal length and petal length for three iris species, with each species represented by a distinct shape symbol. The visualization uses D3 v7 to render an SVG canvas, employing `scaleLinear` for both axes and `scaleOrdinal` with `symbolsFill` to map species to shapes. A custom shape legend displays the species symbols with labels. The data is fetched from a CSV file and parsed with `csvParse`, with numeric columns converted to numbers. The axes are drawn with `axisLeft` and `axisBottom` from D3's import, and the chart is built using the join pattern for declarative updates.

Tutorila3 and 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while distinguishing species through color: sky blue for setosa, light green for versicolor, and orange for virginica. The visualization is rendered as an SVG using D3 version 6.7.0, loading remote CSV data via `d3.csv`. Both axes use `d3.scaleLinear` with `d3.extent` for domain scaling, while `d3.axisLeft` and `d3.axisBottom` generate the tick marks and labels. Circle marks are appended with the `.join` operation, and the SVG is sized to the full browser window dimensions.

Fork of Activity6_task2

This stacked bar chart shows the percentage distribution of IMDb ratings across movie genres, with each bar divided into five rating levels from below 5.0 to above 8.5. The visualization demonstrates how genre influences audience ratings, such as Documentaries having higher proportions of high ratings compared to Action films. Built with D3 v7, the chart uses `d3.scaleLinear` for the x-axis percentages, `d3.scaleBand` for categorical genres, and `d3.stack` to create stacked segments. Hovering over any segment displays a tooltip showing the exact percentage for that rating level within the genre, calculated from the CSV data.

Activity6_task2

A stacked bar chart visualizes the impact of movie genre on IMDb ratings, with each bar showing the proportion of films across five rating bands from “below 5.0” to “above 8.5.” The chart makes it clear that documentaries skew toward higher ratings, while action films cluster at the lower end. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked segments and `d3.scaleBand` for the categorical genre axis. Hovering over a segment triggers a tooltip that displays the exact percentage for that rating level within the genre. Data comes from a CSV file loaded with D3’s data handling methods.

Fork of Fork of Fork of Activity 6

This interactive bar chart displays the 20 most populous countries in 2010, plotting population counts along a horizontal axis against country names on the vertical axis. Built with React and D3 v5, the visualization uses SVG rendering with custom components for axes and marks, pulling data from a remote CSV file. The chart formats population values in billions and includes hover tooltips, with the code demonstrating modular component reuse and D3’s scaleBand and scaleLinear APIs for layout.

Fork of Fork of Activity 6

This example shows a horizontal bar chart of populations for twenty countries in 2010, using a bar’s length to encode the population value for each country. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and rectangles, with a tooltip showing the formatted population value on hover. Data is loaded as CSV with `d3.csv` from a GitHub repository and formatted using `d3.format`.

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

Activity 6

The visualization displays a horizontal bar chart ranking the populations of 30 countries in 2020, using a green fill for each bar and blue tick marks on a white background. Built with React and D3 version 5, it loads CSV data from a GitHub repository, transforms it with the `csv` function, and renders SVG rectangles via the `scaleBand` and `scaleLinear` scales, with axes drawn by custom `AxisBottom` and `AxisLeft` components.