R

ragasrikakarla27@gmail.com

@Ragasri07·22 public vizzes

Loading thumbnail…

ACTIVITY 7.1 Q2

This visualization shows monthly average temperatures for U.S. states in 2024, with an interactive multi-select list to choose which states to display. It renders both area charts and overlaid line paths for each selected state, using a color-coded legend and tooltips on hover. The code uses D3 v7 APIs including `d3.area`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.csv`, and `d3.axisBottom` to load synthetic temperature data from a remote CSV and render animated SVG paths. Users can show the top eight states or clear the current selection.

Loading thumbnail…

Activity_7.1

This visualization presents a pie chart of Stranger Things character popularity, with data aggregated from a 2025 CSV dataset. It uses D3.js v7 to render the full-circle chart as SVG, with slices colored via `d3.scaleOrdinal` and `d3.schemeTableau10`. The code groups characters with less than 2% of total popularity points into an "Other" category, and labels slices with percentages where they exceed 3%. A separate HTML legend lists each character’s name, percentage, and raw point value.

Loading thumbnail…

Q4

This bubble chart maps 12 best-selling video games by critic score on the x-axis and user score on the y-axis, with bubble area scaled to global sales (in millions) using d3.scaleSqrt. Each point is colored by genre. The chart uses d3.v7’s selection, scale, and append methods to build an SVG, with axis labels, a legend, and a hover tooltip for details. Data is a small custom set of well-known games.

Loading thumbnail…

Bubble chart tutorial

This bubble chart uses D3.js v7 to visualize the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size) across 31 car makes. Each semi-transparent circle is colored by manufacturer using an ordinal scale with interpolated turbo colors. The SVG rendering includes interactive tooltips that appear on mouseover, along with legends for both bubble size and color categories. Data is loaded from a CSV file via d3.csv.

Loading thumbnail…

ACTIVITY 6 Q3

This scatter plot visualizes the relationship between average temperature and humidity across ten cities, with each point colored by continent. The visualization uses D3 v7 to render SVG circles, with `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for the categorical color mapping, and `d3.axisBottom`/`d3.axisLeft` for the tick marks. A static legend groups the five continents, while the data comes from a hardcoded array in the script.

Loading thumbnail…

Activity06 Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, comparing sepal length against petal length. Each flower species is distinguished by both color and shape: circles for setosa, triangles for versicolor, and diamonds for virginica, using d3.scaleOrdinal with d3.symbol types. The visualization loads data from a remote CSV file and renders points as SVG paths via d3.symbol, with a custom legend generated by the shapeLegend function. The axes are created using d3.axisBottom and d3.axisLeft, and the chart is styled with CSS, including a white background and rounded corners.

Loading thumbnail…

Raga Scatter Plot with Shape

This example presents a scatter plot of the Iris dataset, comparing petal length against sepal length. Each data point is rendered as a distinct shape, with the species of the flower determining the symbol type. The visualization includes axis labels for “Sepal Length” and “Petal Length,” alongside a legend that maps the three species to their respective shapes. The chart is built using D3 v7, employing `scaleLinear` for the x and y axes, `scaleOrdinal` for the shape mapping, and a custom legend created with `symbol`. The data is loaded from a remote CSV URL and parsed using `csvParse`.

Loading thumbnail…

Activity 7 Scatter Plot_Raga

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species. The visualization uses D3 v6 to load CSV data, apply linear scales, and render circles as SVG marks. Axes are drawn with `axisLeft` and `axisBottom`, and the chart includes a title and axis labels. The mark color is determined by a custom switch on the species value, and point radius remains constant.

Loading thumbnail…

Question 2

This stacked bar chart visualizes energy consumption by source across five countries (USA, China, India, Germany, Brazil) for 2023. The chart uses D3 v7 with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering stacked segments via `d3.stack().keys()` to represent Coal, Oil, Natural Gas, Renewable, and Nuclear proportions. Data loads from `energy_data.csv` using `d3.csv()`. A legend, generated with SVG groups, identifies each energy source, while custom colors are assigned through `d3.scaleOrdinal`.

Loading thumbnail…

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across different genres, using a 100% stacked horizontal bar chart. Each genre (Documentary, Drama, Comedy, etc.) is represented by a bar composed of segments corresponding to rating categories (below 5.0 to above 8.5), with segment lengths proportional to the percentage of movies in that rating band. Rendered as an SVG using D3 v7, the chart employs `d3.stack()` to compute the stacked segments, `d3.scaleBand` for the y-axis genres, and `d3.scaleLinear` for the x-axis percentages. A tooltip displays the exact percentage when hovering over a segment, and the data is loaded from `data.csv`.

Loading thumbnail…

Activity6_Task2

This example uses D3.js to display a simple text message in the center of the page. The code imports the `select` function from D3 and uses it to set the text content of a div element with the ID `message`. The message text is provided by a separate ES6 module, demonstrating modular code organization. The page includes the D3 library via a CDN and applies large font styling through an external CSS file.

Loading thumbnail…

Fork of Q1.2

This visualization shows the population of ten countries for the year 2000 as a bar chart, with country names on the x-axis and population counts on the y-axis. The chart loads data from a local CSV file using `d3.csv()` and renders the bars as SVG rectangles. Axes are generated with `d3.axisBottom()` and `d3.axisLeft()`, while the x-axis labels are rotated to avoid overlap. The bars use a teal color that darkens on hover.

Loading thumbnail…

Q1.2

A bar chart displays the 2000 population totals for ten countries, ranging from China's 1.26 billion to Nigeria's 124 million. The visualization uses D3.js v7 with an SVG rendering approach, loading data from a CSV file. It applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the population y-axis, with rotated axis labels and hover effects on the bars.

Loading thumbnail…

Fork of Q1.1

A horizontal bar chart shows the population of ten countries in the year 2000, using static SVG rectangles colored in steel blue. The visualization ranks countries by population value, with China and India leading the dataset. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis categories, and d3.axisBottom and d3.axisLeft to render the axes. The chart displays hardcoded population data and includes a title and x-axis label, with styling applied via external CSS.

Loading thumbnail…

Q1.1

A horizontal bar chart compares the year-2000 populations of ten countries, using data from Activity6_Population.csv. The chart uses D3 v7 to load and parse the CSV, filtering rows for the year 2000. A `d3.scaleLinear` maps population values to the x-axis, while a `d3.scaleBand` positions the categorical country labels on the y-axis. Rectangles are appended and sized based on the scaled population values, with axis labels and tick formatting applied via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

ACTIVITY_06

This visualization shows the populations of 30 countries in 2020 as a horizontal bar chart, ranked by country name on the y-axis and population magnitude on the x-axis. The code loads CSV data via d3.csv, scales the population values into billions, and renders SVG bars using React components for the axes and marks. It uses d3.scaleBand and d3.scaleLinear for positioning, with tooltips formatted via d3.format. The data source is a raw GitHub-hosted CSV file, and the chart is styled with blue axis lines and green bars.

Loading thumbnail…

ACTIVITY_06

This example displays a simple text message, “Hello VizHub!”, centered on the page in large type. It demonstrates fundamental D3.js usage by selecting a DOM element with `d3.select` and setting its text content. The page structure comes from an `index.html` file that loads D3 v6 from a CDN and links a stylesheet, while the JavaScript logic is split into modules: `index.js` imports a string from `myMessage.js` and assigns it to the `#message` div, with `styles.css` controlling the text alignment and font size. No data visualization or complex rendering is involved.

Loading thumbnail…

ACTIVITY_06

This example displays a single centered message, “Hello VizHub!”, rendered in large text using D3’s `select` method to target a `div` and set its text content. The code imports a constant from an ES6 module and relies on basic DOM manipulation rather than complex data binding. Styling is applied via an external CSS file, with font size controlled through the `#message` selector. The visualization serves as a minimal starter template, demonstrating static text output without interaction or data-driven elements.

Loading thumbnail…

ACTIVITY_06

This example presents a horizontal bar chart comparing the populations of 30 countries in the year 2020. Each bar's length represents a country's population, and the data is sourced from a remote CSV file. The visualization is built with D3 v6 and React, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `format` to display values in billions. The chart is rendered as an SVG, with custom components for axes and data marks, and includes a tooltip that formats population values for clarity.

Loading thumbnail…

Fork of 6 Budhas

This example renders a decorative composition of six Buddha figures, each drawn as a single, complex SVG path. The paths contain hard-coded coordinate data and are placed within the visualization using different translation and scale transformations. The code uses React with `react-dom` to construct the SVG elements, while the background is set via CSS using a flower image. The underlying data is not dynamic or fetched, but rather embedded directly in the source code as static path definitions.

Loading thumbnail…

6 Budhas

Six buddha silhouettes rendered as black SVG paths appear in a two-by-three grid against a floral background. Each path uses the same intricate `d` coordinate data, scaled and translated via SVG group transforms to create a repeated meditative motif. The React component builds the visualization declaratively, with each path filled in black and outlined with a white stroke, while the body’s background image and CSS styling set the scene.

Loading thumbnail…

5 Budhas

Five Buddha-like figures emerge from a black background, each composed of hundreds of semi-transparent, randomly colored polygons. The SVG visualization is built with React and ReactDOM, generating a grid of nested maps that produce the polygon elements. Each polygon's position, fill color, and rotation are determined by random values and a cubic function applied to an array of numbers. The primary visual feature is a single complex path representing a Buddha silhouette, scaled and translated within the composition.