Keerthi

Task9_Question2

This area chart visualizes carbon emissions from liquid, solid, and gas fuels over time, with each fuel type drawn as a separate line. The visualization uses d3.csv to load the dataset, d3.scaleBand for the year axis, d3.scaleLinear for the fuel consumption axis, and d3.area to generate the paths. Each fuel series is plotted using the area generator’s y() method, with x-axis positioned by the band width and y-axis scaled to the maximum value across all fuel types. The SVG rendering includes labeled axes and a styled chart container.

Apr 22, 2024

Task9_Question1

A pie chart displays the distribution of ratings across different genres, with each slice labeled by its percentage and a color-coded legend listing the genre names. The visualization loads genre and rating data from a remote CSV file and renders it as an SVG using D3 v7. The code uses `d3.pie` to compute slice arcs, `d3.arc` to generate the path geometry, and `d3.scaleOrdinal` with `schemeCategory10` for slice colors. Percentage labels are placed at slice centroids via the arc generator's `centroid` method.

Apr 21, 2024

Task9_Question2

This area chart visualizes carbon emissions production across multiple countries over time, using stacked colored regions to compare annual values. The code loads data from a CSV file via `d3.csv` and renders SVG paths using the `d3.area` generator, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. It includes custom axis labels, rotated tick text, and an interactive legend built with SVG rectangles. Colors are assigned sequentially using HSL values, and axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Apr 21, 2024

Task9_Question1

Apr 21, 2024

Task9_Question1

A pie chart visualizes the distribution of patient counts by race, with each slice labeled directly and accompanied by a color-coded legend. The chart loads CSV data from a GitHub gist and uses D3 v7 APIs including `d3.rollup` to aggregate counts, `d3.pie` for layout, `d3.arc` for slice geometry, and `scaleOrdinal` with `schemeCategory10` for colors. Labels are positioned using `arcGenerator.centroid`, and the SVG rendering is centered within a 400×400 canvas.

Apr 12, 2024

Task9_Tutorial

This interactive scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping petal width on the y-axis. The animation updates every few seconds, with circles colored by species. The visualization uses D3.js v6 APIs including `scaleLinear`, `axisLeft`, and `axisBottom` to build a reusable scatter plot component, with SVG rendering and `setInterval` driving the periodic axis transitions.

Apr 12, 2024

Task8_Question3

This visualization displays the relationship between bill length and bill depth for penguin species using a scatter plot. The plot distinguishes species through different marker shapes, with a legend explaining the shape-species mapping. The code uses D3 v7 with `d3.csvParse` to load penguin data from a GitHub-hosted CSV file, `d3.scaleLinear` for the axes, `d3.scaleOrdinal` and `d3.symbol` for shape encoding, and custom axis and legend modules. The visualization updates dynamically as data loads asynchronously.

Task8_Question4

This example visualizes the correlation between sepal length, sepal width, and petal length in the classic Iris dataset. It uses a bubble chart where the x-axis represents sepal length, the y-axis represents sepal width, and the size of each circle encodes petal length, with species distinguished by color. The visualization is built with D3 v7 using SVG, leveraging `d3.scaleLinear` for the axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom` and `d3.axisLeft` to render the axes. A legend identifies the three species.

Task8_Question3

This example shows a scatter plot of Palmer penguin measurements, displaying bill length against bill depth with points colored and shaped by species. The visualization includes a shape legend to distinguish the three penguin species. The code uses D3 v7 APIs such as `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to map data to positions and shapes. Data is loaded from a remote CSV file using `csvParse`, and axes are generated with `axisLeft` and `axisBottom`.

Task8_Question2

This stacked bar chart shows the percentage distribution of cuisine preferences across five cities: Cambridge, Somerville, Newton, Quincy, and Salem. It uses d3.stack() to compute the stacked series and d3.scaleBand with d3.scaleLinear for the y- and x-axes, respectively. The SVG rendering includes interactive tooltips on mouseover that display the exact percentage for each cuisine segment, using d3.select and event handlers. Color encoding relies on d3.schemeCategory10 via d3.scaleOrdinal, with a legend positioned to the right of the chart.

Task8_Question3

This scatter plot visualizes the relationship between vehicle weight and miles per gallon, with points shaped according to the number of cylinders. The visualization is built with D3 v7, using `scaleLinear` for both axes and `scaleOrdinal` with `symbolsFill` to map cylinder counts to distinct shapes. Axis labels and tick marks are generated through custom `axes` and `shapeLegend` modules, which leverage D3's `axisLeft`, `axisBottom`, and `symbol` APIs. Data is loaded asynchronously from a CSV file via `csvParse` and rendered as SVG paths.

Task8_Question2

This example visualizes survey responses on trust levels for four topics, showing the distribution of very high, high, no answer, low, and very low trust as stacked horizontal bars. The chart uses D3 v7 with SVG rendering, applying `d3.stack()` to compute the stacked series and `d3.scaleOrdinal` for color mapping. Interactivity includes mouseover effects with tooltips displaying the exact percentage for each segment. Data is loaded locally from a CSV file, and axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

Task8_Question2

A horizontal stacked bar chart visualizes the proportional distribution of religious populations (in billions) across China, India, and the United States. The chart uses d3.scaleBand and d3.scaleLinear with a d3.axisBottom, encoding each religion with a distinct color from a d3.scaleOrdinal. Hovering a rect triggers a simple opacity change and a custom tooltip via mouseover and mousemove. Data loads from a local CSV using d3, and the visualization renders as SVG, importing D3 v7 from UNPKG.

Task8_Question2

This visualization presents a stacked bar chart displaying patient details, with each bar representing a patient and segments showing the percentage contribution of different attributes such as age, weight, and height. The chart uses a horizontal layout, with bars stacked by category and color-coded via a scaleOrdinal palette. Hovering over a segment reveals a tooltip with the exact percentage value for that category. The implementation uses d3.v7's stack, scaleLinear, and scaleBand APIs, rendering as SVG with data loaded from Patientdata.csv, and includes interactivity through mouseover events.

Task8_Tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s x-position maps to horsepower, its y-position to torque, and its radius to highway MPG, while color distinguishes the car brand. Built with D3 v7, the SVG rendering includes interactive tooltips that display the make on hover, plus legends for bubble size and categorical colors. The chart uses d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and d3.interpolateTurbo for the color palette.

Task8_Tutorial3.2

This visualization displays an interactive scatter plot of the Iris dataset, mapping sepal length against petal length. Each of the three iris species is represented by a distinct symbol shape, with a custom legend identifying the species categories. The implementation uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to generate the marks, while `axisLeft` and `axisBottom` render the labeled axes. Data is loaded asynchronously from a CSV file via `csvParse` and rendered within a full-window SVG canvas.

Task8_Tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x- and y-axes. Points are colored by species (setosa, versicolor, virginica) using a manual switch statement. The visualization is created with D3 v6, using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes. Data is loaded from a remote CSV via `d3.csv`, and circles are rendered in SVG, with sepal dimensions also encoded but not visually used.

Task8_Tutorial2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, using five rating brackets from below 5.0 to above 8.5. The chart uses d3.stack() to create the stacked bars and d3.scaleOrdinal for color encoding, with hover interactions revealing precise percentages via tooltips. The data comes from a CSV file with genre and rating proportion columns, rendered as SVG with d3.v7, including axis labels and a title. The visualization highlights how genres like Documentary skew toward higher ratings while Action tends toward lower ones.

Task8_Question2

This stacked bar chart shows the distribution of movie ratings across genres, with each bar representing a genre and segments showing the percentage of ratings in different categories. It uses D3.js v7 with an SVG rendering approach, where the data is processed through `d3.stack()` and mapped to horizontal bars. The chart employs `d3.scaleOrdinal()` for color coding and `d3.scaleBand()` for the y-axis layout. Interactive tooltips display exact percentages using `d3.select()` and event handlers, with the data loaded from a CSV file containing cereal information.

Task8_Question2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating categories from below 5.0 to above 8.5. Interactive hover tooltips reveal the exact percentage for each segment, and a legend distinguishes the rating categories by color. The visualization uses D3.js v7 with a linear x-scale for percentages and a band scale for genres, processing CSV data through d3.stack() to create the stacked bars rendered as SVG rectangles.

Task8_Question1.2

A horizontal bar chart displays the top 20 countries by 2010 population, with a title labeling the x-axis. The visualization uses React components and D3 v5 APIs, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis, to render SVG rectangles. Tooltips formatting via `format` shows population values in billions.

Task8_Question1.1

This bar chart displays the population of ten countries in the year 2000, sorted vertically by country name. The visualization uses React with D3 v5 scales, rendering SVG rectangles whose width encodes population values. The code leverages `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded from a CSV file via `csv()`. Tooltips appear on hover using the native SVG `<title>` element, and the x-axis labels are formatted using D3’s `format('.2s')` to abbreviate large numbers.

Task 8_Tutorial1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with each bar’s length proportional to population and a tooltip displaying the value in billions. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. Data is loaded via `d3.csv` from a GitHub repository, axes are rendered as SVG elements with tick marks, and bars are drawn as `rect` elements using the `Marks` component. The chart includes a labeled x-axis and uses a green fill for all bars.

Task 8_Tutorial1