thakurnikhitha4@gmail.com

Countries table

This bar chart displays the top 30 countries by land area, using a horizontal layout where each bar’s length corresponds to the country’s area in square kilometers. The visualization is rendered as an SVG using React and D3 v5, with data loaded from a CSV file via `d3.csv`. It employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) draw the axes and rectangles. Tooltips show formatted area values, and axis tick labels are formatted using `d3.format`. The chart also includes a blue x-axis gridline and a labeled “LANDAREA” axis title.

Question2

The visualization compares units sold in 2019 versus 2020 across multiple item categories using two filled area paths rendered in SVG. D3.js v7 fetches a CSV dataset via `fetch` and `d3.csvParse`, then constructs a band scale for the x-axis and a linear scale for the y-axis. The areas are generated with `d3.area()`, colored using `d3.scaleOrdinal` with `d3.schemeCategory10`, and accompanied by an HTML legend with color swatches. Axis titles and rotated tick labels clarify the data mapping.

Question1

This pie chart visualizes the sales quantities of electronics item categories for 2022, with each slice labeled directly and a legend detailing category names and quantities. The visualization is built using D3.js v7 with SVG rendering, employing the `d3.pie()` generator and `d3.arc()` to create the chart, while `d3.scaleOrdinal` with `schemeCategory10` assigns colors. Data is fetched from a remote CSV file hosted on GitHub Gists and parsed manually. Arcs and labels are positioned using centroid calculations, with a flexbox layout placing the legend to the right.

Assignment2 Tutorial

Fork of Submarine Cables Globe

A globe visualization displays submarine communication cables as colored lines over a world map, rendered using the D3.js library’s geoOrthographic projection and geoPath. Users can drag to rotate the globe and zoom to adjust scale, with interactions handled via d3.drag and d3.zoom. The map and cable data load from external JSON and TopoJSON sources, while a graticule and sphere outline frame the view.

Fork of Circles with D3

A D3.js data visualization displays seven semi-transparent circles with varying positions, sizes, and bright colors on a light green background. The circles are rendered as SVG elements using D3's data join pattern, with the `select`, `attr`, and `join` methods binding an array of coordinate and style objects to circle elements. The example demonstrates method chaining and the general update pattern for creating and styling SVG shapes.

Activity6_Qs4

A D3.js bubble chart maps GDP and life expectancy for ten countries, with circle size encoding population. The visualization uses `d3.scaleLinear` for the x- and y-axes, `d3.scaleSqrt` for the radius mapping, and SVG circles filled with country-specific colors from the CSV data. Axis labels, a title, and a legend identify the plotted values.

Fork of Activity6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle’s position maps horsepower on the x-axis and torque on the y-axis, while its radius and color encode MPG and make, respectively. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for categorical colors, and SVG rendering. Interactive tooltips appear on mouseover using D3’s event handlers, and a legend shows MPG values. The underlying dataset is loaded from a CSV file.

Activity6_Q4

This interactive bubble chart visualizes the relationship between GDP, life expectancy, and population for ten countries. The x-axis represents GDP in trillions of USD, the y-axis shows life expectancy in years, and the circle size encodes population using a square-root scale. Each bubble is colored according to a categorical variable from the CSV data. The visualization is built with D3.js v6, using `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizes, and SVG rendering with axes labeled directly.

Fork of Activity6_Q4

This bubble chart compares vehicle makes by engine horsepower, torque, and highway fuel efficiency. The x-axis maps average horsepower, the y-axis maps average torque, and the radius of each bubble encodes highway miles per gallon, scaled via `d3.scaleSqrt`. The visualization uses an SVG canvas with `d3.axisBottom` and `d3.axisLeft` for axes. Data comes from the included `bubblechart.csv`, which aggregates metrics per manufacturer. The chart uses `d3.select` and `.append('circle')` to render each bubble with a fixed opacity of 0.7. A legend and axis labels are drawn using SVG text elements.

Activity6_T4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with each circle’s position mapping to the first two variables and its size encoding fuel efficiency. Hovering over a bubble reveals the make via an interactive tooltip. Built with D3 v7, the SVG uses `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` with `interpolateTurbo` for color coding, and includes a size legend. Data comes from the bundled `bubblechart.csv`, with hover effects and animation enhancing usability.

Activity6_Qs3

This D3.js v6 scatter plot maps the latitude and longitude of geographical points from a CSV file, coloring each point by its country: blue for France, green for the United Kingdom, and red for the USA. The visualization uses `d3.csv` to load remote data, `scaleLinear` for proportional x- and y-axes, and `axisLeft`/`axisBottom` to generate tick labels. Circles are appended to an SVG canvas sized to the browser window, with margins and a fixed radius of 5 pixels, while rotated text labels annotate the axes.

Fork of Fork of Activity6_Question3

This scatter plot visualizes geographic coordinates from the IRIS dataset, with longitude on the x-axis and latitude on the y-axis. Each circle represents a country, colored using `d3.scaleOrdinal` with `d3.schemeCategory10`. Built with D3 v6, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` for tick marks. The SVG output is rendered across the full browser window, with axis labels styled in green Times font.

Fork of Activity6_Question3

This scatter plot displays latitude and longitude coordinates for cities in France, the United Kingdom, and the USA, using color-coded points to distinguish countries. Built with D3 v6, the visualization uses `scaleLinear` and `extent` to map coordinates to screen positions, with `axisLeft` and `axisBottom` for axes. A legend is generated via `selectAll` with colored rectangles and text labels. The code reads hardcoded data arrays and renders points as SVG circles, with the plot filling the browser window via `window.innerWidth` and `window.innerHeight`.

Activity6_Q3

This scatter plot maps the latitude and longitude of fifteen cities across France, the United Kingdom, and the USA, with each country’s points colored blue, green, or red. D3 v6’s `scaleLinear` and `extent` set the axes, while `axisLeft` and `axisBottom` generate ticks. Circles are appended via `selectAll` and `data` binding, and SVG text labels rotate for the y-axis. The dataset is hardcoded in the script, with rendering using an SVG canvas.

Activity6_Q3

This scatter plot visualizes a sample of student marks and grades, with each circle representing an individual student’s score plotted along the x-axis. The y-axis is randomized between 0 and 100, and grade labels (‘A’, ‘B’, ‘C’) appear beside each point. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles for the data points. The static dataset is hardcoded in the script, while the rendering uses standard SVG elements appended to a 600×400 canvas.

Activity6_T3.2

This scatter plot shows the relationship between sepal length and petal length for three iris species, using distinct symbol shapes to differentiate species. It uses a legend to map each species to its corresponding shape. The visualization is built with D3.js, employing `scaleLinear` and `scaleOrdinal` for scales, and the `symbol` API for shapes. Data is fetched as a CSV from a GitHub repository and parsed using `csvParse`.

Activity6_T3

This example shows the classic Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each flower species (setosa, versicolor, virginica) with distinct fill colors. Using D3 v6, it loads CSV data from a GitHub URL, parses numeric fields, and renders SVG circles with a fixed radius. Axes are generated with `axisLeft` and `axisBottom`, while `scaleLinear` and `extent` handle the scaling domains. The code also reads sepal dimensions and applies them as attributes, though the visual encoding focuses primarily on the petal measurements.

Activity6_T3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species. Each circle is color-coded by species (setosa, versicolor, virginica) using a custom switch function, with the radius fixed and sepal dimensions mapped to unused rx/ry attributes. Built with D3.js v6, the visualization loads CSV data via `d3.csv`, employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes, and renders SVG circles through data joins. Axis labels are added with rotated text elements, and the chart fills the browser window using window dimensions.

Fork of Activity6_Q2

This stacked bar chart visualizes mobile phone prices across four brands (Samsung, Nokia, Motorola, Redmi) for four fiscal quarters, showing the cumulative price contribution of each quarter. The visualization uses D3.js v7 with an SVG rendering, employing the `d3.stack()` function to create stacked segments and `d3.scaleBand`/`d3.scaleLinear` for axes. Hovering over any segment displays a tooltip showing the specific quarter and sales amount. The chart includes ordinal color scaling for quarters, axis labels, and a legend, with data loaded from a CSV file containing brand and quarterly price values.

Activity6_Q2

This stacked bar chart visualizes mobile phone sales across four brands (Samsung, Nokia, Motorola, Redmi) and four fiscal quarters, using D3 v7 with SVG rendering. The chart displays quantitative price data along the x-axis and categorical brand groups along the y-axis, with each bar segment colored by quarter. Interactive mouse events trigger tooltips showing the exact sales value for each segment. The visualization uses d3.stack for data aggregation, d3.scaleOrdinal for color mapping, and d3.scaleBand/scaleLinear for axes, with data loaded from the provided CSV.

Activity6_T2

A stacked bar chart shows the percentage distribution of five rating brackets within each movie genre, using data from a CSV file. Hovering over a segment reveals a tooltip with the exact percentage for that genre and rating level. The chart uses D3 v7's `d3.stack()` and `d3.scaleOrdinal()` to construct the bars, with SVG rendering and mouse event handlers for interactivity.

Activity6_Q1.2

This bar chart displays the population of the top 20 countries in 2010, with the data loaded from a CSV file using D3’s `csv` function. The visualization uses React with reusable axis components (`AxisBottom`, `AxisLeft`) and a `Marks` component that renders SVG rectangles. D3’s `scaleBand` and `scaleLinear` position the bars, while `format` abbreviates tick labels from units like “G” to “B”. Hovering a bar reveals its exact value via a native SVG `<title>` tooltip.

Activity6_Q1.1

This example displays a horizontal bar chart of population data for ten countries for the year 2000, using a D3 v5 scaleBand and scaleLinear within a React component. The SVG rendering maps each country’s population value to a scaled bar width, with axis tick marks and tooltips formatted via `d3.format`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart includes blue grid lines and green bars, with a custom Poppins font applied.

Activity6_T1

This chart displays 2020 population estimates for 30 countries, with vertical bars representing each country’s population in billions. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` positioning the bars, and `format` converting tick labels from gigas to billions. Data loads asynchronously from a CSV file via `d3.csv`, supporting hover tooltips through SVG `<title>` elements. The x-axis is labeled “POPULATION-2020” and styling is applied through CSS classes.

5 Buddhas

5 Buddhas presents a black-background visualization of overlapping, semi-transparent triangular shapes. A 21-element array drives a triple-nested React render, generating thousands of small, randomly colored polygons. Each triangle's position, size, and rotation are recalculated with random values, creating a dense, chaotic field of colorful forms. The piece is anchored by five large, bright yellow Buddha figures arranged across the canvas. These figures are overlaid on the swarm of small, multicolored triangles, which appear and move due to the randomized parameters, forming a dynamic, layered composition. The result is a vibrant, abstract interplay between the precise, repeated geometric shapes and the iconic central figures, rendered in a striking, contrasting palette of neon colors on a black background. The rendering is done entirely with React and SVG.