P

pravallikachowdary16518@gmail.com

@Chavapravallika·18 public vizzes

Loading thumbnail…

Assignment 9(2)

This example shows monthly temperature averages in New York City from 2019 through 2020, using an area chart to highlight the cyclical rise and fall of temperatures across the calendar year. The SVG visualization, built with D3.v7, employs `d3.scaleBand` for the monthly x-axis, `d3.scaleLinear` for the temperature y-axis, and `d3.area` to generate the filled path with a steelblue color. Axis labels and a title are added via `d3.axisBottom`, `d3.axisLeft`, and text elements, with all data hardcoded in the script.

Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes monthly average temperatures in New York City, with months on the x-axis and temperature in degrees Fahrenheit on the y-axis. The SVG chart is rendered using D3 v7, loading data from a remote CSV file via the `d3.csv` API. The visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to draw the filled region, axes, and labels. The code also imports D3 functions and a local ES6 module to demonstrate VizHub’s module-loading capabilities.

Loading thumbnail…

assignment 9(1)

This pie chart visualizes the distribution of skills from the data_science_salaries.csv dataset, showing the count of each skill occurrence. The visualization uses D3 v7 to load and parse the CSV data via `d3.csv`, aggregate counts with `d3.rollup`, and generate the pie layout with `d3.pie`. The SVG rendering uses `d3.arc` to draw slices with colors from `d3.schemeCategory10`, accompanied by a legend showing skill names and counts.

Loading thumbnail…

Assignment 9(1)

This pie chart displays the distribution of data science salaries by skill category, showing the count of each skill in the dataset. The visualization uses D3.js v7 to load a CSV file from GitHub, aggregate skill counts with `d3.rollup`, and generate pie slices with `d3.pie` and `d3.arc`. A color legend, built with D3 selections, lists each skill alongside its corresponding count. The SVG rendering uses an ordinal color scale from `d3.schemeCategory10` to distinguish the categories.

Loading thumbnail…

Activity6 - Q4

A bubble chart displays electronics data, plotting screen size on the x-axis against price on the y-axis, where each circle’s radius encodes horizontal resolution. Built with D3 v7, it uses `d3.csv`, `d3.scaleLinear`, and SVG circles, with an interactive tooltip triggered by `mouseover`, `mousemove`, and `mouseleave` events. The chart animates opacity on hover, and axes are generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Activity 6-Task 3

This example presents a stacked bar chart that visualizes the religious demographics of various countries, using population as the quantitative value and religion as the categorical color scale. The chart employs D3.js version 7.8.5, leveraging its `scaleLinear`, `scaleBand`, `flatRollup`, and `stack` APIs to aggregate and structure the data from a CSV file. The visualization includes interactive hover effects on the legend, which highlights corresponding bars in the chart, and the axes are rendered using the `@curran/responsive-axes` module.

Loading thumbnail…

Activy6-Task3

This stacked bar chart displays the religious composition of populations across the top 20 countries, with each bar segment representing a religion’s population in millions. A color legend allows interactive highlighting: hovering over a religion dims other segments in both the chart and legend. The visualization uses D3’s `flatRollup`, `stack`, `scaleBand`, and `scaleLinear` APIs to structure the data and render the bars, while a custom `colorLegend` module manages the hover interactions. Population data comes from the included CSV file, and the chart is responsive via the `@curran/responsive-axes` library.

Loading thumbnail…

activity6_Task 5

This bubble chart visualizes the correlation between primary language, country, and category for major YouTube channels. The chart displays circles on a scatter plot, where the x-axis represents average country metrics and the y-axis represents average language metrics. Circle size encodes a third variable, while color distinguishes different channel categories. The visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal for color mapping with interpolateTurbo, and includes interactive tooltips on mouseover events. Data is loaded from a GitHub-hosted CSV file, with the chart rendered as SVG with animated transitions.

Loading thumbnail…

Activity6_task 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each bubble's x-position maps to horsepower, y-position to torque, and size to highway MPG, while color distinguishes car brands. Built with D3.js (v7), it renders as an SVG with animated transitions. The visualization includes axes, a bubble size legend for MPG values, and a tooltip that appears on mouseover. Data is loaded from a remote CSV file using `d3.csv`. The chart uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color, and `d3.interpolateTurbo` for the color palette.

Loading thumbnail…

activity 6_ task 6

This example visualizes advertising data from a CSV file, plotting TV spending against Radio spending using a scatter plot with colored circles that also encode Newspaper and Sales values through their radii. The visualization is rendered as an SVG using D3 v6, with scales created via `d3.scaleLinear` and axes generated through `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously using `d3.csv`, with each row parsed to numeric values before mapping to screen coordinates.

Loading thumbnail…

activity 6-Tas 3.2

This scatter plot displays the relationship between sepal length and petal length for three iris species, with points shaped by species type. Built with D3 v7, it uses `d3.scaleLinear` for continuous axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and `d3.axisLeft`/`d3.axisBottom` for tick marks. A custom legend module renders glyphs via `d3.symbol`, while data loads asynchronously from a CSV hosted on GitHub and is parsed with `d3.csvParse`.

Loading thumbnail…

Activity6-Tutorial 3

This scatter plot visualizes the Iris dataset, mapping petal length and width as the primary x and y coordinates while encoding sepal dimensions as elliptical radii. Data is loaded from a GitHub CSV via `d3.csv` and parsed before scaling with `d3.scaleLinear` and `d3.extent`. The SVG canvas renders colored circles per species using a switch-based color marker, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The chart fills the window, with labeled axes and a rotated y-axis title displayed in green.

Loading thumbnail…

Activity 6_Tutorial 2

This example visualizes the distribution of IMDb movie ratings across different genres as a stacked horizontal bar chart. Each bar represents a genre, segmented by rating categories (below 5.0 through above 8.5), with segment widths proportional to percentage shares. Built with D3 v7 and SVG, it uses `d3.stack()` to generate stacked series, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. Interactive tooltips on mouseover display the exact percentage for each genre-rating combination, using data from a provided CSV file.

Loading thumbnail…

Activity 6 - Task 1

This chart displays the population of ten countries in the year 2000 as horizontal bars, ordered by country name along the vertical axis. The data is loaded from a CSV file using the `csv` function from D3 v5. React components structure the SVG rendering, with `scaleBand` and `scaleLinear` mapping the data coordinates. Axes are drawn using custom React components, and formatted population labels use the `format` method to abbreviate values.

Loading thumbnail…

Activity 6 - Task 2

This example displays a horizontal bar chart of the top 20 countries by 2010 population, with a formatted x-axis using SI units to abbreviate large numbers. It loads the data from a CSV file using D3's `csv` function and renders the visualization as SVG elements within a React component. The code constructs the chart using D3's `scaleBand` and `scaleLinear` for axes, while custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the ticks and bars, with tooltips showing the exact population values.

Loading thumbnail…

Activity 6

This bar chart visualizes the 2020 population of 30 countries using a horizontal layout, with each bar’s length proportional to its population value. The visualization is built with the React framework, using D3 v5 utilities like `scaleBand` and `scaleLinear` for axes and layout, while rendering to SVG. Country names appear on the left axis, and a formatted tick label converts values to billions. Data is loaded from a remote CSV via `d3.csv`, and tooltips detail each bar’s exact population figure.

Loading thumbnail…

Activity 6

This example demonstrates the basic workflow of a VizHub project, showing how a web page can be assembled using D3.js and local ES6 modules. It presents a simple message, "Hello VizHub!", centered on the screen with large text styling. The code loads D3 v5 via UNPKG and uses the `select` API from D3 to target the `#message` div, setting its content from an imported `message` variable defined in a separate `myMessage.js` file. The example also includes a regular expression and a local CSS file for styling.

Loading thumbnail…

5 Buddhas

The visualization renders five overlapping Buddha silhouettes in vibrant SVG polygons on a black background. Built with React, it generates a grid of rotated, randomly colored diamond shapes using nested array maps and `Math.random()`. A detailed Buddha path is then scaled and positioned via SVG `transform` and `polygon` elements, creating a layered, abstract geometric composition. The code uses ReactDOM to mount the SVG container, with CSS handling the page styling.