C

charanshiva769@gmail.com

@Shivacharan769·25 public vizzes

Loading thumbnail…

Activity 7 Question 2

This area chart displays expense amounts by subcategory, using a steelblue filled area beneath a solid line. The visualization loads a CSV dataset via D3’s `d3.csv` fetch, maps subcategories to a point scale on the x-axis and amounts to a linear scale on the y-axis, and generates the area and line paths with `d3.area` and `d3.line`. Rotated x-axis labels and axis annotations are added with `d3.axisBottom` and `d3.axisLeft`, all rendered as SVG within an HTML canvas.

Loading thumbnail…

Activity 7 Question 1

This example shows a classic pie chart built with D3.js, where each slice represents a category from a CSV dataset loaded remotely via `d3.csv`. The chart uses an ordinal color scale, and a legend lists each category alongside its subcategory. The code generates SVG paths with the `d3.arc` and `d3.pie` generators, and includes placeholder axis labels despite being a pie chart. The visualization renders entirely in SVG, with the legend placed to the right of the chart and a white stroke separating each slice.

Loading thumbnail…

Activity 7 tutorial

This interactive scatter plot visualizes the Iris flower dataset, animating through different combinations of sepal and petal measurements. The visualization cycles through four variable pairings every few seconds, with points colored by species (setosa, versicolor, virginica) and accompanied by a legend and axis labels. Built with D3 v6, it uses `d3.csv` for data loading, `scaleLinear` and `axisLeft`/`axisBottom` for scales and axes, and `setInterval` to trigger re-renders of the reusable `scatterPlot` function.

Loading thumbnail…

Activity-7 tutorial

This example demonstrates a reusable scatter plot of the Iris dataset, cycling through four different feature pairs on the axes. The plot uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while colored circles distinguish species. An animation via `setInterval` updates the x-axis variable every few seconds, and the visualization includes a title, axis labels, and a legend. The code employs D3’s `csv` loader, `select`, and data joins, with SVG rendering for the chart and animation.

Loading thumbnail…

Activity-6_Question-4

This bubble chart shows the relationship between engine cylinders, displacement, and city MPG for various car brands, with each bubble’s position encoding cylinder count and displacement while its size maps to city MPG. Color distinguishes brand, and hovering reveals the brand name via a tooltip. The visualization uses d3.csv to load data, d3.scaleLinear for positioning and sizing, d3.scaleOrdinal with d3.interpolateTurbo for color, and d3.axisBottom/axisLeft for axes. It includes a legend for bubble size and brand colors, rendered as SVG circles with mouse event handlers for interactivity.

Loading thumbnail…

Activity 6_task 1

This visualization displays the population of 30 countries in 2010 using a horizontal bar chart. The bars are rendered as SVG rectangles, with the x-axis representing population values and the y-axis listing country names. The chart uses D3 v5's `scaleBand` and `scaleLinear` functions to map data to coordinates, with React components for the axes and marks. Data is loaded from a CSV file using D3's `csv` function, and the x-axis labels are formatted using the `format` function to abbreviate large numbers.

Loading thumbnail…

Activity-6_task-2

This visualization shows the distribution of IMDb movie ratings across six genres, displayed as a horizontal stacked bar chart. The chart breaks down each genre into five rating categories, from below 5.0 to above 8.5, showing the percentage of movies in each segment. The code loads data from a CSV file and uses d3.stack() to compute the stacked segments, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment, while a color legend distinguishes the rating categories.

Loading thumbnail…

Activity-6_Question_4

A bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various automobile makes, with bubble size encoding MPG and color distinguishing brands. It uses D3.js v7 with SVG rendering and animation, reading data from a CSV file. Interactive tooltips display the car make on hover, while a legend explains bubble size and a color scale maps each brand to a unique hue via `d3.scaleOrdinal` and `d3.interpolateTurbo`.

Loading thumbnail…

Activity-6_task-4

This animated SVG bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes. Each circle’s position maps horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG and color distinguishes the make. Hovering reveals a tooltip with the make name. Built with D3.js v7, the chart uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color, and includes a legend for MPG values and makes. Data comes from the included CSV file.

Loading thumbnail…

Activity-6_task-4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with circle position encoding horsepower and torque, while radius represents MPG. Hovering a circle reveals the car make via a tooltip. The chart includes axes, labels, and legends for MPG values and color-coded makes. Built with D3 v7, it uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateTurbo` to render SVG circles and interactive tooltips.

Loading thumbnail…

Fork of Activity-6_Question-3

A scatterplot displays the relationship between horsepower and engine size for 44 vehicles, with each point colored by model year. The code uses d3.select, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal with schemeDark2 to build the SVG chart. A grey inner rectangle frames the plotting area, and a legend identifies years as “Generation” labels. The data comes from a CSV file containing car specifications loaded via d3.csv.

Loading thumbnail…

Activity-6_Question-3

This scatter plot visualizes vehicle attributes, displaying horsepower on the x-axis and engine size on the y-axis for a dataset of car models from various years. Each circle represents a vehicle, with its color indicating the model year, differentiated through a legend at the right. The visualization is rendered as an SVG using the D3.js library, specifically utilizing `scaleLinear` for axis scaling and `scaleOrdinal` with the `schemeDark2` palette for color encoding. The code uses D3's `select`, `axisBottom`, and `axisLeft` functions to construct the chart within a gray inner rectangle.

Loading thumbnail…

Activity-6 Question-3

This scatterplot displays vehicles’ engine size against horsepower, with each point colored by weight. The visualization uses D3’s scaleLinear for axes, scaleOrdinal with schemeDark2 for the categorical weight legend, and axisBottom/axisLeft for ticks. Circle radius and opacity are fixed values. The data comes from a CSV file, rendered as an SVG with a gray inner rectangle behind the plotted points.

Loading thumbnail…

Fork of Activity-6_task-3.2

This fork of Activity-6_task-3.2 displays the classic Iris flower dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis. The code uses the d3 library's `scaleLinear`, `scaleOrdinal`, and `symbolsFill` APIs to render points, with each species represented by a distinct shape. A legend clarifies the shape-species mapping, while axes and labels are drawn using `axisLeft` and `axisBottom`. Data is loaded from a remote CSV file and parsed with `csvParse`.

Loading thumbnail…

Activity-6_task-3.2

This example displays a scatter plot of the Iris dataset, mapping sepal length against petal length and encoding species using different symbol shapes. The visualization includes labeled axes and a custom shape legend, rendered with D3 v7. Data is loaded asynchronously via CSV parsing, and the code uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to generate marks, while d3.axisBottom and d3.axisLeft create the axes.

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example shows the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each of the three species distinguished by a unique D3 symbol shape. A legend identifies the species shapes, while labeled axes provide context for the measurements. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shapes, and modularized functions for rendering axes, the shape legend, and scatter plot marks. The data is loaded as CSV and parsed with `d3.csvParse`.

Loading thumbnail…

Activity-6_task-3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and width, with points colored by species (setosa, versicolor, and virginica). The visualization uses D3.js version 6.7.0, loading data from a GitHub gist via the `csv` function. It employs `scaleLinear` for both axes, `extent` to compute domains, and `axisLeft` and `axisBottom` for chart axes. The SVG rendering maps each data point to a circle with a fixed radius, while the color logic uses a switch statement based on the species field.

Loading thumbnail…

Fork of Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while encoding species with color-coded circles. Each point’s radius is fixed, but the SVG circle’s `rx` and `ry` attributes are redundantly set to sepal dimensions, though visually overridden by the uniform `r` value. The visualization uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render axes with `d3.axisLeft` and `d3.axisBottom`. Axis labels are manually positioned, and the chart fills the browser viewport with margins.

Loading thumbnail…

Activity-6 Question-2

This example presents a stacked bar chart of city ratings, showing the percentage distribution across rating categories (from below 4.0 to above 8.0) for 19 U.S. cities. The visualization uses a horizontal layout with a color-mapped legend on the right. Built with D3 v7, the code loads data from a CSV file via `d3.csv` and employs `d3.stack()` to compute the stacked segments, `d3.scaleBand()` for the y-axis city categories, and `d3.axisBottom()` for the x-axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment.

Loading thumbnail…

Activity-6_Question-2

This stacked bar chart displays the distribution of fruit ratings across five sweetness categories, from "below 5.0" to "above 8.5", with each fruit represented as a horizontal bar segmented by rating percentage. The visualization uses d3.stack() to compute cumulative values, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Interactive tooltips reveal the exact percentage for each rating segment on mouseover, while an ordinal color scale assigns distinct hues to each category.

Loading thumbnail…

Fork of Activity 6_task 1

This example shows a horizontal bar chart of 2010 population data for 20 countries, ranked from largest to smallest. The chart uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, rendering bars as SVG rectangles via React components (AxisBottom, AxisLeft, Marks). Population values are formatted using d3.format with a custom tick label conversion from G to B, and a native SVG `<title>` element provides tooltips. Data is loaded asynchronously from a remote CSV file using d3.csv.

Loading thumbnail…

Activity 6_task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked by population. The visualization uses D3 v5 scale functions (scaleBand and scaleLinear) to map data to SVG coordinates, with React components handling rendering of axes and marks. Data is loaded from a CSV file via d3.csv, and population values are formatted with d3.format.

Loading thumbnail…

6 buddha

Six glowing Buddha silhouettes overlap in a colorful, abstract composition. The code uses React to render SVG paths and randomly generated circles with varying opacity. Built with React and ReactDOM, it maps arrays to create layered elements, while the SVG path data draws the Buddha figure. The visualization relies on procedural generation for its vibrant, unpredictable color palette and positioning.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A layered, multicolored Buddha figure emerges from hundreds of overlapping circular paths. The visualization uses React to render an SVG, repeatedly mapping an array to generate transparent, randomly colored `<null>` elements that stack over a detailed Buddha path. The overlapping circles create a dense, textured mosaic effect, while the central path provides structural form beneath the chaotic color field.

Loading thumbnail…

Buddhas

The visualization displays six purple Buddha silhouettes, each path drawn from an SVG path string, arranged in a diagonal cascade across a flower-backgrounded page. Using React for structure and D3.js to select the SVG container, it appends a group per reflection with translating and scaling transformations, creating a repeating, diminishing series. The paths are directly embedded in the code rather than loaded from external data.