Skip to main content
Log in
K

kandulasunny17@gmail.com

@sunny40-sketch·38 public vizzes

Loading thumbnail…

Activity-7 Question-1

This example renders a pie chart of the top ten cars by miles per gallon (mpg) from a CSV file loaded from a GitHub gist. D3's `pie` layout and `arc` generator create the slices, with each car assigned a random color via JavaScript. The chart displays mpg labels directly on each slice and includes a legend listing car names. The SVG is generated using D3 v5, with the data fetched using D3's `csv` function and sorted/sliced before rendering.

Nov 5, 2024
Loading thumbnail…

Activity-7 question-2

This visualization shows the fluctuation of Bitcoin’s price over time as a blue area chart with an overlaid darkblue line, using SVG rendering. The chart includes labeled axes for Date and Price (USD) and an underlined title. The code loads a remote CSV file via `d3.csv`, parses dates with `d3.timeParse`, and builds the area and line paths using `d3.area` and `d3.line`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales rely on `d3.scaleTime` and `d3.scaleLinear`.

Nov 5, 2024
Loading thumbnail…

Activity-7 Question-2

This example visualizes nuclear energy usage from 2010 to 2020 with an area chart rendered in SVG. The page loads D3 v5 via UNPKG and uses the library’s scale and axis functions to map time-series data, while a filled path generated with d3.area creates the shaded region. The chart is centered on a 930×450 SVG canvas with a fixed heading, and styling is handled through an external CSS file.

Nov 5, 2024
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub shows Bitcoin's price over time as an area chart with an overlaid line, using a semi-transparent steelblue fill and a darkblue stroke. It loads a CSV file from a GitHub gist, parses dates with `d3.timeParse`, and creates time and linear scales with `d3.scaleTime` and `d3.scaleLinear`. The chart is rendered as SVG using `d3.area`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`, with labeled axes and a title.

Nov 5, 2024
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the top 10 cars by fuel efficiency (mpg) from a dataset loaded via d3.csv. The chart uses d3.pie and d3.arc to render SVG slices, each labeled with its mpg value, and randomly assigned colors. A legend on the right side maps each car name to its corresponding slice. The code imports specific d3 utilities including select, csv, pie, arc, and format to handle the data, rendering, and text formatting.

Nov 5, 2024
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes 2022 US auto sales by brand, displaying each brand’s sales count and percentage alongside its colored slice. The chart loads CSV data from a GitHub gist using `d3.csv`, computes total sales, and renders slices with `d3.pie` and `d3.arc`. Legends are drawn as SVG groups, with colors assigned via `d3.scaleOrdinal` and labels formatted using `d3.format`, all within a static SVG canvas.

Nov 5, 2024
Loading thumbnail…

Question 4

A bubble chart visualizes the correlation between engine displacement, acceleration, and highway MPG for 1970s automobiles. Each circle represents a car model, positioned by its displacement and acceleration values, with the circle's radius scaled according to its MPG rating. The chart employs color encoding per car manufacturer, using the `d3.interpolateTurbo` color scale. Hovering over a bubble reveals a detailed tooltip displaying the car's make. Data is loaded from a local CSV file using `d3.csv`. The visualization includes a legend for both MPG values and manufacturer colors.

Oct 25, 2024
Loading thumbnail…

Question3

This scatter plot displays sales data, plotting total sales on the x-axis against order numbers on the y-axis, with each point colored by customer using an ordinal scale with the Tableau10 scheme. It loads a CSV from GitHub using d3.csv, renders circles in an SVG, and includes axes, a legend, and interactive tooltips that show product details on hover. The visualization uses d3.scaleLinear, scaleBand, axisLeft, and axisBottom for positioning and scaling.

Oct 23, 2024
Loading thumbnail…

Fork of Question 4 chnages

This visualization displays the correlation between a vehicle's acceleration, displacement, and fuel efficiency using an interactive bubble chart. Each bubble represents a car model, with its position determined by the x-axis (acceleration) and y-axis (displacement), while the bubble's radius and color encode the vehicle's highway MPG. The chart is rendered using D3.js (v7) with SVG, and includes a legend for bubble size and color. Hovering over a bubble triggers a tooltip that displays the car's make, implemented through D3's event listeners and transition methods.

Oct 23, 2024
Loading thumbnail…

Question 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and color distinguishes car makes. The visualization includes hover tooltips showing each make’s name, plus legends for bubble size and color categories. It uses d3.csv to load data, d3.scaleLinear for positioning and sizing, d3.scaleOrdinal with d3.interpolateTurbo for color mapping, and d3.axisBottom and d3.axisLeft for axes, with SVG rendering and animated transitions.

Oct 23, 2024
Loading thumbnail…

Question 4

A bubble chart displays automobile attributes from a CSV dataset, plotting each car as a circle. The visualization uses D3.js v7 to load the data with `d3.csv` and render SVG elements. Currently, the code only loads and logs the data, so the chart itself is not yet drawn. The dataset includes columns for model, miles per gallon, cylinders, horsepower, and origin, which could be mapped to bubble position and size in a future implementation.

Oct 23, 2024
Loading thumbnail…

activity6-task_4

This visualization displays the correlation between average horsepower, torque, and highway MPG across various car makes using a bubble chart. Each circle’s position encodes horsepower and torque, while its size and color represent highway MPG and make, respectively. Built with D3 v7, the SVG chart includes interactive tooltips on hover, axis labels, and legends for both bubble size and color categories. Data is loaded from a CSV file, and d3.scaleLinear and d3.scaleOrdinal handle the encodings.

Oct 22, 2024
Loading thumbnail…

activity6-task_4

This example demonstrates a minimal VizHub scaffold, showing how to structure a D3 project with local ES6 modules. It uses d3.select to set the text content of a div element based on a message imported from a separate myMessage.js module. The example includes a CSS stylesheet for styling and loads D3 v5 from the unpkg CDN. The code defines constants and a regular expression inertly, but no data or visual output is generated beyond the static text element.

Oct 22, 2024
Loading thumbnail…

Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble sized by fuel efficiency and colored by manufacturer. The chart uses d3.csv to load the dataset, then employs D3 scales (d3.scaleLinear) for positioning and sizing, alongside d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, showing the car make. SVG circles and legends are rendered via D3’s selection and join methods, with dynamic updates on hover.

Oct 22, 2024
Loading thumbnail…

Fork of Activity6_question3

This scatter plot visualizes sales data from a CSV file, showing the relationship between total sales and order number, with colors differentiating customers. It uses D3 v6's `scaleLinear`, `scaleBand`, and `scaleOrdinal` to map the data, rendering circles as SVG elements with axes, labels, a legend, and interactive tooltips that display product and sales figures on hover.

Oct 22, 2024
Loading thumbnail…

sample

This example plots sales data as a scatter plot, encoding BMI on the x-axis, age on the y-axis using a band scale, and smoker status as color via an ordinal scale with Tableau10 scheme. It loads CSV data from a GitHub repository, renders SVG circles with tooltips on mouseover, and includes axes, a legend, and labels. The code leverages D3 v6 APIs such as `d3.csv`, `scaleLinear`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom`.

Oct 22, 2024
Loading thumbnail…

Activity6_question-3

This example displays a scatter plot of car data, showing the relationship between BMI (on the x-axis) and age (on the y-axis), with points colored by smoking status via a Tableau10 ordinal color scale. The visualization loads a CSV file from a GitHub repository using D3’s `csv` function, then applies linear scales with `scaleLinear` and renders circles as SVG elements. Axes are generated with `axisLeft` and `axisBottom`, while a legend is manually constructed to map colors to the smoking categories. The chart fills the browser window using `window.innerWidth` and `window.innerHeight`.

Oct 22, 2024
Loading thumbnail…

hehehe

This scatter plot visualizes the Iris dataset, mapping petal length on the y-axis and sepal length on the x-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to set scales, and renders circles as SVG elements with `d3.selectAll` and `.join`. Axis labels and ticks are generated using `d3.axisLeft` and `d3.axisBottom`, while the fixed radius and species-based fill colors highlight distribution patterns across the three flower types.

Oct 22, 2024
Loading thumbnail…

Activity6_question3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica). The chart uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render the SVG. Points are drawn as circles using D3’s `selectAll` and `join`, with axis labels styled in green. The data is fetched from a GitHub-hosted CSV file.

Oct 22, 2024
Loading thumbnail…

Activity6_question3

This interactive scatter plot visualizes a car dataset, with each point representing a vehicle plotted by its Total Sales and Product. The chart, rendered as an SVG, uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeTableau10` to map data to position and color. A legend identifies the product categories via color. The visualization is loaded from a remote CSV file and fills the browser window, with axes labeled "Highway MPG" and "Horsepower."

Oct 22, 2024
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot visualizes sales data, showing the relationship between total sales and date, with points shaped according to product type. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to map data values to positions and shapes. A legend explains the product-to-shape mapping. The chart loads CSV data from a GitHub repository and renders with axes and labels for both dimensions.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3(Tutorial-3.2 )

This scatter plot displays the relationship between sepal length and petal length for iris flowers, with species indicated through distinct symbol shapes. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol()` to map data values to positions and shapes. It features axes with labels via `axisLeft` and `axisBottom`, plus a custom shape legend positioned within the chart. Data is loaded from a CSV file hosted on GitHub, parsed with `csvParse`, and rendered using SVG paths generated by D3's symbol generator.

Oct 22, 2024
Loading thumbnail…

Activity6_Question-3

A scatter plot maps daily sales over time, using D3.js v7 with `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.symbolsFill` to encode product categories as distinct point shapes. A legend, built via `d3.symbol`, lists each category. Data loads from a remote CSV file, parsed with `d3.csvParse` and `d3.timeParse`; sales figures are numeric. The chart includes labeled x- and y-axes, and points render as SVG paths within an HTML page styled by CSS.

Oct 22, 2024
Loading thumbnail…

Activity6_Question-3.1

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species (setosa, versicolor, virginica). It also encodes sepal length and width as `rx` and `ry` attributes on each circle, though these do not affect the rendered radius since `r` is fixed at 5. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load data from a GitHub raw URL and render SVG circles with labeled axes.

Oct 22, 2024
Loading thumbnail…

Activity6_task3

This scatter plot visualizes the Iris dataset, using petal length and width for the x and y axes. It colors each point by species—setosa, versicolor, and virginica—with distinct colors and also maps sepal length and width to the circle’s rx and ry attributes, though the effect is subtle. Built with D3 v6 via UNPKG, the code loads data from a raw GitHub CSV, uses `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles in an SVG, with custom styling for the title and tick labels.

Oct 22, 2024
Loading thumbnail…

Activity-6 (question2.1)

This chart displays monthly sales figures for three product categories—Electronics, Clothing, and Home Goods—as a stacked horizontal bar chart. D3’s `scaleBand` positions months on the y-axis, while a `scaleLinear` maps cumulative sales values to x-axis lengths. Each bar segment’s width corresponds to category-specific revenue, with a legend and interactive tooltips revealing exact dollar amounts on hover. The example loads D3 v7 via UNPKG, reads CSV data asynchronously, and constructs the SVG visualization using `d3.axisLeft`, `d3.axisBottom`, `d3.stack`, and `scaleOrdinal` for color encoding.

Oct 22, 2024
Loading thumbnail…

Fork of Activity-6 (Task-2)

A stacked horizontal bar chart displays the percentage distribution of IMDb ratings across six movie genres, using five rating bands from "below 5.0" to "above 8.5" for documentary, drama, comedy, romance, animation, and action films. The chart is rendered as SVG with D3 v7, using `d3.stack()` to compute stacked series, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for genres, and `d3.scaleOrdinal` for color mapping. Interactive tooltips appear on mouseover, showing exact percentages via `d3.format` and HTML div elements. Data originates from a local CSV file loaded directly in the script.

Oct 22, 2024
Loading thumbnail…

Activity-6

This example demonstrates a minimal VizHub setup that displays the text “Hello VizHub!” centered on the page. It shows how to combine external libraries with local ES6 modules, loading D3 v5 from UNPKG and using its `select` function to update the DOM. The page also imports a custom message from a local `myMessage.js` module and applies styling via an external CSS file, illustrating basic project structure and modular code organization.

Oct 22, 2024
Loading thumbnail…

Activity-6(Questions)1.2

This visualization displays the populations of 20 countries in 2010 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the scales, and custom `AxisBottom` and `AxisLeft` components drawing the ticks. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and population values are formatted using D3’s `format('.2s')` to show abbreviations like "B" for billions.

Oct 21, 2024
Loading thumbnail…

Fork of Activity-6(Questions1.1)

This chart displays the population of the top ten countries in the year 2000 as a horizontal bar chart, with countries labeled on the y-axis and population values on the x-axis. The visualization uses React to render SVG graphics, leveraging D3 version 5’s `scaleBand` and `scaleLinear` for axes and data mapping. Population values are read from a remote CSV file using `d3.csv`, with axes formatted using D3’s `format` function to abbreviate large numbers (e.g., "2.0B"). The bars include tooltips showing the exact population values.

Oct 21, 2024
Loading thumbnail…

Activity-6(Questions)

This example presents a horizontal bar chart of the top ten countries by population in the year 2000, using React with SVG rendering. The code applies d3.scaleBand for the categorical country axis and d3.scaleLinear for the population scale, with bars generated by the Marks component. Axis components use d3’s tick system, and values are formatted with d3.format’s SI notation, converting billions to an abbreviated form. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the chart includes a custom Poppins font and blue gridlines.

Oct 21, 2024
Loading thumbnail…

Activity-6

A horizontal bar chart displays the 2020 population estimates for thirty countries, ranked by value. Built with React and D3 v5, it maps country names to the y-axis and population counts to the x-axis. The visualization uses D3's `scaleBand` and `scaleLinear` for scales, formats axis ticks with `format('.2s')`, and renders SVG rectangles with hover tooltips. Data is loaded from a remote CSV file via D3's `csv` function.

Oct 21, 2024
Loading thumbnail…

Fork of 6 Buddha

A colorful, abstract SVG visualization depicts a dense, geometric cluster of semi-transparent diamond shapes over a floral background. The code generates hundreds of randomly positioned and colored shapes using nested `Array.map` iterations over a numeric array, with `Math.random` determining each point’s coordinates and RGB fill. Built with React and ReactDOM, the visualization also renders a large SVG path of the Buddha figure, scaled and translated, overlaid with the generative shapes, which are rotated via `transform` attributes.

Oct 19, 2024
Loading thumbnail…

5 Buddha

Five overlapping Buddha silhouettes render in bright, random colors atop a photographic background of flowers. The piece combines a large, hand-coded SVG path of a Buddha figure repeated at different positions and scales with layered, semi-transparent diamond shapes generated through nested React array maps. Built with React and rendered as SVG, the chaotic color fills and rotating points create a kaleidoscopic, hypnotic effect against the natural backdrop.

Oct 19, 2024
Loading thumbnail…

Buddha Image question

The visualization displays a Buddha silhouette formed by a dense field of randomly placed small flower images, layered over a decorative SVG path that outlines the figure. Built with React and rendered as SVG, the code maps a nested array of 30 elements to position over 900 tiny images using `Math.random()` for distribution. The `path` element uses an explicit `d` attribute with complex Bézier curve data to define the Buddha’s shape, while the image opacity is set to 0.8 for a semi-transparent collage effect.

Oct 19, 2024
Loading thumbnail…

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

A generative art piece renders a Buddha-like silhouette through overlapping, randomly rotated diamond shapes. Constructed with React and SVG polygons, the code uses nested array maps to place hundreds of polygons with randomized positions, colors, and rotations, overlaid on a single complex SVG path that traces the Buddha figure. The black background, transparent polygons, and bright rgb() fill values create a layered, abstract effect.

Oct 13, 2024
Loading thumbnail…

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

This example displays a dense collage of overlapping Buddha silhouettes, each traced in multicolored polygon strokes rendered at varying scales and rotations. The visualization uses React and ReactDOM to construct an SVG canvas, with nested loops generating randomized polygon positions, fills, and rotate transforms for each iteration. The primary Buddha shape is drawn from a pre-defined SVG path, while the surrounding polygons create a chaotic, layered effect against a green background.

Oct 13, 2024
Loading thumbnail…

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

A Buddha silhouette is repeated in five nested, semi-transparent layers, each filled with a randomized RGB color and scattered across the canvas as small circles. Using React with SVG rendering, the code maps arrays of twenty numbers to generate overlapping circular shapes and applies the same path data to each layer with a scale transform. The visualization relies on React’s component model and SVG elements like `<circle>` and `<path>` to create a dense, colorful, abstract composition from a single source path.

Oct 13, 2024