aravapalliharika2002@gmail.com

Activity7_Q2

This area chart tracks website visits by month throughout 2023, with the data loaded from a CSV file via `d3.csv`. The visualization uses `d3.area()` with a band scale for months and a linear scale for visit counts, rendered as an SVG path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and both the chart area and axis labels are styled with steelblue fill and explicit text annotations.

Activity7_Q1

This pie chart visualizes the percentage usage of programming languages among developers, with data fetched from a raw CSV file hosted on GitHub. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to generate colored slices and percentage labels, while a custom legend built with SVG `rect` and `text` elements lists each language and its corresponding value. The visualization is rendered as SVG, with colors assigned from a predefined array and formatted with `d3.format`.

Activity7_q1

This example visualizes the co-occurrence of hashtags from a dataset of tweets, showing clusters of related tags through an interactive network layout. It uses D3’s `d3.forceSimulation` to position nodes and manage collision, while links are drawn with SVG lines. The data is loaded from a CSV file, and user interaction, such as dragging and collision behavior, is implemented via force settings and event listeners. The visualization also includes a hover effect that highlights a node’s connections, using D3’s selection and transition methods to update styles dynamically.

Activity7_Q1

This pie chart visualizes programming language usage by developers, with each language’s percentage labeled directly on its sector. The chart uses `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` assigns categorical colors. A legend on the right lists each language with its corresponding color and percentage value. Data is loaded as CSV from a GitHub gist, and percentages are formatted using `d3.format`. The SVG is fixed at 960×500 pixels, with the pie centered at (250, 250).

Activity_7-Q1

This example presents a D3.js pie chart visualizing categorical sales data loaded from a remote CSV file. The visualization uses `d3.csv` to fetch data, `d3.pie` to compute arc angles based on the Sales field, and `d3.arc` with an inner radius of zero to generate filled sectors. A `d3.scaleOrdinal` with `d3.schemeSet2` assigns colors to categories. The chart is rendered as SVG elements, with each path stroke outlined in white and semi-transparent opacity for visual distinction.

Nov 4, 2024

Activity6_Task3(q1)

This scatter plot shows the relationship between flipper length and body mass for three penguin species, with each point colored by species and a legend identifying the categories. The visualization uses D3.js v7 to load CSV data from a GitHub repository, apply linear scales for both axes, and render circles via SVG. Axis labels and a custom legend are added using D3’s selection and scale APIs, such as `d3.scaleLinear` and `d3.scaleOrdinal`, while the axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart filters out rows with missing or zero values before plotting.

Oct 23, 2024

Activity6_Task3(q)

This interactive scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each dot colored by species. The visualization uses D3.js to load CSV data from a GitHub repository, filter out records with missing values, and render the plot as SVG circles. Axes are scaled linearly using `d3.scaleLinear()` with domain extents computed via `d3.extent()`, while species colors are assigned through a categorical `d3.scaleOrdinal()` range. The chart includes labeled axes and a title, with points positioned via the `svg.selectAll('.dot')` pattern.

Activity6_Task4(q)

This bubble chart displays the relationship between total population and urban population across 35 countries, with bubble size encoding each nation’s yearly urban population change percentage. The visualization uses a categorical color scheme from Tableau to distinguish countries, accompanied by interactive tooltips that reveal precise figures on hover. Built with D3.js v7, the chart employs SVG rendering with three distinct scales: linear scales for both axes, a square-root scale for bubble sizing, and a legend for color coding. Data is loaded from a CSV file containing population statistics for global countries.

Activity6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s horizontal position represents horsepower, the vertical axis shows torque, and bubble size encodes highway MPG, while color distinguishes vehicle manufacturers. The visualization uses D3.js v7 with SVG rendering and animation. It reads data from a CSV file, employs `d3.scaleOrdinal` and `d3.interpolateTurbo` for coloring, and includes interactive tooltips on mouseover along with a legend for bubble size and categorical color mapping.

Activity6_Task 3.2

This example displays an interactive scatter plot of the Iris dataset, showing sepal length against petal length. It uses a D3-based SVG rendering pipeline with multiple ES6 modules. The visualization employs D3's `scaleLinear`, `scaleOrdinal`, `symbol`, and `csvParse` functions. It includes custom axis and shape legend components, with data loaded from a CSV file hosted on GitHub, and supports dynamic resizing to the viewport.

Activity6_Task3

A scatter plot visualizes the Iris dataset, mapping petal length and width for each sample as colored circles. The plot uses D3 v6 to load CSV data, scale linearly with `scaleLinear`, and render SVG circles, distinguishing three species via a switch statement for colors. Axes are created with `axisLeft` and `axisBottom`, and the visualization is displayed full-screen with window dimensions.

Activity-6_Task2(q)

This stacked bar chart shows monthly sales totals for five product categories—Electronics, Clothing, Furniture, Groceries, and Books—across January, February, and March. The data is loaded from a CSV file and rendered as SVG using D3 v7. The visualization uses `d3.stack()` to aggregate the three month values per category, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. A color scale distinguishes the months, and a legend in the top-right corner labels each segment.

Activity-6(q2)

This stacked bar chart compares horsepower, torque, and highway fuel efficiency across 31 car manufacturers. The data is loaded from a CSV file and rendered as SVG using D3.js v7. The chart uses stacked segments to show the cumulative value of the three attributes for each manufacturer, with a color-coded legend. The y-axis represents the total sum, while rotated x-axis labels identify each brand. The visualization employs D3's `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `stack` utilities, along with `axisBottom` and `axisLeft` for the axes.

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the proportion of films falling into five rating brackets from below 5.0 to above 8.5. Each genre’s horizontal bar is segmented by color, with hover tooltips revealing exact percentages. The visualization uses D3.js v7 with SVG rendering, employing `d3.stack()` for data transformation, `d3.scaleLinear()` and `d3.scaleBand()` for axes, and `d3.scaleOrdinal()` for color mapping. Data comes from a CSV file, and the chart includes custom fonts and styling via CSS.

Activity 6_Task 1(q2)

This example shows a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with D3 v5 functions `scaleBand` and `scaleLinear` for positioning and scaling, and `format` for tick labels. Data is loaded as CSV from a GitHub URL and processed with `csv` and native JavaScript array methods before being sliced to the top 20 rows.

Activity 6_Task 1(q2)

This horizontal bar chart displays the 2020 population estimates for 30 countries, ranked from largest to smallest. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with population values formatted in billions. Each bar is rendered as an SVG `rect` element, with axes generated by custom React components. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`.

Activity 6_Task 1 (q1)

This visualization displays population data for ten countries in the year 2000 as horizontal bars, using SVG rendering within a React framework. The chart encodes population values with bar length on a linear scale, while countries are positioned along a band scale. It loads a CSV dataset from a GitHub URL and formats population numbers in abbreviated form using D3’s `format` function, replacing ’G’ with ’B’ for billions. React components manage axes and marks, with D3’s `scaleBand` and `scaleLinear` handling the spatial mapping, and native SVG `<title>` elements provide tooltips.

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, loaded from a remote CSV via `d3.csv`. The visualization uses React components to render an SVG, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Axis labels and tick marks are generated with custom `AxisBottom` and `AxisLeft` components, and each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Buddha_Activity

A meditative portrait of the Buddha emerges from overlapping, multi-colored circular and star-like shapes, creating a tranquil, complex visual pattern. The piece uses React to structure the SVG canvas, with a map function generating clusters of circles based on a cube function of an array of numbers. A detailed SVG path defines the Buddha's silhouette as the focal point, while the background features a floral image via CSS and the body has a black background, offering a striking contrast to the vibrant, random colors.

Oct 18, 2024