sivachandraramanaidu.vnof52@gmail.com

Activity6_task4

This bubble chart shows the relationship between company revenue and profit, with bubble size encoding employee count. The visualization uses D3 v7 to render SVG circles scaled against linear axes. Revenue appears on the x-axis, profit on the y-axis, and each bubble’s radius is derived from the Employees value. The chart includes axis labels and a tooltip that appears on hover, displaying company details. Data comes from an embedded CSV-like array within the script, listing 30 companies with their financial metrics. The implementation uses d3.scaleLinear for axes and bubble sizing, with d3.axisBottom and d3.axisLeft for the scales.

Apr 7, 2025

Activty6_task4_qustion4

This bubble chart shows the relationship between GDP per capita and life expectancy for five countries, with bubble size encoding population. It uses d3.csv to load data, d3.scaleLinear for the x- and y-axes, and d3.scaleSqrt to size the bubbles by population. Circles are rendered with SVG, and d3.axisBottom and d3.axisLeft generate the axes with labeled GDP and life expectancy values. Country labels are placed at the center of each bubble.

Apr 7, 2025

Activity6_Question3

This interactive scatter plot visualizes red wine quality by plotting alcohol percentage on the x-axis against density on the y-axis, with each point colored by its quality rating using a d3.scaleOrdinal with the schemeCategory10 palette. The SVG chart uses d3.axisBottom and d3.axisLeft for the axes, and data is loaded asynchronously from a CSV file via d3.dsv with semicolon delimiters, parsing numeric alcohol and density values while preserving quality as a string category. Point radius is fixed at five pixels, and margins are set to accommodate labeled axes with green, 20px times-font text.

Apr 7, 2025

Activity6_task3.2

This scatter plot visualizes the Iris dataset, encoding sepal length on the x-axis and sepal width on the y-axis. Each species is distinguished through a unique shape—circles for setosa, squares for versicolor, and triangles for virginica—along with distinct fill colors. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.symbol` to generate the species-specific shapes. Data is loaded asynchronously via `d3.csv` from a remote gist URL.

Activity6_task3.1

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width for three iris species—setosa, versicolor, and virginica—with color-coded circles. The code loads the CSV data via `d3.csv`, uses `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` with a custom color range for species, and renders the plot as an SVG using `d3.axisBottom` and `d3.axisLeft` for the axes. Circle positions are set with `d3-selection` `.attr` calls.

Activity6_task3.1

This scatter plot visualizes country data with D3.js v7, mapping two quantitative variables to the x- and y-axes and encoding a third dimension through point color. The rendering uses D3's SVG circle elements within a Cartesian coordinate system, with axes and tick labels styled via CSS. Hovering over a point triggers a D3 mouseover event that displays a tooltip showing the country's precise values.

Activity6_task4

This bubble chart visualizes the relationship between average horsepower and average torque for various car makes, with each bubble’s position determined by these two variables and its size scaled by horsepower using a square-root scale. The SVG rendering uses D3 v7’s scaleLinear, scaleSqrt, and scaleOrdinal APIs to map data values to coordinates and categorical colors. Hovering highlights a bubble by adding a black stroke and increasing opacity. Axes are labeled and generated with d3.axisBottom and d3.axisLeft, driven by data loaded from a CSV file.

Task3.1

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each of the three species colored distinctly (setosa, versicolor, virginica). The visualization uses D3 v6 APIs, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, and D3's axis generators (`axisLeft`, `axisBottom`) to render an SVG chart. Data is loaded from a remote CSV URL, with each point represented as a circle whose color is determined by species. The plot includes custom axis labels, with the chart sized to fill the browser window.

Activity6_task2

This example shows a stacked bar chart comparing ratings for five genres across four streaming platforms (Netflix, Hulu, Disney+, Prime Video) as percentages of total ratings. The code uses D3 v7’s `d3.stack` to compute stacked segments, `d3.scaleLinear` for the horizontal percentage axis, `d3.scaleBand` for genre categories, and `d3.scaleOrdinal` with `d3.schemeCategory10` for platform colors. Data is loaded from a CSV file, rendered as SVG rectangles, and includes interactive tooltips via SVG `title` elements.

Activity6_task2

Activity-6_Task-2

This example visualizes the distribution of IMDb ratings across movie genres using a stacked horizontal bar chart. It shows the proportion of films within six rating categories, from “below 5.0” to “above 8.5,” for genres like Documentary, Drama, and Action. The code uses d3.stack() to compute layered bar segments, with d3.scaleBand for genre positioning and d3.scaleLinear for percentages. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment. Data comes from a CSV file, rendered as SVG with D3 v7.

Activity6_task1_question2

This horizontal bar chart displays the top 20 countries by population in 2010, sorted in descending order with population values mapped to bar length. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with `d3.axisLeft` and `d3.axisBottom` rendering the axes. Data is loaded asynchronously via `d3.csv` from a remote gist, and the bars are drawn as SVG `rect` elements. Population values are formatted using `d3.format('.2s')` for compact tick labels.

Activity6_task1

This example displays a horizontal bar chart of the top ten most populous countries in the year 2000, ranked by population. The chart, rendered as an SVG, uses D3 v5 to load CSV data from a remote gist and sorts it by the 2000 population field. The visualization consists of green bars drawn via `d3.selectAll('rect')` and `d3.scaleBand` for the categorical country axis, while a linear scale (`d3.scaleLinear`) maps population values to bar widths. Axis ticks are formatted with `d3.axisBottom` and `d3.format('.2s')` for compact notation.

Activity6_task1

This visualization displays the text “Hello VizHub!” prominently in the center of the page, styled with large typography and horizontal alignment. Built with D3 v6, it uses the `select` API to target the `#message` div and set its text content from a separate ES6 module. The example demonstrates basic DOM manipulation and module imports within a minimal HTML/CSS setup, serving as a simple intro to D3’s selection and data-binding patterns.

Activity6_task1

This interactive bar chart visualizes the 2020 population estimates for 30 countries, with a green bar for each nation. The visualization uses D3.js scale functions to map country names to the y-axis and population values to the x-axis, while React components render the SVG elements. Data is loaded from a CSV file via the `csv` API, and axes are generated using custom `AxisBottom` and `AxisLeft` components.

Activity6_Task1

This bar chart displays the 2020 population estimates for the top 30 countries, sorted by country name along the vertical axis. Horizontal bars extend from the y-axis, with bar length proportional to population magnitude. Using d3.v6, the visualization employs d3.scaleLinear for the x-axis, d3.scaleBand for categorical y-axis spacing, and d3.axisBottom/axisLeft for tick marks. Data loads asynchronously via d3.csv from a GitHub gist, with marks rendered as SVG rectangles filled in steelblue.