Skip to main content
Log in
S

sathvik0311@gmail.com

@JishnaSathvikVucha·37 public vizzes

Loading thumbnail…

activity-7

A reusable area chart displays the top ten fruits by sales, ranked in descending order from a CSV dataset. The chart uses a smooth Catmull-Rom curve to render the area, with steelblue fill at 70% opacity. D3 v6 APIs such as `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.area` are used to handle data loading, scales, and the area generator, while axes and labels are added with `d3.axisBottom` and `d3.axisLeft`.

Nov 6, 2024
Loading thumbnail…

Fork of pirchart

This fork of a pie chart visualizes the top five fruits by sales from a CSV dataset loaded via d3.csv. It uses d3.pie and d3.arc to generate SVG path slices, with percentage labels placed at each arc centroid. A legend built from d3.scaleOrdinal and d3.schemeCategory10 identifies the fruits, while the chart is rendered in SVG with a width of 600 pixels and includes axis-style text labels.

Nov 6, 2024
Loading thumbnail…

Fork of Forking Hello VizHub

An animated scatter plot of the Iris flower dataset cycles through different x-axis dimensions using D3 version 6. The visualization loads data via `d3.csv` from a GitHub gist, then renders circles colored by species with SVG. A custom reusable `scatterPlot` module builds scales with `d3.scaleLinear` and axes with `d3.axisLeft` and `d3.axisBottom`. A `setInterval` updates the x-value mapping across petal width, sepal width, petal length, and sepal length, redrawing the plot while labels and a legend are appended dynamically.

Nov 6, 2024
Loading thumbnail…

Forking Hello VizHub

This example demonstrates the basic structure of a VizHub visualization, using D3.js to select a DOM element and set its text content. The code imports the `select` function from D3 v5 and a local ES6 module `myMessage.js`, which exports the string "Hello VizHub!" that is displayed in a centered, large-font `#message` div. It also shows how to load D3 from UNPKG and include CSS from a local stylesheet.

Nov 6, 2024
Loading thumbnail…

Fork of pie chart

This example shows a categorical distribution as a pie chart with a legend. It visualizes five categories with varying values, each slice labeled directly and represented by a distinct color in a separate legend. The chart is built using D3 v6, leveraging `d3.pie` and `d3.arc` generators to compute slice geometry, while `d3.scaleOrdinal` assigns the categorical color scheme. The SVG output is generated from hardcoded data, with the pie centered within a 500-pixel square and a custom-styled HTML legend positioned beside it.

Nov 5, 2024
Loading thumbnail…

pirchart

This example displays the Iris dataset as a scatter plot, cycling through petal width, sepal width, petal length, and sepal length on the x-axis while sepal length is fixed on the y-axis. Circles are color-coded by species. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to animate the axis changes, rendering as an SVG.

Nov 5, 2024
Loading thumbnail…

Fork of Scatter plot Activity

This interactive scatter plot visualizes the Iris dataset, cycling through four feature combinations (petal width, sepal width, petal length, sepal length) on the x-axis every few seconds via `setInterval`. The y-axis shows sepal length, and each species—setosa, versicolor, and virginica—is color-coded using a `d3` scale and a custom marker function. Built with D3 v6, it uses `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes, with a legend and axis labels updated dynamically.

Nov 5, 2024
Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for different car makes. D3.js v7 renders SVG circles positioned by linear scales for horsepower and torque, with circle size encoding highway MPG and color mapped to car make via a custom ordinal scale using interpolateTurbo. Interactive tooltips display the make on mouseover, while legend circles and color swatches clarify the encoding. The chart loads data from a CSV file, with styling handled through CSS classes.

Oct 25, 2024
Loading thumbnail…

Fork of Bubble chart

A bubble chart displays smartphone brands by sales, average rating, and available models. Each bubble's x-position represents rating, y-position represents sales, and size represents model count. The chart uses SVG circles with D3.js v7 scales: `d3.scaleLinear` for axes and `d3.scaleSqrt` for radii. Labels show brand names, with data embedded directly in the JavaScript source.

Oct 25, 2024
Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque, while its size maps to highway MPG and its color distinguishes car brand. Built with D3 v7, the SVG rendering includes interactive tooltips that reveal the car make on hover. The chart incorporates a legend for bubble size and a color-coded categorical legend for each make, with all data loaded from a CSV file.

Oct 25, 2024
Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the relationship between GDP, population, and life expectancy for 16 countries using a Cartesian coordinate system. Each circle's x-position corresponds to GDP, y-position to population, and radius to life expectancy, with color distinguishing countries. Built with D3 v7, the visualization uses `d3.scaleLinear()` for axes, `d3.scaleSqrt()` for bubble sizing, and `d3.scaleOrdinal()` for categorical coloring. Interactive hover effects enlarge bubbles and display country labels via `.on('mouseover')` handlers. Data loads from a local CSV file, rendered as SVG with animated transitions on user interaction.

Oct 25, 2024
Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various vehicle makes. Each circle’s position reflects its horsepower and torque, while its size encodes highway MPG and its color categorizes the make. The chart includes axis labels, a size legend for MPG values, and a color legend for makes. Built with D3 v7, the SVG visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and interactive tooltips on mouseover.

Oct 25, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and car brand, respectively. The visualization includes interactive tooltips on hover, a legend for MPG scaling, and a color-coded list of makes. The code uses d3.csv for data loading, d3.scaleLinear for axes and sizing, d3.scaleOrdinal for colors, and SVG with d3 transitions for tooltip animations.

Oct 25, 2024
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot shows the relationship between vehicle weight and horsepower for a small dataset of 1970s cars. Each circle represents a car model, colored by its country of origin. The visualization uses D3.js (v7) to render the SVG graphics, scaling the x-axis for weight and y-axis for horsepower. Points are drawn with a linear scale and an ordinal color scale. Hovering over a point triggers a tooltip displaying the car's name, weight, and horsepower. The chart includes labeled axes and a legend for the origin categories.

Oct 25, 2024
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example shows the classic Iris dataset as a scatter plot of sepal length against petal length, with each species represented by a distinct D3 symbol shape. The visualization includes labeled axes and a shape legend identifying the three species. It uses d3.scaleLinear for positioning, d3.scaleOrdinal with symbolsFill for mapping species to symbol types, and d3.axisLeft/axisBottom for axes. Data loads from a remote CSV and is parsed with d3.csvParse, with the chart rendered using d3-selection joins inside a resizable SVG.

Oct 25, 2024
Loading thumbnail…

Fork ofScatter Plot

This fork of a scatter plot visualizes the Iris dataset, encoding petal length and width on the x and y axes while coloring each circle by species (setosa, versicolor, virginica). It loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scales, and renders SVG circles with `selectAll().data().join()`. The code also stores raw sepal dimensions in each datum, though only petal dimensions are plotted. Axis labels and ticks are added using `axisLeft`, `axisBottom`, and custom text elements.

Oct 25, 2024
Loading thumbnail…

Fork

This example visualizes the distribution of ratings across movie genres as a percentage, with each bar representing a genre and its height indicating the proportion of a specific rating level. It shows the data as a stacked bar chart where hovering over a bar reveals the exact percentage via a tooltip. Built with D3 v7, the visualization loads data from a CSV file and uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and interactive mouse events to trigger tooltip transitions. The chart is rendered as an SVG with animated hover effects and lightweight styling.

Oct 25, 2024
Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart shows the distribution of ratings across food categories, displaying each rating level's percentage within each category. The visualization uses D3.js v7 with SVG rendering, employing `d3.stack()` for the stacked bars and `d3.scaleOrdinal()` for color mapping. Hovering over any bar segment reveals a tooltip with the exact percentage of that rating level. The data comes from the included CSV file, with axes labeled for food categories and percentage values.

Oct 25, 2024
Loading thumbnail…

Fork of Activity

This visualization shows the 2010 population of 20 countries as a horizontal bar chart. The code loads data from a CSV file and renders bars as SVG rectangles using React, with axes built from D3 v5's `scaleBand` and `scaleLinear`. Tooltips display population values using D3's `format` function, and the chart applies margins and axis labels within a fixed 960x500 viewport.

Oct 24, 2024
Loading thumbnail…

Fork of Activity 7

A horizontal bar chart ranks ten countries by their 2000 population, using React to render SVG elements. D3 v5 functions (`scaleBand`, `scaleLinear`, `max`, `format`) drive the scales and tick formatting. The chart loads CSV data via `d3.csv` from a GitHub repository, slicing to the top ten rows. Axis components and rectangle marks are built with JSX, with `<title>` elements providing native tooltips.

Oct 24, 2024
Loading thumbnail…

Activity6_Task2

A stacked horizontal bar chart visualizes the distribution of IMDb ratings across six genres, using percentage categories ranging from "below 5.0" to "above 8.5." The chart renders as SVG elements via D3 v7, with each genre represented as a horizontal bar segmented into five colored rating bands. The visualization employs `d3.stack()` to compute stacked series, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis percentages. Interactive tooltips appear on mouseover, displaying the exact percentage for any rating segment using `d3.format('.2f')`. The data comes from a local CSV file loaded with `d3.csv`.

Oct 24, 2024
Loading thumbnail…

Fork of Fork of Activity 6

This visualization presents a horizontal bar chart comparing population figures across 30 countries for the year 2020, sourced from a CSV file hosted on GitHub. The React-based application uses D3 v7 modules like `scaleBand`, `scaleLinear`, and `max` to compute scales, while custom SVG components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and rectangular bars. Population values are formatted using D3's `format` function, with tick labels abbreviated to billions. The chart includes labeled axes and a tooltip on each bar via SVG `<title>` elements.

Oct 24, 2024
Loading thumbnail…

Fork of Activity 6

A horizontal bar chart displays the 2020 population of 30 countries, ranked in descending order from the dataset loaded via `d3.csv` from a GitHub-hosted CSV file. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders bars as SVG `<rect>` elements. Custom `AxisBottom` and `AxisLeft` components generate ticks, while a `<title>` element provides tooltips with formatted values like "30M". The React app manages data loading asynchronously with a `useEffect` hook.

Oct 24, 2024
Loading thumbnail…

Activity 6

This horizontal bar chart shows population figures for ten countries in the year 2000, with each bar’s length proportional to its population. The visualization uses a linear x-scale and a band y-scale, rendering rectangles in SVG. Data loads from a CSV file via `d3.csv`, and the chart’s axes are generated using `d3.axisBottom` and `d3.axisLeft`. The code demonstrates modular ES6 import structures and D3 v7’s selection and data-binding methods.

Oct 23, 2024
Loading thumbnail…

Activity-6

This example displays a large, centered “Hello VizHub!” message using D3.js to set the text content of a div element. The code demonstrates importing the `select` function from D3 via UNPKG and a local ES6 module that exports the message string. Rendering relies on standard DOM manipulation through D3’s selection API, with styling applied via CSS for font size and alignment. The visualization is static, showing only text without any data-driven graphics or interactive elements.

Oct 22, 2024
Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that renders a single text message centered on the page. It uses D3’s `select` function to target the `#message` div and set its content from an imported ES6 module. The code shows how to load D3 v5 from a CDN, import local modules with `import`, and apply CSS styling for large, centered text. No data visualization or interactive behavior is included—it serves purely as a scaffolding template.

Oct 22, 2024
Loading thumbnail…

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

A black-background React visualization layers hundreds of randomly positioned, semi-transparent circles over a single intricate SVG path of a Buddha figure, creating a dense, overlapping color field. The circles use random coordinates and RGB values generated via `Math.random()`, while the path is rendered through React’s SVG elements. The code maps over nested arrays to produce a chaotic, generative aesthetic atop the fixed geometric form.

Oct 18, 2024
Loading thumbnail…

Fork of 6 Buddha

This visualization displays a densely overlapping arrangement of colored circular elements scattered across a 1000-by-1000 pixel SVG canvas, layered beneath a single large outlined Buddha path. The React application generates 30x30x30 random positioned circles with varying RGB fill colors and opacity, creating a vibrant, chaotic background. The Buddha silhouette is rendered using an SVG path element within a transformed group, scaled and translated to appear over the colorful scatter. The code imports React and ReactDOM, uses JavaScript array mapping for repetitive element generation, and employs inline SVG attributes for styling and positioning.

Oct 18, 2024
Loading thumbnail…

Fork of 6 Buddha

This visualization displays a densely overlapping arrangement of colored circular elements scattered across a 1000-by-1000 pixel SVG canvas, layered beneath a single large outlined Buddha path. The React application generates 30x30x30 random positioned circles with varying RGB fill colors and opacity, creating a vibrant, chaotic background. The Buddha silhouette is rendered using an SVG path element within a transformed group, scaled and translated to appear over the colorful scatter. The code imports React and ReactDOM, uses JavaScript array mapping for repetitive element generation, and employs inline SVG attributes for styling and positioning.

Oct 18, 2024
Loading thumbnail…

Fork of 6 Buddha

This visualization displays a densely overlapping arrangement of colored circular elements scattered across a 1000-by-1000 pixel SVG canvas, layered beneath a single large outlined Buddha path. The React application generates 30x30x30 random positioned circles with varying RGB fill colors and opacity, creating a vibrant, chaotic background. The Buddha silhouette is rendered using an SVG path element within a transformed group, scaled and translated to appear over the colorful scatter. The code imports React and ReactDOM, uses JavaScript array mapping for repetitive element generation, and employs inline SVG attributes for styling and positioning.

Oct 18, 2024
Loading thumbnail…

Fork of 6 Buddha

This visualization displays a densely overlapping arrangement of colored circular elements scattered across a 1000-by-1000 pixel SVG canvas, layered beneath a single large outlined Buddha path. The React application generates 30x30x30 random positioned circles with varying RGB fill colors and opacity, creating a vibrant, chaotic background. The Buddha silhouette is rendered using an SVG path element within a transformed group, scaled and translated to appear over the colorful scatter. The code imports React and ReactDOM, uses JavaScript array mapping for repetitive element generation, and employs inline SVG attributes for styling and positioning.

Oct 18, 2024
Loading thumbnail…

Fork of 6 Buddha

This visualization displays a densely overlapping arrangement of colored circular elements scattered across a 1000-by-1000 pixel SVG canvas, layered beneath a single large outlined Buddha path. The React application generates 30x30x30 random positioned circles with varying RGB fill colors and opacity, creating a vibrant, chaotic background. The Buddha silhouette is rendered using an SVG path element within a transformed group, scaled and translated to appear over the colorful scatter. The code imports React and ReactDOM, uses JavaScript array mapping for repetitive element generation, and employs inline SVG attributes for styling and positioning.

Oct 18, 2024
Loading thumbnail…

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

The visualization displays a dense field of small, semi-transparent circles scattered across a black background, overlaid with a large, colorful Buddha silhouette formed by a single complex SVG path. The circles are generated with random positions and RGB colors using React’s `map` function, while the Buddha path is rendered with a thick stroke. The SVG canvas is 960 by 1000 pixels, and the code leverages React and ReactDOM to construct the scene dynamically.

Oct 18, 2024
Loading thumbnail…

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

The visualization displays a dense field of small, semi-transparent circles scattered across a black background, overlaid with a large, colorful Buddha silhouette formed by a single complex SVG path. The circles are generated with random positions and RGB colors using React’s `map` function, while the Buddha path is rendered with a thick stroke. The SVG canvas is 960 by 1000 pixels, and the code leverages React and ReactDOM to construct the scene dynamically.

Oct 18, 2024
Loading thumbnail…

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

The visualization displays a dense field of small, semi-transparent circles scattered across a black background, overlaid with a large, colorful Buddha silhouette formed by a single complex SVG path. The circles are generated with random positions and RGB colors using React’s `map` function, while the Buddha path is rendered with a thick stroke. The SVG canvas is 960 by 1000 pixels, and the code leverages React and ReactDOM to construct the scene dynamically.

Oct 14, 2024
Loading thumbnail…

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

A field of randomly positioned, colored polygons fills the screen, each one a small square rotated 45 degrees, creating a dense, layered mosaic. At the center, a detailed line drawing of a Buddha figure, built from an SVG path, is overlaid and scaled up, its intricate strokes contrasting with the chaotic background. The visualization uses React to render the SVG elements, generating coordinates and fill colors via JavaScript’s `Math.random()` calls within nested array maps. The code also defines an unused `sq()` function, though it has no effect on the final output.

Oct 14, 2024
Loading thumbnail…

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

A dense field of small, overlapping circles fills a black SVG canvas, each circle colored with a randomly generated RGB value and semi-transparent opacity. The circles are generated by nested React `map` calls over a numeric array, producing a layered, chaotic composition. At the center, a single Buddha path is drawn and scaled using SVG `<path>` and `<g>` elements, rendered with React and ReactDOM, creating a vivid contrast between the abstract dot field and the structured figure.

Oct 14, 2024