jtulasi05@gmail.com

AreaChart

This interactive area chart displays frequency distributions for numeric variables from a cancer diagnostic dataset using a dropdown selector. The visualization uses D3.js v6 to generate SVG paths, with `d3.bin()` creating histogram bins and `d3.area()` rendering the smoothed area shape. Users can switch between variables, triggering axis updates and chart redraws via D3’s event handling. Data is loaded remotely from a CSV file hosted on GitHub.

Fork of Reusable Scatter plot Activity 8

Tutorial 4

Tutorial 3.2

This scatter plot displays the relationship between sepal length and petal length for iris flowers, with species differentiated by symbol shapes. The visualization uses D3 v7's scaleLinear for axes, scaleOrdinal with symbolsFill for shape encoding, and a custom shape legend to identify species. Data is loaded asynchronously from a CSV file containing the classic iris dataset. The axes and legend components are modularized into separate functions, with the chart updating responsively to the browser window size.

Tutorial 3.1

This scatter plot visualizes the Iris dataset, comparing petal length against petal width for individual flowers, with colors distinguishing the three species (setosa, versicolor, and virginica). It uses D3 v6 to load CSV data from a GitHub repository, scale linearly with `d3.scaleLinear`, and render circles in an SVG. The axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while separate labels indicate the plotted variables, although the code also loads sepal dimensions without displaying them in the final chart.

Tutorial 2

This example shows the distribution of IMDb ratings across six movie genres, breaking down each genre into five rating categories as stacked proportions. The chart uses d3.stack() to compute cumulative values and d3.scaleBand for the genres, with d3.scaleOrdinal mapping categories to colors. Hovering over a segment triggers a tooltip that displays the exact percentage, and the code relies on d3.axisBottom and d3.axisLeft for axes, with data loaded from a local CSV file.

Fork of Hello VizHub

This example presents a minimal web page that displays the message "Hello VizHub!" centered on the screen. A small JavaScript program imports both the D3.js library and a local ES6 module to set the text content of a div element. It demonstrates how to load D3 v5 from a CDN via UNPKG and combine it with local module imports. The code uses the `select` function from D3 to target the `#message` element and assign the string from the local `myMessage.js` file.

activity 6_Task 1.2

This chart displays the populations of 20 countries in 2010 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map the data, which is loaded via `csv` from a GitHub-hosted CSV file. SVG rectangles render the bars, with axis components and a tooltip showing formatted population values in billions.

Activity6_Task4

This bubble chart visualizes correlations between alcohol, wine quality, and residual sugar in the WineQT dataset, sourced from a GitHub-hosted CSV file. Each circle’s position encodes alcohol percentage (x-axis) and quality score (y-axis), while its radius reflects residual sugar content and its color maps pH levels using the `d3.scaleSequential` with `interpolateTurbo`. Interactive tooltips appear on hover via mouse events, and a gradient legend displays the pH color scale. The visualization uses D3 v7 with SVG rendering, `d3.axisBottom`/`d3.axisLeft` for axes, and animated opacity transitions on mouseover and mouseleave.

Activity6_Task3

A scatter plot displays annual income against spending score for mall customers, with each circle colored pink or blue to distinguish female and male shoppers. The visualization uses D3 v6 to load the CSV dataset from a GitHub repository, then applies scaleLinear functions to map income and spending values to SVG coordinates. Axes are rendered using axisLeft and axisBottom, while circle positions and fills are set through data joins and a genre-based color function.

Activity6_Task2

This visualization shows stacked bar charts comparing wholesale product expenditures—including Fresh, Milk, Grocery, Frozen, Detergents_Paper, and Delicassen—across three customer regions. Each horizontal bar aggregates spending per region, with segments colored by product category. The chart uses d3.stack() to compute the stacked series, d3.scaleBand for the regional y-axis, and d3.scaleLinear for the spending x-axis. Hovering highlights each segment and displays a tooltip with the category and its value, formatted using d3.format. Data comes from the provided CSV file, rendered as SVG elements.

Activity6_Task3.2

A D3.js v7 scatter plot displays the Iris dataset from a CSV file, mapping sepal length to the x-axis and petal length to the y-axis. Species are encoded using different symbol shapes via `d3.symbol` and `scaleOrdinal`, with a custom legend for the shape categories. The visualization uses `d3.scaleLinear` for both axes, `d3.extent` for domains, and custom modules for axes and shape legend rendering, with margins and axis labels configured.

activity 6_Task 1.1

A horizontal bar chart displays the population of ten countries in the year 2000, sorted by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, with SVG `<rect>` marks rendered from CSV data loaded via `d3.csv`. Green bars include tooltips, and axes are annotated with a custom formatter that converts SI units like "G" to "B" for billions.

Tutorial 3.2

A D3.js scatter plot displays iris flower measurements, plotting sepal length against petal length. Distinct symbols represent different species, with a legend mapping each species to its corresponding marker shape. The visualization loads CSV data from a GitHub repository, parsing and converting numerical strings to numbers. The code constructs linear scales for both axes and an ordinal scale for shapes, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate the visual encoding. Custom functions manage axes and legend rendering via `d3.select` and SVG path joins.

Tutorial 4

activity 6_Task 1

Buddha6

6 Buddha

Six Buddha presents an overlapping arrangement of colorful circular shapes rendered with React and SVG. The visualization uses nested array map functions to generate hundreds of circles with randomized positioning, fills from an RGB spectrum, and rotation transforms. A detailed Buddha path is drawn in the center, layered over a floral background image. The composition emerges from data—an array of numbers from zero to twenty—driving the geometric repetition, with React's declarative JSX structuring the SVG output.