S

Supriya Ravilla

@supriya455·23 public vizzes

Loading thumbnail…

ques2 supriya

This visualization displays a multi-series area chart comparing the proportions of different "makes" across categories, with each series represented as a filled area using a distinct color from the `d3.schemeCategory10` palette. The chart loads CSV data from a GitHub repository via `d3.csv`, then uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The `d3.area` generator defines the area shapes, while `d3.axisBottom` and `d3.axisLeft` render the axes. A legend with colored rectangles and text labels is added manually to the right of the chart.

Loading thumbnail…

ques1 supriya

This example shows a pie chart of car makes, with each slice sized by the car’s horsepower, and a color-coded legend on the right. It loads car data from a CSV file hosted on GitHub. The visualization is built with D3 v6, using `d3.csv` for data loading, `d3.pie` for computing slice angles, `d3.arc` for generating the SVG paths, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical colors, all rendered as SVG shapes.

Loading thumbnail…

hi

This example demonstrates a pie chart visualizing the distribution of different genres, with each slice labeled and accompanied by a color-coded legend. It is built using the D3.js library, importing functions such as `scaleOrdinal`, `pie`, and `arc` to generate the SVG rendering. The chart is configured with a width of 600 and height of 400 pixels, and the data, containing genres like Documentary, Drama, and Comedy, is passed to a modular `pieChart` function. The visualization highlights D3's capabilities for creating interactive and styled data representations.

Loading thumbnail…

hii

This example visualizes the distribution of movie ratings across five intervals, from “below 5.0” to “above 8.5,” as an area chart with a categorical x-axis and a proportional y-axis. The chart uses d3.area to draw the filled path, d3.scaleBand and d3.scaleLinear for the scales, and d3.axisBottom and d3.axisLeft to render the axes. A custom legend, built with SVG rectangles and text, maps each rating interval to a distinct color. The data is hardcoded as an array of objects, and the SVG is rendered with a light gray background and bordered container.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This fork demonstrates a reusable pie chart that visualizes the species counts from the Iris dataset, loaded via the `d3.csv` function. The chart renders as SVG using D3 v7 APIs, including `d3.arc` for arc path generation and `d3.pie` for computing arc angles from the count data. A categorical color scale maps each species to a distinct color, with an accompanying legend built through D3 selections. The visualization is encapsulated in a custom `pieChart` function, which accepts configurable width, height, margin, and color scale setters.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This example presents a reusable pie chart module built with D3.js. It shows species count data as a circular chart with colored slices, tooltips on each arc, and a legend with color swatches. The visualization uses the D3 `pie()` and `arc()` generators to compute and draw the arcs, and centers labels within each slice using `arcGenerator.centroid`. The chart’s dimensions and dataset are configurable through the module’s width, height, and data accessor methods.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This fork of the Reusable Scatter plot Activity 8 visualizes the distribution of iris flower species as a pie chart. The chart displays the count of each species, with each slice labeled by species name. The visualization uses D3.js version 6.7.0 and is rendered as an SVG. Data is loaded from a remote CSV file containing iris measurements, and the code uses `d3.csv` to fetch and parse the data, then custom functions to compute species frequencies and render the pie chart with specified width, height, and radius. The visualization is styled with CSS for text and axis labels.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

An animated scatter plot cycles through four Iris flower measurements, displaying petal width, sepal width, petal length, and sepal length on the x-axis while plotting petal width against sepal length on the y-axis. Circles are colored by species (setosa, versicolor, virginica) using the D3 `scaleLinear` and `axisBottom`/`axisLeft` APIs. The visualization uses D3 v6 to load the Iris dataset via `csv` and updates the chart every few seconds with `setInterval`.

Loading thumbnail…

que 4_ supriya

This interactive bubble chart visualizes the correlation between sepal length, sepal width, and petal length across three Iris species. Built with D3.js (v7) and SVG, it uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for species coloring, and includes hover tooltips that display species and petal length. Data is loaded from the local `iris.csv` file, with a legend showing species color assignments.

Loading thumbnail…

task_4 supriya

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle position encodes horsepower and torque on the x and y axes, while circle size represents highway MPG, and color differentiates car makes. Built with D3 v7 using SVG, it loads data from a CSV file and includes interactive tooltips on hover. The chart displays a legend for MPG values and car brands, with axes labeled and scales defined using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`.

Loading thumbnail…

Fork of que 3.2 supriya

This example demonstrates how to build a minimal web visualization using D3.js v5 and VizHub's ES6 module system. It loads D3 via UNPKG and uses the `select` API to target an HTML element, setting its text content to a message imported from a local module. The page simply displays “Hello VizHub!” in large, centered text, showcasing the basic workflow of combining external libraries with modular JavaScript code in a browser environment.

Loading thumbnail…

que 3.2 supriya

This example demonstrates a minimal D3.js setup within the VizHub framework, showing how to import local ES6 modules and D3 API functions. The code uses `select` from D3 to set the text content of an HTML `div` element, populated with a message string exported from a separate `myMessage.js` module. It loads D3 v5 from UNPKG and includes a CSS stylesheet for large, centered text. The visualization serves primarily as a template for structuring modular D3 projects.

Loading thumbnail…

que 3 supriya

This scatter plot visualizes car dataset attributes, plotting horsepower on the x-axis against highway MPG on the y-axis, with each point colored by the vehicle’s make. Built with D3 v6, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical colors, and `d3.axisLeft`/`d3.axisBottom` for labeled scales. The SVG renders circles for each data row fetched from a CSV, includes a legend listing manufacturers, and positions axis titles rotated for readability.

Loading thumbnail…

que 3 supriya

This example demonstrates a scatter plot of the Iris dataset, showing sepal length against petal length with points colored and shaped by species. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to map data values to positions and shapes. A custom `shapeLegend` displays the species categories, while the `axes` module renders labeled axes. The data loads from a CSV file via `fetch` and `csvParse`, with the SVG canvas resizing to the window dimensions.

Loading thumbnail…

task_3.2 supriya

This example shows an interactive scatter plot of the Iris dataset, displaying sepal length against petal length. Each point is colored by species, and the plot includes a custom shape legend that maps each species to a distinct symbol using d3.scaleOrdinal and d3.symbolsFill. The visualization loads data from a remote CSV file using d3.csvParse and renders axes with d3.axisLeft and d3.axisBottom. D3 v7 selection methods like join and attr are used to update the SVG elements dynamically.

Loading thumbnail…

task_3 supriya

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for three flower species. Colored circles (skyblue, lightgreen, and orange) distinguish setosa, versicolor, and virginica samples, with the x-axis and y-axis using d3.scaleLinear and d3.extent to map data ranges. The visualization loads CSV data via d3.csv, renders circles as SVG elements, and adds axes using d3.axisBottom and d3.axisLeft, with axis labels rotated for clarity. The code also sets circular radius and fill colors based on species values.

Loading thumbnail…

que 2 supriya

This example visualizes the distribution of the Iris dataset by species and sepal/petal measurements. It displays a horizontal stacked bar chart where each species of iris is represented as a single bar, broken into colored segments corresponding to sepal length, sepal width, petal length, and petal width, scaled as percentages. The visualization uses D3.js v7 loaded from UNPKG, with `d3.stack` to create the stacked data, `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the percentage x-axis, and `d3.axisBottom` for the axis ticks. Hovering over a segment triggers a tooltip that displays the exact percentage for that species and measurement. The data comes from the classic `iris.csv` file.

Loading thumbnail…

task2_supriya

This example visualizes IMDb movie ratings across six genres, showing the percentage distribution of ratings in five categories from “below 5.0” to “above 8.5” using stacked horizontal bar charts. The D3 v7 code loads data from a CSV file, applies a d3.stack layout, and maps colors via d3.scaleOrdinal to render SVG rectangles. It includes interactive tooltips on mouseover that display the exact rating percentage for each segment, with axes formatted using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

que 1.2 supriya

This example displays a horizontal bar chart of population data for the top 20 countries from the year 2010, sourced from a CSV file via GitHub. The visualization uses D3 v5’s scaleBand, scaleLinear, and CSV loading utilities within a React framework. Bars are rendered as SVG rectangles with tooltips, while axes are composed from custom React components that map tick values, and the chart includes labeled axes for population and country.

Loading thumbnail…

que1.1 supriya

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart. The React app uses D3’s `csv` method to load data from a GitHub-hosted CSV, then maps it through `scaleBand` and `scaleLinear` to position rectangular SVG marks. Axes are rendered with custom components that call D3’s `ticks` and `format` utilities, converting values like “1.5B” for legibility.

Loading thumbnail…

task1_supriya

This example shows a horizontal bar chart comparing the populations of 30 countries in 2020, with each bar labeled by country name. The visualization uses D3.js v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis) to map data, and React to render SVG elements. Population values are fetched from a CSV file and formatted using D3's `format` function, with tooltips displaying the numeric value when hovering over a bar. The chart includes styled axes and a labeled x-axis, all rendered within an SVG container.

Loading thumbnail…

2 Buddhas

Two Buddhas displays two overlapping Buddha silhouettes rendered as SVG paths, one colored and one outlined, against a black background. The visualization combines a generative element—a grid of randomly placed, semi-transparent circles with randomized RGB values—with the predefined Buddha path data. The React application uses ReactDOM to render the SVG, mapping over an array to create thousands of circles whose positions and colors are assigned via `Math.random()`. The second Buddha path is drawn with a thick stroke, creating a layered, textured composition.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha face polygons, rendered in a radial arrangement, are repeated across a black canvas. Each Buddha is drawn as an SVG path using React, with the five instances differentiated by translucent, randomly generated colors. The polygons are created from a fixed radius and rotated to overlap, producing a layered, kaleidoscopic effect that echoes the original overlapping-Buddha concept.