saitejakaranam10@gmail.com

Activity 6 Q2

This example visualizes survival outcomes on the Titanic by passenger class using two overlaid area charts. It loads the Titanic dataset from a CSV URL and filters the data into survived and non-survived groups, then uses `d3.rollup` to count occurrences by class. The SVG rendering employs `d3.scaleBand`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to draw the paths, axes, and a color-coded legend.

Fork of Assignment 2 - Pie Chart

Activity 6

This pie chart displays the survival distribution of Titanic passengers, breaking down the total count into those who survived and those who did not. The visualization fetches a CSV file from a GitHub gist, parses the data, and counts occurrences based on the survival status column. It uses the Chart.js library with the Canvas API to render the pie chart, applying distinct blue and red colors to represent the two categories. The chart is configured with a non-responsive layout and a title that labels the data as "Survival Distribution on Titanic."

Activity 6 Q2

An area chart displays the relationship between passenger age and fare from the Titanic dataset. The D3 v7 library loads the CSV data, maps age to the x-axis and fare to the y-axis, and renders a steel-blue filled area using `d3.area`. Linear scales, axes with labels, and a responsive SVG container structure the visualization.

Activity 6

Act6_Q4

A bubble chart shows the correlation between processor speed, RAM, and storage across 15 smartphone brands, with bubble size encoding storage capacity and color encoding brand. The visualization uses D3 v7’s scaleLinear, scaleOrdinal, and schemeCategory10 to map data from a CSV file. Circles are rendered as SVG elements, with axes for processor speed (GHz) and RAM (GB), plus a legend identifying each brand.

tutorial4

activity6ttt2

A scatter plot displays sepal length against petal length for the Iris dataset, with each species represented by a distinct symbol shape. The visualization includes labeled axes and a legend identifying the three species categories. It uses D3 v7 with scaleLinear for positioning, scaleOrdinal with symbolsFill for shape encoding, and d3.csvParse to load the remote CSV data. Axis labels and the legend are rendered through custom modules that create SVG elements.

activity6t3

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each circle represents a flower sample, colored by species: setosa in skyblue, versicolor in lightgreen, and virginica in orange. The code uses D3 v6’s `csv` loader, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. Circle positions derive from petal measurements, while sepal length and width are also parsed into the data objects but not directly plotted.

Activity6task2q2

This stacked bar chart visualizes the percentage of sales performance within each product category, with horizontal bars segmented by price ranges from "Below 100" to "Above 5000." The chart uses D3 v7's `d3.stack()` to create the stacked segments, `d3.scaleLinear` and `d3.scaleBand` for positioning, and `d3.scaleOrdinal` for color mapping. Interactive tooltips display exact percentages on hover using mouse events, while SVG rendering provides the visual output.

activity6task2q2

This stacked bar chart shows how phone brand influences the distribution of ratings across five percentage categories. Built with D3 v7, the SVG visualization uses `d3.stack()` to aggregate proportions and `d3.scaleBand` for brand grouping, with `d3.scaleOrdinal` assigning colors to rating categories. Hover interactions reveal exact percentages via a custom tooltip, while the data comes from a CSV file mapping brands like Apple and Samsung to their rating breakdowns.

activity6task2

This stacked bar chart shows how IMDb movie ratings are distributed across six genres, with each bar divided into five rating categories from below 5.0 to above 8.5. Hovering over a segment reveals its exact percentage in a tooltip. The visualization uses d3.stack() to create the stacked layout, d3.scaleOrdinal for colors, and d3.scaleBand for the genre axis, rendering as SVG with data loaded from a local CSV file.

activity6t2

A stacked bar chart shows the percentage of movie ratings across six genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses d3.csv to load the data and d3.stack to compute the stacked segments, while d3.scaleOrdinal assigns colors to rating levels. Hovering over a segment dims the bar and reveals a tooltip displaying the exact percentage for that genre and rating category. The chart includes axes via d3.axisBottom and d3.axisLeft, plus a legend rendered as colored rectangles and text.

activity6task2

This example displays a horizontal stacked bar chart comparing smartphone brand market share across five discount ranges, from "Below 10%" to "Above 40%." Rendered using D3 v5, the visualization loads data from a local CSV file and uses the `d3.select` API to bind the chart to the DOM. The chart segments each brand's bar proportionally, with colors distinguishing the discount brackets. The code imports local ES6 modules for the message text, demonstrating modular integration alongside D3’s UNPKG delivery.

activity6q1(2)

This bar chart displays the populations of 20 countries in 2010, ranked along a vertical band scale from largest to smallest. A horizontal linear scale maps population values to bar widths, with axis tick labels formatted in billions. The visualization is built with React, D3 v5, and SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file via D3’s `csv` method.

Fork of activity6q1(1)

This horizontal bar chart displays the population of ten countries in the year 2000, sorted with the largest population at the top. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, rendering SVG rectangles. Data is loaded from a CSV file using D3’s `csv` function, and axis ticks are formatted with a custom SI prefix function that converts billions to 'B'.

activity6q1(2)

This visualization displays population figures for 20 countries in 2010 as horizontal bars. The chart uses React with D3 v5's `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths. Rendered as SVG, the code imports data from a GitHub-hosted CSV file and applies D3's `format` function to abbreviate axis tick labels. Blue axis lines, green bars, and a Poppins typeface style the visualization. Native SVG `<title>` elements provide tooltips showing the formatted population value for each bar.

activity6q1

This example is a horizontal bar chart that displays the population of 20 countries in the year 2000, using the D3.js library within a React component. The chart renders as an SVG with a green bar for each country, scaled linearly by population. The code imports specific D3 functions for data loading (`csv`), scaling (`scaleBand`, `scaleLinear`), and formatting (`format`). A tooltip, created with an SVG `<title>` element, shows the population value when a bar is hovered.

activity6q1

acticity6q1

This example demonstrates how to create a simple D3.js visualization that displays a text message in the browser. It loads the D3 library from a CDN and uses the `select` function to target a div element and set its content. The code also imports a local ES6 module to define the message text, and includes CSS styling to center and enlarge the text. The visualization uses basic D3 DOM manipulation without any data binding or chart-specific features.

5buddha

Five identical Buddha outlines in violet overlap in translucent layers across a floral background image, creating a dense, stacked composition. The React app renders these SVG paths with varying scale and translation transforms, using React 16.10 and ReactDOM to mount the visualization. Each path uses the same d attribute with stroke and fill styling, while the page layout centers the SVG within a fixed viewport.

activity6

This example demonstrates a minimal D3.js setup within the VizHub framework. It displays the text "Hello VizHub!" centered on a white background using a large, bold font. The code imports the `select` function from D3 v5 and a custom message from a local ES6 module, then uses `select('#message').text(message)` to set the DOM element's content. The page loads D3 from a CDN and applies styling from a linked CSS file.

5buddha