sruthimreddy6@gmail.com

task 9 and 10 Q2

This visualization displays monthly sales data as an area chart, where hovering over a bar reveals a tooltip with the exact month and sales value. The chart uses d3.area() to draw the shaded region, d3.scaleBand() and d3.scaleLinear() for the axes, and SVG rectangles to capture mouse events. Data loads from a CSV file via d3.csv, and the tooltip appears with a transition. The visualization includes rotated x-axis labels and custom axis titles.

task 9 and 10 Q1 11111

This pie chart visualizes the distribution of job titles in a dataset loaded from a CSV file, with each slice labeled by job title and count. The code uses d3.csv to fetch the data, d3.rollup to count occurrences per job title, and the d3.pie and d3.arc layouts to generate and render the arcs in SVG. A categorical color scale from d3.schemeCategory10 assigns colors to slices, and an HTML legend is dynamically appended to the page. The chart is centered within an SVG container sized at 450 by 450 pixels.

Fork of Fork of task 9 and 10 Q1 1

This example shows a pie chart of job title frequencies from a CSV dataset loaded from a GitHub gist. Each slice is labeled with the job title and its count, and a small color-coded legend is included. The visualization uses D3.js v7 with the `d3.pie` layout, `d3.arc` generator, `d3.rollup` for counting, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Data is fetched via `d3.csv` and rendered as SVG elements.

Fork of task 9 and 10 Q1 1

A pie chart displays the distribution of job titles from a CSV dataset, showing each title’s count as a labeled slice. D3 v7 loads the data with `d3.csv`, aggregates counts using `d3.rollup`, and renders pie arcs via `d3.pie` and `d3.arc`. Each slice is colored with `d3.scaleOrdinal` and `d3.schemeCategory10`, with labels placed at arc centroids. An HTML legend lists each title with a matching color swatch. The SVG output is sized at 600 by 600 pixels.

task 9 and 10 Q1 1

This pie chart visualizes the distribution of job postings across different experience levels, showing the count for each category as labeled slices. The chart is rendered as an SVG using D3.js v7, with the pie layout generated by `d3.pie()` and arcs drawn via `d3.arc()`. Data is loaded from a remote CSV file using `d3.csv()`, and counts are aggregated with `d3.rollup()`. Each slice is colored with `d3.schemeCategory10` and labeled inside the arcs using centroid positioning.

task 9 and 10 Hello VizHub

This example displays a scatter plot of the Iris dataset, encoding petal length and width for each flower, with points colored by species. It uses D3 v6’s `scaleLinear`, `extent`, `csv`, `axisLeft`, and `axisBottom` APIs to load data from a GitHub Gist and render the plot as SVG circles. The visualization also includes custom axis labels and a legend for the three iris species.

Task8 T4

This bubble chart displays the relationship between average horsepower and average torque for seven car makes, with each car brand represented by a colored circle. The visualization uses D3.js v7 to load data from a CSV file, map values to linear scales for both axes, and encode the categorical car brand through an ordinal color scale. SVG circles are positioned using the xScale and yScale functions, with a legend identifying each make by color, while axis labels clarify the quantitative dimensions being compared.

Task8 T4

This bubble chart plots U.S. cities by population density on the x-axis and land area on the y-axis. Each bubble’s size encodes the product of these two variables, representing total population, with a legend showing bubble-size equivalents for specific density values. Built with D3.js v7, it uses `d3.scaleLinear` for both axes, `d3.scaleSqrt` for bubble radius, and `d3.axisBottom` and `d3.axisLeft` to render tick marks. The visualization displays city names via hover effects, with a static CSV data source.

Task 8 T3.2

This scatter plot visualizes the relationship between fixed acidity and alcohol content in wines, with point shapes encoding wine quality ratings. The code uses d3.scaleLinear for both axes, d3.scaleOrdinal with d3.symbolsFill to map quality categories to shapes, and d3.symbol to render the marks. A shape legend in the top-right identifies the quality levels. The chart loads wine characteristic data from a CSV file and renders it within an SVG canvas sized to the browser window.

Task8 T3

This visualization shows the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Points are colored by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange. The code uses D3 v6 with `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles. The axes are labeled, and the data source is a remote GitHub gist containing the iris measurements.

Task8 T3

This scatter plot displays the Iris dataset, mapping petal length and petal width as the primary x and y coordinates, while the data points are colored by species (setosa, versicolor, and virginica) using a custom color scheme. The visualization also encodes sepal length and width as the `rx` and `ry` attributes of each circle, though this does not affect the visual rendering since the radius is fixed. Built with D3 v6, the code uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` for the chart's labels.

Task8 T3

A scatter plot displays the Iris dataset, comparing sepal length against petal length. Each point represents an individual flower, color-coded by species (setosa, versicolor, or virginica) using CSS classes. The visualization loads data via d3.csv, converts numeric fields, and applies d3.scaleLinear to map values to pixel coordinates. D3 axes (d3.axisBottom and d3.axisLeft) are appended to an SVG canvas, with circles rendered using the enter selection pattern.

Task2 Q2.1

task8 Q2 1

This visualization shows the estimated religious breakdown of the 20 most populous countries in 2010, using stacked bars where each segment represents a religion’s population. The chart uses D3’s `stack()` and `flatRollup()` to structure the data, with `scaleOrdinal` and `schemeCategory10` for colors. Hovering over the color legend highlights that religion across all bars via `mouseenter` and `mouseleave` events, dimming other segments. Data originates from the Pew Research Center’s Global Religious Landscape report.

TAsk8 Q2 1

A stacked bar chart displays the estimated population by religion for the 20 most populous countries in 2010, based on data from `religionByCountryTop20.csv`. Each bar represents a country, segmented by religious affiliation, with a color legend for each religion. The chart uses D3's `scaleOrdinal`, `schemeCategory10`, `stack`, and `flatRollup` for data processing and layout. Hovering over a legend item highlights that religion across all bars and fades the others.

task 8 Question 2 1

This visualization displays personal electricity consumption across multiple accounts over two years, using stacked bars to show total kilowatt-hours per month. Built with D3.js, it uses `d3.stack` to transform the data into a stacked format, `scaleBand` and `scaleLinear` for axes, and `scaleOrdinal` with `d3.schemeCategory10` for coloring. The chart is rendered as SVG, with hover effects that change bar opacity and a `<title>` tooltip showing the exact kWh value for each segment.

TAsk8 T2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each genre as a horizontal bar broken into five rating segments from below 5.0 to above 8.5. Hovering over a segment reveals a tooltip with the exact percentage for that rating category within the selected genre. The visualization is built using D3 v7, employing `d3.stack()`, `d3.scaleLinear()`, and `d3.scaleBand()` to construct coordinates, while the data comes from a local CSV file containing genre and rating percentage values, rendered as SVG rectangles.

Task8 Q1 2

This chart displays the 2010 population of 20 countries as a horizontal bar chart, with each bar’s length proportional to population. The SVG is rendered using React, with D3 v5’s `scaleBand` and `scaleLinear` mapping countries and population values. The code fetches CSV data via D3’s `csv` method, formats axis ticks using `d3.format`, and includes tooltips via SVG `<title>` elements. Axes are custom components drawing ticks and labels, with light green bars styled via CSS.

Task8 Q1 1

This visualization displays the populations of ten countries in the year 2000 as horizontal bar charts, sorted by country name along the y-axis. The data is loaded from a CSV file and rendered as SVG rectangles. Using D3 v5 scale functions and React components, the chart formats axis ticks with a custom SI formatter, converting values like "1.2G" to "1.2B". Tooltips on each bar show the formatted population value, and the axes and labels follow a clean, green-on-gray aesthetic.

Activity 8 Hello VizHub

This example displays a horizontal bar chart of population data for 30 countries in 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, with axes generated through custom `AxisBottom` and `AxisLeft` components. Tooltips appear on each bar showing the formatted population value.

task8

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha122

This example displays a dense, chaotic array of colored, semi-transparent polygons rendered atop a detailed vector path of Buddha. The polygons are generated procedurally using nested loops and randomized parameters, with coordinates, RGB fill values, and rotation transforms all derived from JavaScript’s `Math.random()`. The fixed Buddha path is drawn using SVG `<path>` data and scaled within a `<g>` group. The piece is built with React, rendering to SVG on a green background, and the source code includes test data arrays and a cubic function, though these do not visibly affect the output.

1 fork budha

This example renders a dense, chaotic Buddhist-inspired mandala by layering thousands of semi-transparent, randomly colored polygons, generated through triple-nested array maps that compute each vertex position with `Math.random()`. The static composition centers on a detailed Buddha silhouette drawn as an SVG path, with both elements placed inside a React component and output as SVG elements. The code imports React and ReactDOM, uses fixed dimensions for the viewport, and applies rotation and opacity transformations to the polygons, resulting in an abstract, generative backdrop behind the iconic figure.

Fork of budha

A dense field of small, randomly colored circles overlays a large, black Buddha silhouette drawn as an SVG path. The circles are generated through three nested `Array.map` loops over a fixed array, with their positions and fill colors determined by `Math.random()`. The Buddha figure is rendered using a single SVG `<path>` with a translucent stroke, while the entire composition is built with React and rendered to the DOM via `ReactDOM`. The visualization relies solely on SVG primitives and React's declarative component model.