praneeth.d555@gmail.com

activity7-question 2

This area chart illustrates the growth of global internet users from 1990 to 2023, with the y-axis representing users in millions and the x-axis showing years. The visualization uses a purple-to-pink gradient fill beneath the line to emphasize the upward trend. The code loads CSV data from a GitHub gist and renders the chart as an SVG using D3.js v7, employing `d3.area` for the filled region, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for tick marks and labels.

Nov 5, 2024

activity7.1-QUESTION1

This chart displays tourism revenue in billions of dollars for different destination countries as a pie chart with a custom legend. Each slice is colored using a pastel ordinal scale via `d3.scaleOrdinal`, sized by `d3.pie`, and drawn with `d3.arc`. Revenue values are labeled atop each slice. The chart reads CSV data from a GitHub gist and aggregates it with `d3.rollup` and `d3.sum`, rendering as SVG within an HTML page styled by CSS.

Nov 5, 2024

Activity6_Question4

This bubble chart visualizes the relationship between units sold, average price, and customer satisfaction for Samsung Galaxy smartphone models. Each circle’s position encodes price and units sold, while its radius and color represent customer satisfaction ratings and model identity, respectively. The visualization uses d3.csv to load data from a CSV file, with d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with d3.interpolateTurbo for coloring, and mouse events to display a custom tooltip. Animated transitions appear in tooltip opacity changes.

Activity6_task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes torque (y-axis) and horsepower (x-axis), while its radius scales with highway MPG and its color distinguishes the vehicle brand. Built with D3 v7, the SVG visualization includes hover tooltips that display the car make, plus a legend for MPG bubble sizes and color categories. Data is loaded from a CSV file using `d3.csv`, with scales created via `d3.scaleLinear` and `d3.scaleOrdinal` for mapping values.

Activity6_Question 3

This scatter plot displays real estate prices against square footage for 17 properties across European cities, with each city represented by a distinct color from the d3.schemeSet2 palette and labeled in a legend. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.scaleOrdinal for city colors. Interactive tooltips appear on mouseover using D3 transitions, showing city, size, and price. The SVG rendering includes axis labels, tick marks, and a color-coded legend positioned to the right of the plot area.

activity6_task3.2

This scatterplot displays iris flower measurements, plotting sepal length against petal length for three species. The visualization uses distinct D3 symbol types (circles, crosses, diamonds) to differentiate species, with a custom shape legend explaining the mapping. Data is loaded asynchronously from a remote CSV file and parsed using d3.csvParse. The chart is built with D3 v7, using scaleLinear for axes and scaleOrdinal with symbolsFill for shape encoding.

Activity6_task3.1

This scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements. Colored circles represent three iris species—setosa in sky blue, versicolor in light green, and virginica in orange—positioned by petal length and width. The visualization uses D3 v6's `scaleLinear` for axes, `extent` for data domains, and `axisLeft`/`axisBottom` for labeled scales. Data is loaded from a remote CSV via D3's `csv` parser, rendered as SVG circles, with species-specific colors assigned through a switch statement.

Que 1.1

This example shows a horizontal bar chart of population data for ten countries in the year 2000, using a React component that renders SVG via D3 v5. The visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with axis components built from D3’s tick and scale methods. Data is loaded asynchronously as CSV from a GitHub repository via `d3.csv`, and each bar’s value is displayed as a tooltip using SVG `<title>` elements. The chart includes formatted tick labels using `d3.format` to abbreviate large numbers.

Activity6_Task 1

This interactive horizontal bar chart visualizes the 2020 population of 30 countries, using D3 v5 within a React framework. The chart uses SVG rendering, with `d3.scaleBand` and `d3.scaleLinear` to map the categorical country names and numerical population values. Each bar’s length encodes the population data, with a tooltip displaying the formatted value in billions. The chart includes styled axes with blue tick lines and labeled tick marks, and a bottom axis label reading "POPULATION-2020". The data is loaded from a CSV file using D3’s `csv` function and displayed with a green bar fill.

Activity6_Question2

This stacked bar chart visualizes the distribution of music genre affinities for Tollywood singers, with each bar segment representing the percentage of a singer's connection to genres like Bollywood, Classical, Pop, Folk, Sufi, and Rap. The visualization uses d3.stack() to compute stacked segments, d3.scaleBand() for the categorical singer axis, and d3.scaleLinear() for the percentage scale. Mouseover interactions trigger opacity changes and a tooltip that displays the exact percentage for each genre-singer combination, with colors assigned via d3.scaleOrdinal(). The chart derives its data from the provided CSV dataset, rendering as an SVG.

Activity6_Task2

This stacked bar chart shows how movie ratings are distributed across genres, with each bar segment representing the percentage of ratings within a specific range. The visualization highlights that genres like Documentary and Drama tend to have higher ratings, while Action and Comedy skew toward lower scores. Built with D3 v7, the chart uses `d3.stack()` to create the stacked layout, `d3.scaleOrdinal()` for color coding, and `d3.scaleBand()` for the genre axis. Hovering over any segment triggers a tooltip displaying the exact percentage. The data comes from a CSV file with six genres and five rating brackets.

Que 3

This visualization displays a cluster of small colored dots scattered across a floral background image, generated by a React application. The App component renders an SVG canvas and maps over an array of numbers to create hundreds of overlapping circles with random positions and RGB fill colors. Using React 16.10 and ReactDOM, the code embeds a large SVG path depicting a detailed shape, which is transformed and layered over the randomized dot pattern. The output combines chaotic procedural elements with a structured path illustration.

Oct 19, 2024

Activity6_Task 1

This horizontal bar chart displays the top 30 countries by 2020 population, with country names on the y-axis and population values along the x-axis. The visualization uses React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. Data loads asynchronously from a GitHub-hosted CSV via `d3.csv`, and the bars render as SVG `<rect>` elements with tooltips formatted using `d3.format`.

Fork of Activity 7

This example shows a horizontal bar chart of population data for 30 countries in 2020. The chart uses a linear x-scale for population values and a band scale for country names, with each bar colored green. The visualization is built with React and D3 v5, using SVG rendering. The code defines reusable components for axes and marks, and loads data from a CSV file using D3's `csv` function, with a tooltip that formats population values using D3's `format` function.

Avtivity6_Task 1

This visualization presents a horizontal bar chart of population data for 30 countries, sourced from a CSV file loaded remotely via `d3.csv`. The chart orders the data from the original fetched set and renders each bar using React components, with `d3.scaleBand` and a linear scale positioning the bars and their lengths. Custom `AxisBottom` and `AxisLeft` components generate tick marks and labels, with the bottom axis formatting tick values. The chart is built with D3 v5 for data handling and scales while React handles the SVG rendering, demonstrating a hybrid approach where D3 provides utilities for data processing and scale calculations.

Fork of Activity 6_Task 1

This horizontal bar chart displays the 2020 populations of up to 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, leveraging `scaleBand` and `scaleLinear` to map data, SVG rectangles for the marks, and axis components that render ticks and labels. Population values are formatted using D3’s `format` function, converting large numbers to compact “B” (billion) notation for tick labels and tooltips. Data is loaded from a remote CSV file via `d3.csv`.

Activity 6_Task 1

This example demonstrates how to load D3 via UNPKG and use ES6 `import` statements to bring in both D3 API functions and local modules. The code imports `select` from D3 and a custom `message` function from a local ES6 module, then uses `select('#message').text(message)` to display the text "Hello VizHub!" in the center of the page. A stylesheet styles the message with a large 12em font, and HTML includes the D3 library from a CDN before executing the bundled JavaScript.

Activity 6

This visualization demonstrates how to set up a simple D3.js project within the VizHub environment. The example shows a basic web page that displays a large "Hello VizHub!" message using D3's `select` function to target the `#message` div. It illustrates importing both the D3 library via UNPKG and local ES6 modules, with the text content defined in `myMessage.js`. The code also includes CSS styling to center the text with a large font size.

Activity 6

5 Buddhas

Five layered Buddhas stack in a bright, multicolored SVG composition on a black background. Each figure is drawn with precise path data, while randomly generated polygons scatter across the canvas, creating a dense, kaleidoscopic texture. The work is built with React and ReactDOM, rendering polygons with random coordinates, fill colors from an RGB scale, and 45-degree rotations. Static SVG paths define the central Buddha shapes, repeated five times without animation or interaction.

Oct 12, 2024