gketan456@gmail.com

activity 7.1 question 2

This example shows an area chart of average clothing weight by size. The visualization loads CSV data from a GitHub gist, groups the records by clothing size, and computes the mean weight for each category before drawing the chart using D3 v7. The SVG rendering uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and a `d3.area` generator to create the filled path. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart is styled with steelblue fill.

Nov 5, 2024

activitty7.1question1

This example displays a static text message, “Hello VizHub!”, centered on the page with dramatic, large typography. It demonstrates D3.js version 5 selection methods to set the text content of an HTML element, while also showcasing the use of local ES6 modules for importing string constants. The page is styled via a separate CSS file, and the visualization relies on D3’s `select` function to update the DOM.

Nov 4, 2024

activity7.1 question1

This scatter plot visualizes a custom shirt dataset, mapping age to the x-axis, height to the y-axis, and weight to the radius of each circle. The circles are colored by shirt size using a hardcoded color scale (e.g., XS is light blue, XXXL is red). The visualization loads a CSV file from a GitHub URL, parses numeric fields, and renders an SVG using D3.js. It uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, and the `axisLeft` and `axisBottom` functions to display the axes with labeled tick marks.

Nov 4, 2024

activity 7.1 T

This example demonstrates a minimal D3.js setup within VizHub, displaying the static text “Hello VizHub!” in the center of the page. It loads D3 v5 via UNPKG and uses the `select` API to set the text content of a `div` element with id `message`. The example also showcases local ES6 module imports through a separate `myMessage.js` file, which exports the message string, and includes a CSS stylesheet for large, centered typography.

Nov 4, 2024

activity6 question9

This visualization shows the correlation between population and GDP across several countries from 1970 to 1974, with each bubble representing a country-year pair. The x-axis maps population in millions, the y-axis maps GDP in billion USD, while bubble radius encodes the year and color distinguishes countries. Users can hover over any bubble to see its exact country, year, population, and GDP values via a custom tooltip. The code uses d3.csv to load the data, d3.scaleLinear for axes and size scaling, d3.scaleOrdinal with d3.schemeTableau10 for colors, and includes legends for both the year-driven bubble sizes and country colors.

activity6_q9

A bubble chart maps population on the x-axis, area on the y-axis, and GDP to bubble size and color for 25 US cities. Each city’s bubble uses a distinct color from the `d3.interpolateTurbo` scale and is positioned using `d3.scaleLinear`. Hovering reveals a tooltip with city name and GDP. A legend displays GDP values, with circle sizes corresponding to the `z` scale. Data comes from `bubblechart.csv`.

activity6 question 9

This bubble chart maps US cities by population on the x-axis, area on the y-axis, and GDP as bubble size. It uses D3’s `scaleLinear` for axes and bubble scaling, `scaleOrdinal` with `interpolateTurbo` for city colors, and `axisBottom` and `axisLeft` for tick marks. A tooltip displays city name and GDP on hover, while a legend with circles and dashed lines shows GDP values. Data is loaded from a local CSV via `d3.csv`.

activity6_question9

A bubble chart displays population and GDP for 25 US cities, with bubble size encoding land area. It loads CSV data via `d3.csv` and uses `d3.scaleLinear` for x/y axes and radius, plus `d3.scaleSequential` with `d3.interpolateBlues` for color. Interactive tooltips appear on mouseover, showing city details. SVG rendering includes axes, labels, and a legend for bubble sizes.

activity6_question9

A bubble chart compares the population and GDP of 25 major U.S. cities, with bubble size representing city area and color intensity encoding GDP. The visualization uses D3.js v7 to load data from a CSV file and render SVG circles. Interactive tooltips appear on mouseover, showing each city's population and GDP. The chart includes labeled axes, a legend for area, and uses `d3.scaleLinear`, `d3.scaleSequential`, and `d3.interpolateBlues` for encoding.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle represents a make, with its horizontal position on the x-axis scaled by horsepower, its vertical position on the y-axis by torque, and its radius by highway MPG. Color encodes the specific make. The chart includes interactive tooltips displaying the make on hover, along with legends for both bubble size and color. The visualization is built using D3 v7 with SVG and animated transitions for tooltip opacity and position.

activity6_question6

This example shows a scatter plot of t-shirt dataset records, mapping age to the x-axis and height to the y-axis, with circles sized by weight and colored by shirt size category. It loads CSV data from a GitHub repository using d3.csv, then renders SVG circles with d3.scaleLinear for both axes and d3.axisLeft and d3.axisBottom for tick marks. The visualization uses a hardcoded color scale for size categories and positions axis labels via SVG text elements.

activity6_task3.2

This example visualizes the Iris dataset as a scatter plot, mapping sepal length and petal length on the axes while using different symbol shapes to distinguish between plant species. It uses D3 v7 APIs such as `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to handle axes, scaling, and shape encoding. A custom legend is drawn using `shapeLegend`. Data is loaded asynchronously from a GitHub-hosted CSV file and parsed with `csvParse`.

Activity6_Task3

This example renders a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, virginica). Data is loaded via `d3.csv` from a GitHub raw URL. Using D3 v6 with SVG, the visualization applies `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position circles with a fixed radius. Axis labels are added via SVG text elements. The code demonstrates importing D3 functions and local ES6 modules, though the main chart logic lives inline in the HTML.

question2

A stacked bar chart shows vehicle sales across five brands, with each bar divided into three color-coded car categories: SUV, sedan, and mini. The chart uses D3 v7's `d3.stack()` and `d3.scaleBand()` to position horizontal bars, with `d3.scaleLinear()` mapping the sales totals. Hovering over a segment triggers a tooltip displaying the exact sales value for that brand and category, using D3 event handlers for mouseover, mousemove, and mouseout interactions.

Activity6_Task2

This stacked horizontal bar chart visualizes the distribution of IMDb ratings across six genres, with percentages segmented into five rating bins from below 5.0 to above 8.5. The chart uses d3.stack and d3.scaleOrdinal with a custom color palette to display proportional segments within each genre bar. SVG rendering powers the visualization, with d3.axisBottom and d3.axisLeft for scales, and mouseover events trigger tooltip updates showing exact percentage values. The data originates from a local CSV file read directly in the script.

activity6 question 1.2

This example displays a horizontal bar chart ranking the top 20 countries by their 2010 population. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering rectangular marks as SVG elements. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the chart includes formatted axes with tick labels using `d3.format`.

Activity 6 question 1.1

This example shows a horizontal bar chart of population by country, with the year 2000 displayed in the x-axis label. It uses React with D3 v5 functions such as `scaleBand`, `scaleLinear`, `max`, and `format` to construct the visualization. The data is loaded from a CSV file using D3’s `csv` method, filtered to the top ten countries, and rendered as SVG rectangles. Interactive tooltips appear on hover via the SVG `title` element, while styled axis lines and labels enhance readability.

activity 6_Task 1

This visualization shows the 2020 population of 30 countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are colored a light green, with blue axis ticks and a labeled x-axis in billions. The code uses React hooks—`useState`, `useCallback` and `useEffect`—to load CSV data via `d3.csv` from a GitHub repository, then renders the chart with `d3.scaleBand` and `d3.scaleLinear` as SVG elements, formatting tick labels using `d3.format`.

2 to 6

A chaotic field of hundreds of tiny colored circles scatters across a dark SVG canvas, each one positioned randomly at multiples of 100. The circles are rendered as nested `null` elements with random opacity and RGB values generated by `Math.random()`, while a crisp, detailed path of a Buddha figure sits at the center, transformed with a scale of 1.9. The code uses React to map over an array of numbers, creating the overlapping points, and renders the entire scene in a single SVG with a background image applied via CSS.

Oct 16, 2024