KavyaEti

activity7.1

This example visualizes the distribution of weather conditions from a CSV dataset as a pie chart. It counts occurrences of each condition, then renders the chart using D3 v7's `d3.pie` and `d3.arc` APIs, with slices colored via `d3.scaleOrdinal` and `d3.schemeCategory10`. Labels display each condition near its slice, and a separate legend is built using `d3.select`. The SVG output is 600 by 600 pixels, with data loaded asynchronously via `d3.csv` from a GitHub Gist.

Nov 6, 2024

Activity-6 Task-3.1

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each flower species is color-coded, with setosa, versicolor, and virginica markers distinguished by hue. The visualization uses D3 v6 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a remote CSV, compute scales, and render SVG circles. It also attempts to set `rx` and `ry` attributes, although these have no effect on circles.

Activity-6 Q-9

A bubble chart visualizes manga and webtoon popularity by mapping the number of chapters on the x-axis, readers on the y-axis, and rating to bubble size, with genre encoding color. The D3.js v7 code loads CSV data and uses `d3.scaleLinear` for axes and bubble radius, plus `d3.scaleOrdinal` with `d3.schemeCategory10` for color. Interactive tooltips appear on mouseover, and an animated legend illustrates rating values using overlay circles.

Activity-6 task-4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for different car makes, with bubble size encoding MPG and color distinguishing each brand. Built with D3.js v7, the visualization uses SVG circles, a color scale based on `d3.interpolateTurbo`, and animated tooltips that display the car make on hover. A legend explains the MPG size mapping. Data is loaded from a CSV file (`bubblechart.csv`).

Activity-6 Q-6

This scatter plot visualizes the relationship between sweetness level and weight for four fruit types, with each fruit represented by a distinct shape and color. The visualization loads fruit data from a local CSV file and uses d3’s `csv` function to parse it, converting numeric fields. The chart is rendered using d3’s `scaleLinear` for both axes, `scaleOrdinal` for shape mapping, and `symbolsFill` for symbols. A custom shape legend, built with `symbol`, clarifies the fruit-type mapping. The axes, labels, and tick marks are generated through the `axes` module, which utilizes `axisLeft` and `axisBottom` from d3.

Activity-6 Q-6

This scatter plot displays the relationship between GDP and life expectancy for ten countries, with each country represented by a distinct symbol. The visualization uses D3.js scales and axes to map GDP on the x-axis and life expectancy on the y-axis, while a shape legend identifies individual countries. The plot loads data from a local CSV file containing GDP and life expectancy values, and renders symbols using d3.symbol with the symbolsFill range. The legend is generated through a custom shapeLegend function that iterates over the country domain.

Activity-6 Task-3.2

This example shows a scatter plot of the Iris dataset, plotting sepal length against petal length with points shaped by species. It uses D3 v7 modules including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol` with `symbolsFill` for shape encoding, and custom `axes` and `shapeLegend` functions. Data is fetched as CSV from a GitHub repository and parsed with `d3.csvParse`. The visualization updates responsively to the window size, with a legend positioned at a fixed coordinate.

Activity-6 Question-3

This visualization shows device sales across smartphone, laptop, and tablet categories for five brands using a horizontal stacked bar chart rendered as SVG. The chart uses d3.stack() to compute stacked segments, d3.scaleLinear() for the sales axis, and d3.scaleBand() for brand categories. Hover interactions trigger opacity changes and tooltips displaying exact sales values via a div element. Data comes from an embedded devices_sales.csv file with sales figures for Samsung, Lenovo, Nokia, Apple, and Google Pixel.

Activity-6 Q3

This example shows a stacked horizontal bar chart of manga readers by genre (Action and Romance) across five age groups, using data from a CSV file. It loads D3 v7 via UNPKG and renders SVG. The code uses `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart, with a custom tooltip on mouseover. A legend and axis labels are included, and colors differentiate the two genres.

Oct 23, 2024

Activity-6 Q3

This visualization shows a horizontal stacked bar chart comparing manga readership across five age groups, breaking down readers into Action and Romance genre categories. The code uses D3 v7’s `d3.stack()`, `scaleLinear`, `scaleBand`, and `scaleOrdinal` with a custom color palette to render the SVG. Interactive tooltips appear on mouseover, displaying the specific genre reader count for each segment. The chart includes axis labels, a title, and a legend, with data loaded from a local CSV file via D3’s data-binding methods.

Oct 23, 2024

Activity-6 Q3

This example shows a stacked bar chart of manga readership by genre and age group, sourced from a local CSV file. Each age bracket, from 10-19 to 50 and above, contains segments for action and romance readers, with bar lengths proportional to reader counts. The visualization employs D3.js v7 and renders via SVG, using `d3.stack()` to create the stacked layout, `d3.scaleOrdinal` for genre colors, and `d3.scaleLinear` and `d3.scaleBand` for axes. Tooltips display exact reader numbers on hover.

Oct 23, 2024

Activity-6 Task-2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the percentage of titles falling into five rating bands from below 5.0 to above 8.5. The visualization uses D3 v7 to load CSV data and render an SVG, with `d3.stack()` for data transformation, `d3.scaleOrdinal` for color encoding, and `d3.scaleBand` for the categorical y-axis. Interactive tooltips display exact percentages on hover, implemented through D3 event handlers.

Activity-6 Q1.1

This example shows a horizontal bar chart of population data for the year 2000 in ten countries, with the bars scaled linearly by population and labeled on a band scale for country names. The visualization is built with React and D3 v5, using `scaleBand`, `scaleLinear`, `max`, and `format` for axes and tick labels. It renders as an SVG, loads data from a CSV file via `d3.csv`, and includes tooltips on each bar showing the formatted population value.

Activity-6 Q1.2

This bar chart displays the population of 20 countries in 2010, sourced from a CSV file loaded via `d3.csv`. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rectangles represent each country, with `d3.format` providing tick labels that abbreviate large numbers. The chart includes styled axes with blue grid lines, and hover tooltips reveal precise values via native SVG `<title>` elements.

Activity-6

This example shows the populations of 30 countries in 2020 as horizontal bars. A bar chart uses a linear scale for population values on the x-axis and a band scale for country names on the y-axis. The visualization is rendered with React and D3 v5’s `scaleBand`, `scaleLinear`, and `format` APIs, drawing SVG rectangles as marks. Data loads from a CSV file, and tooltips display formatted population values.

Fork of Hello VizHub(Activity-6)

This example presents a horizontal bar chart ranking the 30 largest countries by their 2020 population, drawn from a CSV hosted on GitHub. The React components use `d3.csv` to load the data and rely on `xScale.ticks()` for the bottom axis and `yScale.bandwidth()` for bar heights and the left axis. Each bar is a `rect` element with a native SVG `<title>` tooltip showing the population value. The chart is built with D3 v5 and React, with axes and marks implemented as separate ES6 modules.

Fork of Blank Slate with Hot Reloading(activity-6)

This example demonstrates the VizHub V3 runtime environment, showing a "Hello World" text element whose font size is controlled by an interactive widget, allowing real-time adjustments via Alt-drag. The code uses React for rendering and D3.js for utility functions, with a custom AxisBottom component that generates tick marks for a scatter plot. The visualization is a blank slate starting point that showcases continuous hot reloading and streamlined entry points without an HTML file, using a main function that receives a container element and state management options.

Fork of Fork of Hello VizHub(Activity6)

This chart visualizes population data from a CSV file hosted on GitHub for the year 2020, rendering 30 rows as bars. The example shows a React application that combines D3.js utilities, including `d3.csv` for data loading and custom axis components that leverage `xScale.ticks()` to generate tick marks. The implementation imports D3 directly from UNPKG and uses local ES6 modules for the axes and data-fetching hooks. The visualization uses green bar marks with styled CSS for tick lines and labels, demonstrating integration of D3 transforms and React rendering in a static visualization.

Activity 6

This example shows a horizontal bar chart of population data for 30 countries in the year 2020. The chart uses React components for the axes and marks, with D3 scales for positioning. The bar lengths are proportional to each country’s population, and hovering over a bar reveals the exact value via a native tooltip. Data is loaded as CSV from a GitHub repository using `d3.csv`, and the chart is styled with light green bars, blue axis lines, and the Poppins font.

6 Buddhas

Six Buddha silhouettes drawn as layered SVG paths overlap over a floral background image, with each figure rendered in translucent random RGB colors atop a grid of small randomly positioned squares. The composition uses React components to generate repeated path elements and maps over arrays to create the dense background pattern. The visualization relies on React’s `createElement` and SVG primitives like `<path>` and `<g>` with transform scalings to produce the intricate, colorful meditative layout.

Oct 19, 2024

Fork of 5 Buddhas

This visualization renders an abstract composition of overlapping, rotated polygons generated from a triple-nested array map. The work, titled "Fork of 5 Buddhas," uses React and ReactDOM to construct an SVG canvas where each polygon’s position, fill color, and rotation are determined by random values, producing a chaotic, layered effect. The code also includes a large, detailed SVG path of a Buddha figure, scaled and translated within the same canvas, created from complex coordinate data. The result is a hybrid piece blending generative, colorful geometry with a structured, hand-coded silhouette.

Oct 11, 2024