J

jyothirmaijyothi2017@gmail.com

@JyothirmaiV13·22 public vizzes

Loading thumbnail…

Task9_Question2

This example shows app downloads on the App Store and Play Store as a stacked area chart over months after launch, with iOS downloads starting earlier and Android downloads added from month four onward. The chart uses the CanvasJS library, loading data from a CSV file stored in a GitHub repository. It defines two series with `type: 'stackedArea'`, enables animation, shares tooltips, and formats the Y-axis with a "k" suffix. The tooltip for Android includes a total calculation using the `#total` placeholder, while the color-coded legend identifies each platform.

Loading thumbnail…

new

This stacked area chart visualizes how three categorical values (A, B, and C) contribute to a total across five years, from 2010 to 2014. The chart uses translucent areas with a category-10 color scheme to show the changing composition over time. Built with D3.js v7, the implementation stacks the dataset using `d3.stack`, scales the X-axis with `d3.scaleBand`, and the Y-axis with `d3.scaleLinear`. Paths for each area are generated via `d3.area`, and the SVG axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Questuion 2

This example displays a stacked area chart comparing three categories (A, B, C) over a five-year span from 2010 to 2014. The visualization uses D3.js v7, specifically the `d3.stack`, `d3.area`, `d3.scaleBand`, and `d3.scaleLinear` functions to compute the stacking and generate the SVG paths. Each category is colored using the categorical palette `d3.schemeCategory10`. The chart includes labeled axes for year and value, with margins applied to the SVG canvas for proper layout.

Loading thumbnail…

Task9_AreaChart

This stacked bar chart visualizes sales, profit, and shipping costs across three shipping categories (Same Day, Second Class, First Class). The visualization uses D3.js version 7 to stack the three metrics for each category, using `d3.stack()` and `d3.scaleBand()` for the categorical x-axis. The data is embedded directly in the JavaScript code, and each bar segment is colored distinctly via a `d3.scaleOrdinal()` color scheme, with hover effects defined in the CSS.

Loading thumbnail…

Task9_Question1_PieChart

A pie chart visualizes the number of COVID-19 deaths by region, with each slice labeled with the death count in thousands and a legend mapping colors to regions. The D3 v5 code loads data from a remote CSV using `d3.csv`, computes slice geometry with the `d3.pie` layout and `d3.arc` generator, and colors slices via `d3.scaleOrdinal`. The chart is rendered as SVG, with the title and labels formatted using `d3.format`.

Loading thumbnail…

play

This interactive visualization displays COVID-19 infection data across nine countries using a pie chart rendered with D3.js (v6.7.0). Each slice represents a country’s confirmed infections with percentage labels and a color-coded legend. The chart is built with d3-arc and d3-pie generators, using scaleOrdinal for colors. Labels are centered within each slice using the arc centroid method.

Loading thumbnail…

Task9&10_PieChart

This pie chart visualization breaks down the count of infected individuals across nine countries, including India, USA, Spain, Russia, UK, Italy, France, Germany, and China. The chart displays both region labels and the calculated percentage of the total infected population for each slice. Built using D3.js, the code imports the `select`, `arc`, `pie`, `scaleOrdinal`, and `schemeCategory10` functions from the `d3` module to generate the SVG rendering. The implementation includes a color-coded legend positioned to the right of the chart, with each entry showing the region name and its corresponding infected count.

Loading thumbnail…

project d3

This visualization presents global CO2 emissions and population data through a series of linked charts. It shows a line chart of emission trends over the last twenty years, a scatter plot by country, a histogram of emission values, and bar charts highlighting the top and least populated countries. The code uses d3.csv to load the dataset, then employs d3.group, d3.sum, and d3.scaleBand, alongside d3.line, d3.axisBottom, and d3.axisLeft to render SVG charts.

Loading thumbnail…

Task8_Question4

This D3.js bubble chart compares cereal products by their rating, calorie count, and manufacturer. Each circle’s position encodes rating on the x-axis and calories on the y-axis, while its radius encodes sodium level. The color of each bubble represents the manufacturing company. The visualization includes legends for both color and bubble size. Built with D3 v7 using an SVG rendering, the code relies on `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1`. Hovering over a bubble changes its stroke color to red. The data comes from a local CSV file listing cereal brands and their nutritional metrics.

Loading thumbnail…

test

This bubble chart visualizes supermarket sales data, plotting sales against discount values for individual orders. The x-axis represents discount percentages (capped at 500), while the y-axis shows sales figures. Bubble radius encodes the profit margin, and color distinguishes product categories (Furniture, Office Supplies, Technology), with accompanying legends for size and category. Built with d3.v7, the SVG visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and `d3.schemeSet1` for the palette.

Loading thumbnail…

tsk8

This visualization displays the reigns of British monarchs from 1066 to 2024 as a bubble chart, with each circle representing a monarch positioned along a timeline and colored according to their royal house (Windsor, Hanover, Stuart, etc.). The chart uses D3 v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and `selectAll` with `enter().append('circle')` to render the SVG bubbles from a hardcoded data array containing monarch names, reign dates, and house affiliations.

Loading thumbnail…

Task8_Question3

This example shows a scatter plot of Dengue fever data, with thrombocytes on the x-axis and hemoglobin on the y-axis. It loads data from a remote CSV file using D3’s `csv` function, then scales the values with `scaleLinear` and renders circles as data points. The axes are generated via `axisBottom` and `axisLeft`, with labels added as SVG text. Each point is colored using `d3.scaleOrdinal` with `d3.schemeCategory10`, and the visualization fills the browser window via `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Task8_Question2

A stacked bar chart displays the hours seven people spend across six hobbies—Outdoors, Indoors, Reading, Shopping, Fitness, and Travel—using a diverging color palette. The horizontal bars encode total hours per person, segmented by hobby, with a tooltip revealing exact values on hover. The visualization is rendered with D3 v7, using `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to construct the chart, while `.on('mouseover')` events manage a custom tooltip. Data is loaded from a CSV file, and the SVG output is styled with custom fonts and a soft background.

Loading thumbnail…

Task8_Tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes, using the x-axis for horsepower, y-axis for torque, and bubble size for highway MPG. Each bubble is color-coded by make, with a tooltip revealing the make on hover and a legend displaying the MPG scale. Built with D3 v7, it uses `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` for colors, and `d3.interpolateTurbo` for the color palette, rendering as an interactive SVG with smooth transitions. Data is loaded from a CSV file, and the chart includes axis labels, a title, and animated opacity on hover.

Loading thumbnail…

Task8_Tutorial3.2

This scatter plot displays the Iris dataset, plotting sepal length against petal length and using different point shapes to distinguish between the three iris species. The visualization uses D3 v7 to create the plot, with a categorical shape scale assigning distinct symbols (from `symbolsFill`) to each species. Axes are rendered using D3's `axisLeft` and `axisBottom` functions, while a custom legend wizard communicates the shape-to-species mapping. Data is fetched asynchronously from a remote CSV file and parsed with `csvParse` before being passed to the chart.

Loading thumbnail…

Task8_Tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width as the x and y coordinates of each point. The points are colored by species (setosa, versicolor, or virginica) using a custom color-switching function, while the point radii (`rx`, `ry`) encode sepal length and width. The visualization loads data via D3's `csv` method, uses `scaleLinear` to map domain values to SVG pixel ranges, and renders axes with `axisLeft` and `axisBottom`. The code employs D3 v6's selection-based `join` for efficient SVG circle creation, with global window dimensions defining the chart area.

Loading thumbnail…

Task8_Tutorial2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of films falling into one of five rating brackets from “below 5.0” to “above 8.5.” The visualization uses d3.stack() to compute the stacked series and d3.scaleOrdinal with a custom color palette for the rating categories. D3’s scaleLinear and scaleBand position the bars and axes, while mouseover events trigger a tooltip that displays the exact rounded percentage for each segment. The SVG is rendered with axis labels, a title, and genre labels along the y-axis.

Loading thumbnail…

Task8_Question1.2

A horizontal bar chart displays the top 20 countries by population in 2010, with countries listed on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the continuous axis, and `d3.format` to abbreviate tick labels. SVG rectangles render the bars, and the data is loaded as CSV from a GitHub repository.

Loading thumbnail…

Task8_Question1.1

This horizontal bar chart displays the 2000 populations of the top ten countries, ranked from largest to smallest. Built with React and D3 v5, the visualization uses D3's `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. The SVG rendering includes interactive tooltips that show formatted population figures when hovering over each bar. Data is loaded from a remote CSV file using D3's `csv` function, and axes are created with custom components for both bottom and left sides.

Loading thumbnail…

Task8_Tutorial2

This example showcases VizHub’s ability to integrate D3.js with modern JavaScript modules. It loads D3 v5 from UNPKG and uses the `select` API to set the text content of a `div`, while importing a custom string from a local ES6 module. The page renders a simple, centered message using CSS styling, demonstrating basic module imports and D3 selection methods.

Loading thumbnail…

Task8_Tutorial1

A horizontal bar chart displays the 2020 population estimates for 30 countries, sorted by country name along the y-axis. The visualization uses React to render SVG elements, with D3 v5 handling data loading via `csv`, linear and band scales, and axis tick formatting with `format('.2s')`. Population values are converted from the raw CSV data by multiplying the '2020' column by 1000. The chart includes labeled axes, a green bar fill, and tooltips showing formatted population values on hover.

Loading thumbnail…

5 buddhas

Five overlapping golden buddha silhouettes are arranged in a grid against a black background, each rendered from a complex SVG path. The visualization is built with React and rendered as SVG, layering thousands of randomly generated, semi-transparent polygons that produce a colorful, noisy texture over the buddha forms. The code uses React’s component model and `ReactDOM` to render the SVG elements, with the buddha path data hardcoded as a `d` attribute.