sahithitoomu@gmail.com

@ToomuSahithi-coder·19 public vizzes

Fork of activity7, question1 piechart

This example shows a simple pie chart for a categorical dataset with five categories (A–E), each represented by a colored slice with a value label. The chart is rendered as SVG using D3.js v6, with a legend displayed to the right of the pie. The code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice geometry, apply colors from `d3.schemeCategory10`, and position the legend elements. Axis labels for categories and values are added manually, though no actual axes are present. The data is hardcoded as a sample array.

Apr 6, 2025

Loading thumbnail…

Fork of activity7.1 question2 area chart

This area chart displays the weight of various vegetables in grams, with a smooth monotone curve connecting the data points. The visualization uses D3 v7 to load the dataset from a Gist URL via `d3.csv`, scales the x-axis with `scalePoint` and the y-axis with `scaleLinear`, and renders the filled area using the `area` generator with `curveMonotoneX`. Axes are added with `axisBottom` and `axisLeft`, while the SVG output fills the browser window.

Apr 6, 2025

Loading thumbnail…

activity7.1 question2 area chart

This area chart visualizes the weight of different vegetables, using a monotone curve to connect data points across the categorical x-axis. The chart is rendered as an SVG with a steelblue fill, populated with data from a remote CSV file fetched via D3's `csv` function. The visualization applies `scalePoint` and `scaleLinear` scales, `area`, `axisBottom`, and `axisLeft` to construct the plot, with axes labels for "Vegetable" and "Weight (g)" added. The chart fills the browser window and includes a title, leveraging D3 v7's API.

Apr 6, 2025

Loading thumbnail…

Fork of Fork of activity7, area chart

This area chart visualizes fruit weights across ten sample data points, with a steel-blue filled area beneath the line and labeled axes for index and weight. Using D3.js v6, the code defines hardcoded fruit data with attributes like weight, diameter, and fruit type, then renders an SVG path via the `d3.area()` generator. Linear scales map the data point index to the x-axis and weight values to the y-axis, with `d3.axisBottom` and `d3.axisLeft` providing tick marks and text labels for the chart’s axes.

Apr 5, 2025

Loading thumbnail…

Fork of activity7, area chart

This fork of activity7 shows a simple area chart that plots fruit weight across ten data points, with x- and y-axes labeled as "Data Point Index" and "Weight" respectively. The visualization encodes a hardcoded dataset containing attributes like weight, diameter, and fruit type for apples, oranges, and bananas. Using D3.js v6, the code defines an SVG container and employs `d3.scaleLinear` for both axes, `d3.area()` to generate the filled path, and `d3.axisBottom`/`d3.axisLeft` for tick rendering. The area is filled with a steelblue color, and the chart includes axis labels for clarity.

Apr 5, 2025

Loading thumbnail…

activity7, question1

This example shows a pie chart visualizing five categories (A–E) with their corresponding numeric values, alongside a color-coded legend and axis labels. It uses a static sample dataset defined in the code. The visualization is built with D3.js v6, using `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path data. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, and the chart renders as SVG elements appended to the body.

Apr 5, 2025

Loading thumbnail…

activity7

A pie chart displays the distribution of flower species, with each slice labeled and a legend mapping colors to species names. The chart is titled "Flower Species Distribution" and includes axis labels for "Species" and "Count". The visualization is built with D3.js, using `d3.pie()` and `d3.arc()` to generate the slices, `d3.scaleOrdinal` for color assignment, and a CSV file loaded via `d3.csv()` as the data source, rendering an SVG.

Apr 4, 2025

Loading thumbnail…

Fork of activity7 question1

This pie chart displays the distribution of three flower species from a loaded CSV dataset. The visualization uses d3.pie and d3.arc to compute and render the slices, with d3.scaleOrdinal providing categorical colors. Species names appear as labels positioned at each slice's centroid using arc.centroid, and the entire chart is drawn as SVG elements within a 500x500 viewport. The chart loads data through d3.csv from a remote gist URL and converts count values to numbers for proportional slice sizing.

Apr 4, 2025

Loading thumbnail…

acitivity7

This example displays the distribution of iris species as a pie chart, with each slice labeled and accompanied by a color-coded legend. It loads CSV data from a GitHub gist, parses numeric fields, and groups records by species using `d3.nest()` and `d3.rollup()`. The chart is rendered with SVG using `d3.pie()` and `d3.arc()`, while `d3.scaleOrdinal` with `schemeCategory10` assigns slice colors and legend swatches.

Apr 4, 2025

Loading thumbnail…

activity7

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width. The plot uses D3 v6 with a linear scale for both axes, rendering data points as steelblue circles in an SVG. The code fetches CSV data from a GitHub gist, parses the numeric measurements, and uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart. Axis lines and ticks are partially removed for a cleaner appearance, and labels for both axes are added.

Apr 2, 2025

Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble’s position and size encoding these three variables. The chart uses d3.csv to load the data, d3.scaleLinear for the x, y, and radius scales, and d3.scaleOrdinal with d3.interpolateTurbo for color-coding car makes. Interactive tooltips on mouseover and mouseleave reveal the make of each bubble. A legend displays MPG values and color categories, while the SVG is rendered with d3.v7, including custom styles for hover effects.

Mar 30, 2025

Loading thumbnail…

Activity6_Task4

This bubble chart shows the relationship between horsepower, torque, and highway MPG for various car makes. Each circle’s x-position represents horsepower, the y-position represents torque, and the circle radius encodes torque magnitude. The chart uses d3.csv to load data, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. SVG rendering includes interactive hover effects that change circle fills, along with legends for car makes and highway MPG.

Mar 30, 2025

Loading thumbnail…

Fork of Fork of Activity6_Task3

This scatter plot shows the relationship between the percentage of Asian, Black, and White residents with bachelor's degrees across U.S. states. Each circle represents a state, positioned by its Asian and Black bachelor's degree percentages, while its color indicates the White bachelor's degree percentage. The visualization uses D3.js v7 to create an SVG chart with linear axes and a sequential Viridis color scale, rendered via `d3.scaleLinear`, `d3.scaleSequential`, and `d3.axisBottom`/`d3.axisLeft`. A legend is included to map the color scale to White bachelor's degree percentages. The data is embedded directly in the JavaScript source.

Mar 30, 2025

Loading thumbnail…

Fork of Fork of Activity6_Task3

This visualization uses a stacked horizontal bar chart to show the percentage of bachelor's degrees earned by Asian, Black, and White students across U.S. states. The code processes the provided data to calculate proportions and uses D3.js (v7) to render the chart as an SVG. It employs `d3.stack()` to create the stacked series, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with a color range to distinguish the three racial groups. A legend and axis labels are added for clarity.

Mar 30, 2025

Loading thumbnail…

Fork of Activity6_Task2

This visualization displays the percentage of bachelor's degrees earned by Asian, Black, and White residents across U.S. states, with each state represented as a horizontal stacked bar showing the proportional share of each ethnic group. The chart uses d3.stack() to compute the stacked series, d3.scaleBand() for the categorical state axis, and d3.scaleLinear() for the percentage axis. Rendering is done via SVG rectangles within a D3 v7 selection, styled with a color ordinal scale and annotated with axes and a legend.

Mar 30, 2025

Loading thumbnail…

Activity 6 task2

This stacked bar chart shows the racial composition of ten U.S. states, with each horizontal bar segmented into Asian, Black, and White population percentages. The visualization uses D3 v7’s stacking API (`d3.stack`) to layer the three categories, with a linear x-scale for percentages and a band scale for states. Hovering or clicking a segment reveals its exact percentage via an interactive tooltip, while inline labels display each segment’s value. The SVG rendering includes axes formatted as percentages, and the color scale assigns distinct hues to each racial group. The data is hardcoded as an array of state objects.

Mar 30, 2025

Loading thumbnail…

Fork of Activity 6 task1-Q2

This visualization shows the top 20 countries by population in 2010 using a horizontal bar chart. The SVG rendering uses D3 v6’s `scaleLinear` and `scaleBand` to map population values and country names to bar lengths and vertical positions. The bars are dark green and turn orange on hover. Axes are drawn with `axisBottom` and `axisLeft`, with tick labels formatted using D3’s `.2s` format, and the data is sourced from a static array returned by `getPopulationData`.

Mar 30, 2025

Loading thumbnail…

Fork of Activity 6 task1-Q2

This visualization displays a horizontal bar chart of the population of ten African countries in the year 2000, with bars rendered as purple rectangles using D3 v6’s SVG API. It uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate axes. Population values are formatted in millions, y-axis labels are rotated, and inline data is loaded asynchronously via `useData` and `d3.select`. The chart emphasizes readability with increased margins and axis labels.

Mar 30, 2025

Loading thumbnail…

Activity 6 task1-Q1

This example visualizes the population of 10 African countries in the year 2000 as a horizontal bar chart, with bars rendered as purple rectangles and population values formatted in millions along the x-axis. The visualization uses d3.v6 with a scaleLinear for the population axis and scaleBand for the categorical country names, drawing SVG elements directly. Data is loaded asynchronously via a useData module returning a static array, and axes are generated using d3.axisBottom and d3.axisLeft, with y-axis labels rotated and x-axis labeled "POPULATION – 2000".

Mar 30, 2025