S

skykarthik97@gmail.com

@skykarthik97·21 public vizzes

Loading thumbnail…

task_9&10 question_2

This example shows the average horsepower, torque, and highway MPG for 31 car brands as a stacked area chart rendered as SVG. The data is aggregated by brand and drawn using D3 v5’s `d3.stack()`, `d3.area()`, and `d3.scaleBand()` on a categorical x-axis. Each layer is filled with a `d3.schemeCategory10` color, and the y-axis is scaled linearly. The chart is built with standard D3 selections and the `join()` pattern for the path elements.

Loading thumbnail…

Task 10 sky

A pie chart displays the distribution of movie genres based on their ratings above 8.5, using D3.js v6. The chart visualizes six genres—Documentary, Drama, Comedy, Romance, Animation, and Action—each represented as a slice with a corresponding legend. The code utilizes D3's `arc`, `pie`, and `selectAll` APIs to generate the SVG circles, with `scaleOrdinal` providing color assignments and text labels placed at each slice's centroid. The data, embedded in the script, shows proportional values for each genre's high-rating share.

Loading thumbnail…

task 9 and 10 question 1

This example shows the top 10 store areas ranked by their total sales as a pie chart. The SVG visualization displays each slice, colored with a scaleOrdinal palette, and labels each slice directly with its sales value. A legend identifies each store area. The code uses D3 v7 to load CSV data, sort it, and create the chart, leveraging d3.pie and d3.arc to generate the slices.

Loading thumbnail…

task 9 and 10

This interactive scatter plot visualizes the Iris dataset, cycling through four feature combinations on the x-axis using a timer. Built with D3.js, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while circles represent individual flowers colored by species. The animation updates the x-axis dimension every few seconds via `setInterval`, demonstrating a reusable `scatterPlot` function. SVG rendering shows axis labels, a legend with colored markers, and a title, with data loaded from a remote CSV file.

Loading thumbnail…

task 9 and 10

This animated scatter plot displays the Iris dataset, cycling through four flower measurements on the x-axis while maintaining sepal length on the y-axis. Using D3.js, the visualization updates every few seconds via `setInterval`, re-rendering axes and circles with `scaleLinear`, `axisLeft`, and `axisBottom`. Each species is color-coded, with SVG shapes drawn from CSV data loaded via `d3.csv`. The reusable `scatterPlot` function handles the dynamic updates, while custom text elements provide labels, a legend, and a title.

Loading thumbnail…

task 9 and 10

This example demonstrates how to load D3 via UNPKG and use ES6 modules with VizHub. It imports the `select` function from D3 and a custom `message` from a local module, then sets the text of a `#message` div to "Hello VizHub!". The code uses `d3.select` to manipulate the DOM element and applies styling from an external CSS file. The visualization is minimal, showing only the text message centered on the page.

Loading thumbnail…

question 4 task 8

This example renders a bubble graph using D3.js (v7), displaying five data points as circles with x, y, and radius values. The visualization uses linear scales for the x-axis, y-axis, and bubble radius, with gridlines and axis labels. The SVG is generated with `d3.select('svg')`, `d3.scaleLinear()`, `d3.axisBottom()`, and `d3.axisLeft()`, and circles are appended via `g.selectAll('circle').data(data).enter().append('circle')`. The data is hardcoded inline, and the figure is styled with custom CSS for fonts and tick elements.

Loading thumbnail…

Question 3 act 6

This example visualizes product ratings as a categorical scatterplot in SVG, plotting the percentage of low ratings for each product along a horizontal axis. It uses D3 v7 to load data from a local CSV file, mapping products to the y-axis via `d3.scaleBand` and percentages to the x-axis via `d3.scaleLinear`. Interactive tooltips appear on mouseover, displaying the product name and formatted percentage using D3’s `d3.select` and event handling. The code uses a color scale from `d3.scaleOrdinal` and custom fonts from Google Fonts.

Loading thumbnail…

Question 2 activity 6

A stacked bar chart displays product ratings across three categories: low, moderate, and excellent, using percentage proportions loaded from a local CSV file. D3 v7’s `d3.stack` and `scaleOrdinal` assign colors to rating segments, while `scaleBand` positions products on the y-axis and `scaleLinear` maps proportions to bar widths. Interactive tooltips appear on mouseover, showing formatted percentage values for each rating type. The SVG renderer applies axes with gridlines, a title, and axis labels, styled via external CSS.

Loading thumbnail…

activity 6 task 8

A stacked horizontal bar chart displays population counts for five countries, each bar segmented by religion. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()`, `d3.scaleLinear`, and `d3.scaleBand`. Hovering over a segment triggers a tooltip showing the specific population value for that religion and country. The chart includes a custom legend and axis labels, with data loaded directly from an inline array rather than an external CSV file.

Loading thumbnail…

activity 6 Task 3 question

This example displays a scatter plot of iris flower measurements, plotting sepal length against petal length while encoding species through distinct symbol shapes. The visualization loads CSV data from a GitHub gist and parses it with `d3.csvParse`. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and `d3.axisLeft` and `d3.axisBottom` for axes. A custom legend, built with `d3.symbol`, shows the mapping between species and symbol types.

Loading thumbnail…

Task 2 Question 2

This stacked bar chart, rendered with SVG, visualizes the percentage distribution of rating levels across different movie genres. The chart uses a horizontal layout, with genres on the y-axis and percentage on the x-axis, and each bar is segmented by color to represent a specific rating, from "below 10" to "below10". The visualization employs D3.js (v7) APIs such as `d3.stack()`, `d3.scaleBand()`, and `d3.axisBottom()`. Interactive tooltips, displaying the precise percentage for each rating segment, appear on mouse hover, using raw CSV data for the calculation.

Loading thumbnail…

Activity6_population

This example shows a horizontal bar chart of the populations of 20 countries in 2010, ordered by country name. The chart uses D3’s `scaleBand` and `scaleLinear` to map countries and population values to SVG rectangles, with axes built from custom React components. Population values are formatted with D3’s `format` function, converting values like “1.2G” to “1.2B”. The data is loaded asynchronously from a CSV file via `d3.csv`, and the rendering is done through React with SVG, using a light green fill for the bars and tooltips provided by SVG `<title>` elements.

Loading thumbnail…

Activity6_Task4

This animated bubble chart visualizes the correlation between average torque, horsepower, and highway MPG across 31 car makes. Each bubble’s position maps horsepower (x-axis) and torque (y-axis), while its radius encodes highway MPG and color distinguishes the make. Built with D3.js v7, the chart uses `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and interactive tooltips via mouseover events. Data comes from `bubblechart.csv`, rendered as SVG elements with a legend for MPG values and categorical markers.

Loading thumbnail…

Activity 6 _task 3.2

This scatter plot displays the relationship between sepal length and petal length for iris flowers, with species encoded through distinct point shapes and a corresponding legend. The visualization loads its dataset from a CSV file hosted on GitHub. Built with D3 v7, the code employs `scaleLinear` for both axes, `scaleOrdinal` with `symbolsFill` for shape mapping, and custom functions `axes` and `shapeLegend` to render axes and the categorical legend. Data parsing uses D3's `csvParse`, and the plot is redrawn whenever the window is resized.

Loading thumbnail…

Activity6_Task3

This interactive scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis. Points are colored by species (setosa, versicolor, virginica) using the D3 v6 library with SVG rendering. The visualization loads CSV data from a GitHub repository using `d3.csv` and scales values with `scaleLinear`. Axes are generated using `axisLeft` and `axisBottom`, while the data values for sepal dimensions are encoded as custom attributes on the circles but are not visually represented on the plot.

Loading thumbnail…

Activity6_Task3

This example demonstrates how to integrate D3.js with ES6 modules in a VizHub project. It loads D3 v5 via UNPKG and uses the `select` API to update the text content of a div element. The code imports a local ES6 module, `myMessage.js`, which exports a string that gets displayed as the message. A simple CSS rule centers the text and sets its font size to 12em. The visualization presents a static, styled text output rather than a dynamic data-driven graphic.

Loading thumbnail…

Activity 6_Task 2

This visualization shows how movie ratings are distributed across six genres, using a stacked horizontal bar chart where each bar represents the percentage of films falling into five rating brackets from below 5.0 to above 8.5. Each genre’s bar is segmented into color-coded sections, with hover interactions revealing precise percentage values via tooltips. Built with D3 v7, the chart uses `d3.stack` for data transformation, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. The data, loaded from a CSV file, is rendered as SVG, with axis labels and styling defined in external CSS.

Loading thumbnail…

Activity 6

This example demonstrates a minimal D3.js setup within the VizHub environment, displaying the text "Hello VizHub!" centered on the page. The code imports the `select` function via an ES6 module from D3, and also imports a local custom message module. D3 v5 is loaded from UNPKG, and the example shows how to combine CDN libraries, local modules, and CSS styling in a simple single-page visualization.

Loading thumbnail…

Activity 6 Task 1

This interactive SVG bar chart displays the 2020 populations of 30 countries, ranked from largest to smallest, using a horizontal layout. Built with React and D3 v5, it visualizes data from a CSV file, rendering bars with a light green fill and blue tick marks on the axes. The chart leverages D3’s `scaleBand` and `scaleLinear` to map countries and population values to screen coordinates, while the `AxisBottom`, `AxisLeft`, and `Marks` components generate the SVG elements. Tooltips are provided via native SVG `<title>` elements, and axis labels use a formatted scale for readability.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha heads are formed from small diamond shapes randomly distributed across a black SVG canvas. Each diamond is filled with a semi-transparent RGB color and rotated, creating a kaleidoscopic, layered effect that evokes sacred geometry. The piece is built with React, using nested maps to generate hundreds of polygons that collectively trace the silhouette of five Buddhas.