kesava

@ontipulikesava153·15 public vizzes

Activity_7 Q2

This area chart displays supermarket sales totals aggregated by product line, using a steelblue filled path to show the distribution of revenue across six product categories. The visualization loads data from a remote CSV file and processes it with d3.rollups to sum the Total field for each product line, then sorts the categories alphabetically. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.area to generate the path, with d3.axisBottom and d3.axisLeft providing labeled axes.

Nov 7, 2024

Loading thumbnail…

Activity 7.1 Q1

This example visualizes total daily minutes spent on various social media platforms as a pie chart. It loads data from a CSV file hosted on GitHub, processes it by summing the `Daily_Minutes_Spent` per `App`, and renders SVG paths using `d3.pie` and `d3.arc`. A legend is added with colored rectangles and labels. The code specifically uses D3 v5 APIs such as `select`, `csv`, `scaleOrdinal`, and the pie/arc generators.

Nov 6, 2024

Loading thumbnail…

Activity 6 Task 4 Q9

This example loads the classic Iris dataset from a remote CSV file and renders a bubble chart using D3.js v7 with SVG. It plots sepal length on the x-axis and sepal width on the y-axis, while the size of each circle encodes petal length through a `d3.scaleSqrt`. The chart includes axes generated with `d3.axisBottom` and `d3.axisLeft`, along with custom axis labels. Circles are filled with semi-transparent steelblue and the code fetches data asynchronously via `d3.csv`.

Oct 25, 2024

Loading thumbnail…

Activity 6 Task 4

A bubble chart with a legend shows the correlation between average horsepower, torque, and highway MPG for various car makes. Data points are plotted with x/y axes for horsepower and torque, while bubble size and color encode MPG and car manufacturer. Tooltips reveal car make on hover. The visualization is built with D3.js, using `d3.scaleLinear` for axes and bubble sizing, and `d3.interpolateTurbo` for the color scale.

Oct 25, 2024

Loading thumbnail…

Activity 6 Task3 Q6

This example shows a scatter plot of categorical data from a CSV file, with each point colored by category and positioned by valueX and valueY. It uses D3 v7 to load the data via `d3.csv` and `d3.autoType`, then renders SVG circles with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. The axes are generated with `d3.axisBottom` and `d3.axisLeft`, and labels for both axes are added as SVG text.

Oct 25, 2024

Loading thumbnail…

Activity 6 Task-3.2

A scatter plot displays Iris flower measurements, mapping sepal length along the x-axis and petal length along the y-axis, with each species distinguished by a different symbol shape from the `symbolsFill` scale. The example uses D3 v7 modules including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, plus custom local ES6 modules for axes and a shape legend. Data loads asynchronously from a remote CSV file via `fetch` and `csvParse`, with numeric fields coerced for plotting.

Oct 25, 2024

Loading thumbnail…

Activity 6 Task-3.1

This example displays a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The visualization is rendered as an SVG via D3 v6, loaded from UNPKG, using `d3.csv` to fetch the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` for tick marks. The code also includes redundant `rx`/`ry` attributes on the circles, though the radius is fixed at 5 pixels.

Oct 25, 2024

Loading thumbnail…

Activity_6_Question 2.3

A stacked bar chart displays regional product sales, with each bar segmented by product category (productA, productB, productC) and colored via a categorical scale. The visualization loads CSV data with d3.csv and d3.autoType, then uses d3.stack to compute the stacked series. d3.scaleBand maps regions to x positions, d3.scaleLinear maps sales values to y positions, and d3.axisBottom and d3.axisLeft render the axes. A legend groups color swatches and labels, while the SVG output is generated entirely in d3.v7.

Oct 25, 2024

Loading thumbnail…

Activity_6 Task-2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. The chart shows the percentage of movies falling into five rating brackets, from "below 5.0" to "above 8.5", with each genre represented by a single bar divided into colored segments. The visualization loads data from a CSV file and uses D3 v7 APIs including `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to compute stacking, assign colors, and position bars. Interactive tooltips display exact percentages on mouseover, implemented with D3 event handlers.

Oct 25, 2024

Loading thumbnail…

Activity 6 Question 1.2

This example displays a horizontal bar chart of 2010 population data for 20 countries, with bars sorted by country name along the y-axis and population values on the x-axis. Using React with D3 v5, it loads CSV data via `d3.csv`, scales the population with `scaleLinear`, and positions bars with `scaleBand`. Tooltips appear on hover via SVG `<title>` elements, while custom `AxisBottom` and `AxisLeft` components render ticks, and axis labels are formatted with `d3.format`.

Oct 25, 2024

Loading thumbnail…

Activty 6 Question 1.1

This example displays a horizontal bar chart of population data for ten countries in the year 2000, sourced from a CSV file loaded via `d3.csv`. The React application uses `scaleBand` and `scaleLinear` from D3 v5 to position bars and axes, while rendering SVG elements through React components. Axis ticks are formatted with `d3.format` to abbreviate large numbers, and hover tooltips are provided via SVG `<title>` elements. The chart includes custom axis components and a labeled x-axis with styling defined in the HTML stylesheet.

Oct 25, 2024

Loading thumbnail…

Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, ordered by country name, with green bars and blue axis lines. The visualization loads a CSV file from a GitHub gist using D3's `csv` function, then renders the data as SVG rectangles via React. D3's `scaleBand` and `scaleLinear` position the bars, while custom `AxisBottom` and `AxisLeft` components generate ticks using D3's `ticks` and `domain` methods. Population values are formatted with D3's `format` function using the SI format to abbreviate large numbers.

Oct 25, 2024

Loading thumbnail…

Fork of Activity_8_Question-1.1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000. The chart uses D3 scales (scaleBand and scaleLinear) to position bars and axes, with React components handling the SVG rendering. Data is loaded from a remote CSV file via d3.csv, and tooltips display formatted population values using d3.format.

Oct 22, 2024

Loading thumbnail…

6 Buddhas

A single large SVG displays six overlapping Buddha silhouettes, each rendered as a complex path filled with layered, translucent hues. The composition is generated by React components that build SVG paths using static coordinate data, with the array `A` and cubic functions defining shape variations. The code applies random colors and rotations through SVG attributes, while a floral background image is set via CSS. React 16.10 and ReactDOM manage the rendering, with the entire 960 by 1000 pixel visualization contained in a single `<svg>` element.

Oct 19, 2024

Loading thumbnail…

5 Buddhas

The visualization depicts five overlapping Buddha silhouettes rendered in vibrant, shifting colors against a black background. The main image uses a detailed SVG path, while a nested React map function generates 21 layers of rotated, semi-transparent polygons with random fill colors, creating a dynamic, textured aura around the central figure. The code imports React and ReactDOM, and renders the entire scene directly into an SVG canvas, with the Buddha path transformed and scaled for composition.

Oct 19, 2024