sannihitha.k23@gmail.com

WEBPAGE

This dashboard presents a collection of data visualizations, offering buttons to navigate between different chart types such as bar charts, scatter plots, heatmaps, and line charts. It loads Chart.js for canvas-based bar charts and displays externally hosted SVG images for other visualizations, with buttons linking out to VizHub projects built with Tableau, Python, PowerBI, and D3.js. The interface uses a gradient background and interactive hover effects on its selection buttons.

D3.js

Python

This example presents a curated collection of e-commerce visualizations, allowing users to switch between nine distinct charts showing new cases over time, orders by state, order status proportions, and pre- vs. post-COVID comparisons. Users select a chart via buttons, which dynamically replaces the displayed image or canvas. The code loads remote SVG files generated externally and uses Chart.js for canvas-based bar charts, while managing display visibility through JavaScript DOM manipulation.

PowerBi

This example presents a series of Power BI-style data visualizations, including bar charts, scatter plots, and trend analyses, which users can select via buttons. It uses the Chart.js library to render a canvas-based bar chart and loads pre-generated SVG files from GitHub for other chart types. The interface is built with HTML, CSS, and vanilla JavaScript, with event listeners managing the display of either the canvas chart or an SVG image.

Tableau

Fork of WEBPAGE

webpage

This example demonstrates a chart viewer that switches between a Chart.js canvas bar chart and pre-rendered SVG visualizations, including scatter plots, heatmaps, and time-series comparisons. Users select charts via HTML buttons, triggering functions that hide the Canvas element and load external SVG files from GitHub using the `img.src` property. The Chart.js `Chart` constructor handles the bar chart with categorical data, while SVG images are displayed directly, with error handling via `onerror`. It also includes an ES6 module exporting a message string.

DONUT CHART

ghantt chart

chart

This bar chart visualizes order totals by state, with data loaded from a CSV file. It sorts the states descending by total value and displays each state's total directly above its bar. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axisBottom` and `d3.axisLeft` for the tick marks. The chart labels the axes "State" and "Total" and includes a title.

p1

t4 scatterplot

t4 scatterplot

A scatterplot visualizes total sales by day, with each point colored by order status (Delivered, RTO, Returned). The chart includes axes, a title, and a legend. It loads CSV data from a GitHub-hosted file, using D3 v7 scales (`scaleLinear`, `scaleOrdinal`) to map day and total values to positions and statuses to colors. The code renders circles as SVG elements and appends axes via `d3.axisBottom` and `d3.axisLeft`.

t4

t5

This example demonstrates a minimal VizHub project that renders a static text message using D3.js. It shows how to load D3 via UNPKG and use ES6 modules, with `import { select } from 'd3'` to set the text content of a div element and a local `myMessage.js` module providing the “Hello VizHub!” string. The page uses `index.html` with a linked `styles.css` for large centered typography, and the JavaScript runs once on load without any interactivity or data processing.

T4

This scatter plot shows the total value of individual orders across the days of a month, with points jittered vertically based on their status (Delivered, RTO, or Returned) to reduce overplotting. The code loads CSV data from a GitHub repository using `d3.csv`, parses the date column with `d3.timeParse`, and maps adjusted day values to an SVG canvas using `d3.scaleLinear`. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, while circles are appended to the SVG for each order point. The visualization relies on D3 v7 loaded directly from UNPKG.

T3

This example visualizes average sales amounts by sales channel, with a bar chart comparing categories from an Amazon Sale Report dataset loaded via `d3.csv`. The code computes group means using `d3.rollups` and `d3.mean`, then renders the bars with SVG rectangles. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes rotated axis labels and a title. Data is fetched from a GitHub raw URL, and the chart is built with D3 v7 within an 800x400 pixel container.

Fork of t2

This example presents two D3.js v7 charts: a bar chart and a pie chart. The bar chart visualizes the count of orders by state using `d3.rollup` and `d3.scaleBand`, while the pie chart displays order statuses using `d3.pie` and `d3.arc`. Both charts load data from remote CSV files hosted on GitHub and render as SVG. The code includes axis labels, a chart title, and rotated tick labels, with styling applied via CSS classes.

Fork of t2

This example presents two D3.js visualizations: a bar chart showing the count of orders by state and a pie chart displaying the proportion of order statuses. The charts load CSV data from GitHub repositories and render as SVG elements. The bar chart employs d3.scaleBand and d3.scaleLinear with axes, while the pie chart uses d3.pie and d3.arc with percentage labels and a categorical color scheme.

t2

This example renders a simple text message in the browser using D3.js. It demonstrates how to load D3 v5 from UNPKG and import local ES6 modules. The code uses the `select` API from D3 to target the `#message` div and set its text content, while a separate module exports the string "Hello VizHub!". The page styling is handled by a linked CSS file.

prjct t2

This example plots temperature readings over time from the San Francisco week temperature dataset, rendered as a smooth natural curve through the data points. The visualization uses React with D3 v7, employing `scaleTime` and `scaleLinear` for the axes, `line()` with `curveNatural` for the path, and custom React components for the axes and marks. The SVG output includes interactive hover titles on each circle, though the circles remain commented out, and the chart supports labels for both time and temperature dimensions.

task2 prjct

project task2

Prjct1

Prjct

ProjectDV

Fork of project1

This example shows a bar chart of the average count of data points per US state, sorted in descending order. The chart is rendered with SVG using D3 v7, featuring axis labels, a toggleable filters panel, and responsive resizing. Data is loaded from a remote CSV file via `d3.csv` and processed with `d3.group` and `d3.mean` to compute state averages. The `viz.js` module draws the chart using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`.

Fork of Dynamic Bar Graph - Average Salary Landscape for Data Professionals

This interactive bar chart visualizes average salaries across job titles, with a color gradient from green to orange indicating salary magnitude. Users can filter the dataset by job category, experience level, and company size through dropdown menus, triggering dynamic updates via D3.js data joins and scales. The SVG rendering includes axis labels, rotated tick text, and hover tooltips displaying specific salary values. Data originates from a Kaggle dataset on data science jobs, loaded as CSV and processed using D3's `csv`, `group`, and `mean` functions. A toggle button reveals hidden filter controls for exploring salary distribution patterns.

project task1

project task1

A bar chart displays the number of e-commerce healthcare orders for each state, sorted in descending order to highlight the states with the highest order counts. The visualization uses D3 v6 to load a CSV dataset from a GitHub gist, roll up the records by state, and render an SVG with an X and Y axis. Data processing relies on `d3.rollups`, `d3.descending`, and scaling via `d3.scaleBand` and `d3.scaleLinear`, while the bars are created with `d3.selectAll(...).join("rect")`. State labels are rotated for readability on the axis.

project

This bar chart displays the number of e-commerce healthcare orders for each state, sorted from highest to lowest count. Built with D3 v6, it loads data from a GitHub gist via `d3.csv`, groups records by state, and renders the result as an SVG using `d3.scaleBand` and `d3.scaleLinear` for the axes and bars. The x-axis labels are rotated 45 degrees for readability.

pj

This bar chart displays the number of orders for each U.S. state, using a vertical bar for every state with the height proportional to its order count. The chart is rendered as an SVG, with state labels rotated 45 degrees for readability. It loads data from a JSON file using `d3.json` and constructs the visualization with D3 v6 APIs including `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`. The bars are colored a teal-green (`#69b3a2`) and styled via a CSS class.

Q2 Area chart

This area chart visualizes annual cost data from 2000 to 2013, showing a fluctuating trend with a notable peak in 2007. The chart uses an SVG path generated by `d3.area()` with a linear scale for both axes, and includes interactive tooltips that display year and cost values. Data comes from a CSV file, and the visualization employs `d3.axisBottom` and `d3.axisLeft` for axis rendering, with invisible circles for hover detection. The design features a teal-filled area with a darker stroke, offering a clear view of cost variations over time.

area chart

An animated SVG area chart depicts yearly cost data from a CSV file, loading via D3's `d3.csv` fetch and rendering with an SVG `path`. The chart maps time-based `year` values on a time scale and `cost` on a linear scale, using `d3.area` to generate the filled region. Interactive red circles, added via `svg.selectAll('dot').data(data).enter()`, display a tooltip on mouseover with the year and cost, while the tooltip div transitions its opacity using D3's `.transition()`.

area chart

This area chart visualizes monthly sales data from a hardcoded JavaScript array. The chart uses a steelblue filled path to represent the area under the line, with the x-axis mapping months and the y-axis scaling linearly from zero to the maximum sales value. Built with D3 v6, the visualization employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.area` to generate the SVG path, while `d3.axisBottom` and `d3.axisLeft` render the axes. The SVG output is fixed at 600 by 400 pixels within the HTML page.

area chart

This area chart displays India’s population across different countries, with a steel-blue filled path representing the data. It loads population data from a CSV file and renders it as an SVG using D3 v7. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area()` to generate the area shape. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and labels are added for both axes.

Q2 area chart

This example visualizes daily sales data as a filled area chart over time. The chart uses D3 v7 to load a CSV file, parse dates with `d3.timeParse`, and render an SVG path with the `d3.area` generator. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels for date and sales amount. The area is styled with a semi-transparent steelblue fill against a light gray background.

Area chart

This area chart visualizes web traffic data over time, using a filled blue region to represent the number of daily visitors. The x-axis displays dates parsed with `d3.timeParse`, while the y-axis scales visitor counts using `d3.scaleLinear`. The code constructs the SVG via `d3.select`, renders axes with `d3.axisBottom` and `d3.axisLeft`, and draws the area path using `d3.area` with data loaded from a remote CSV through `d3.csv`.

Q1 pie chart

This pie chart displays the distribution of total sales by product category for a given dataset. It uses the D3.js library (v7) to render an SVG-based visualization featuring an interactive legend and a hover effect. The chart's slices are drawn using `d3.pie` and `d3.arc`, with `d3.rollup` and `d3.sum` aggregating the sales data, which is loaded from a CSV file. On mouseover, a slice enlarges using a separate `hoverArc` and displays the category and sales total as a text label.

Activity-6 Q3

This example presents a scatter plot of penguin measurements, using flipper length and body mass for the x- and y-axes, with each point’s color indicating species (Adelie, Gentoo, or Chinstrap). It applies D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to build the axes, and loads tabular data from a CSV hosted on GitHub. Circles are drawn via SVG using a `join` selection, with the `extent` function for domain calculations.

Activity-6 Q2

This stacked bar chart displays the distribution of IMDb movie ratings across eight genres, showing the proportion of films falling into each rating bracket from “below 5.0” to “above 8.5.” The horizontal bars use d3.stack with d3.scaleOrdinal for color coding, with axes rendered via d3.axisLeft and d3.axisBottom on an SVG canvas. Hovering over any segment triggers a tooltip that displays the exact percentage for that rating level within the genre, with opacity changes and event listeners from d3-selection. Data originates from a CSV file loaded with d3.csv.

Activity-6 task 2

This stacked bar chart visualizes the impact of movie genre on IMDb ratings, displaying the percentage of each rating level (from below 5.0 to above 8.5) within six genres, with totals summing to 100%. The chart uses d3.stack() to create stacked segments, d3.scaleBand() for the genre categories on the y-axis, and d3.scaleLinear() for the percentage scale on the x-axis. Interactive tooltips, implemented with D3 event handlers and HTML div elements, show precise percentages on hover, while a color scale distinguishes the five rating categories across the SVG-rendered bars.

Activity-6 Tutorial-4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, using D3 v7 with SVG and animation. The x-axis maps horsepower, the y-axis maps torque, and bubble size encodes highway MPG, while color distinguishes each make via a categorical scale. Interactive tooltips appear on mouseover to display the make name, and the chart includes legends for bubble size and color. Data is loaded from a CSV file via `d3.csv`, with scales implemented using `d3.scaleLinear` and `d3.scaleOrdinal`.

Activity6_Task4

This interactive bubble chart compares smartphones by price, RAM, and storage, with each bubble representing a brand positioned by price on the y-axis and RAM on the x-axis, while bubble size encodes storage capacity. The visualization uses D3.js v7 to render an SVG with axes, a color scale based on brand, and a legend for storage values. A custom tooltip appears on hover, displaying brand, price, storage, RAM, and screen size, with smooth transitions for show and hide effects. The chart reads the `bubblechart.csv` data file and incorporates React starter code for the frontend framework.

ACTIVITY-6 Tutorial 3.1

This scatter plot visualizes the Iris dataset, displaying petal length against petal width, with each point colored by species (setosa, versicolor, or virginica). The visualization is built using D3 version 6, leveraging the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data from a remote GitHub source and render an SVG. It uses a custom marker function to assign colors based on the species field, and a data join operation to create the circles. Axis labels are added with rotated text, and the plot is scaled to fill the browser window.

Activity-6 Tutorial-3

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with different species distinguished by distinct symbol shapes from `d3.symbol`. The visualization uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `symbolsFill` to assign shapes. It loads the data from a remote CSV file using `d3.csvParse` and renders the plot with D3 v7, including axes from the `axes.js` module and a shape legend generated via `d3.symbol`. The SVG fills the browser viewport, with margins and labels configured in the `scatterPlot` function.

Activity-6 question-1

Activity-6 question-1

Activity-6 question-1

This example displays a large, centered text message in the browser. It demonstrates basic VizHub project structure by loading D3 from a CDN and importing both the D3 `select` function and a local ES6 module. The code uses `select('#message').text(message)` to update the HTML div’s content, while CSS styling handles the visual layout. The data source is a static string defined in `myMessage.js`.

Activity-6 Question-1

This visualization presents a horizontal bar chart of population figures for 30 countries in 2020, ranked along a categorical y-axis with population values on a linear x-axis. The React-based application uses D3 v5 modules including `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and tick labels, with SVG rendering for bars and axes. Data is loaded asynchronously from a GitHub-hosted CSV file via `d3.csv`, and each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Activity-6

This bar chart displays the population figures for 30 countries in 2020, using green bars arranged along a categorical y-axis with a quantitative x-axis. The visualization is built with React and D3 v5, rendering SVG elements through custom components for axes and marks. Population data is loaded from a remote CSV file using D3's `csv` function. The x-axis uses D3's `format` function to abbreviate large numbers, converting values to billions with the letter "B".

Activity-6

Activity-6 Question-1

Fork of Activity-6 Question-1

Activity-6

6 Buddhas

Six overlapping Buddha silhouettes in a colorful SVG mandala arrangement sit against a photographic flower background. Built with React and rendered via SVG paths, the visualization generates random colored null elements from a nested array mapping loop. The code uses React's `createElement` pattern through JSX, with SVG `<g>` transforms and `<path>` data, while the background image is applied via CSS.

5 Buddhas

A grid of overlapping, rotated polygons creates a dense, generative field of color, alongside a single large SVG path representing a Buddha figure. The sketch uses React to render the scene, mapping over an array to produce hundreds of semi-transparent shapes with randomly generated coordinates and RGB fill values. The Buddha path is fixed and transformed via a translation and scale, set against a black background, while the overall effect layers chaotic geometric noise with a distinct central figure.

2 Buddhas

5 Buddhas