Skip to main content
Log in
K

krishi7079@gmail.com

@KrishiJyothirmaiV·21 public vizzes

Loading thumbnail…

Fork of Project

This dashboard presents FIFA player statistics, allowing users to filter by nationality through a dropdown menu. It displays summary metrics like total players, average overall rating, and total clubs, alongside multiple D3.js charts: a bar chart of top clubs by average overall, a pie chart for club value, an age histogram, and a wage-versus-potential bubble chart. The visualizations are built with d3.v7, using APIs like `d3.csv`, `d3.rollups`, `d3.scaleBand`, and `d3.scaleLinear`. Data is fetched from a remote CSV file, and rendering is done via SVG with a tooltip for interactivity.

Apr 28, 2025
Loading thumbnail…

1st ploat

This dashboard presents three interactive D3.js visualizations of soccer player statistics. It includes a histogram of player age distribution, a bubble chart plotting player wage against potential, and a pie chart showing the top 10 clubs by total player value. The visualizations use d3.csv to load data, with d3.histogram, d3.scaleLinear, and d3.axisBottom/axisLeft for the bar chart, alongside SVG rendering. Hovering over bars triggers a tooltip that displays the age range and count, while all charts share a consistent white background with rounded corners.

Apr 25, 2025
Loading thumbnail…

Question 2 of Activity 7.1

This visualization displays Lakme’s share price over time as a green area chart, with date on the x-axis and the price in rupees on the y-axis. It loads CSV data from a Gist URL and parses the date and price columns. Using D3 v7, the code defines time and linear scales, then applies `d3.area` to render the filled region. Axis labels are added, and x-axis tick text is rotated 45 degrees for readability. The chart is rendered as an SVG with a 1000×500 canvas.

Apr 6, 2025
Loading thumbnail…

Question 1 of Activity 7.1

This pie chart visualizes household expenditures by product category, with each slice labeled and connected to its corresponding value via an arrow line. The chart uses D3.js v7’s `d3.pie` and `d3.arc` generators to compute slice angles and paths, while `outerArc` and polylines position labels outside the circle. Data is loaded from a CSV file hosted on GitHub Gist. A legend, built with appended SVG rects and text, maps colors to categories, and `d3.scaleOrdinal` with `schemeCategory10` assigns categorical colors.

Apr 6, 2025
Loading thumbnail…

Activity 6 Question 4

This bubble chart visualizes sales performance for 39 products, plotting Revenue on the x-axis against Units Sold on the y-axis, with bubble radius encoding units sold and color encoding product category (Electronics, Apparel, Home Decor). Hovering over a bubble reveals a tooltip with product details. Built with D3 v7, it uses d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeCategory10 for category colors, rendering SVG elements from a CSV data source.

Mar 31, 2025
Loading thumbnail…

Activity 6 Task4

This interactive bubble chart visualizes the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size and color) for various car makes. Built with D3.js v7, the SVG renders scaled circles positioned on linear axes, with color assigned via an ordinal scale using the `d3.interpolateTurbo` function. A hovering tooltip reveals the car make, and a legend clarifies the MPG scale. Data comes from the `bubblechart.csv` file, presented with animation on hover transitions.

Mar 30, 2025
Loading thumbnail…

Activity 6 Q3

This scatter plot shows the relationship between sales amount and number of orders, with each point colored by product category (electronics, cosmetics, or clothing). The visualization loads CSV data from a GitHub gist, uses `d3.csv` to parse the dataset, and renders circles via SVG. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and a `d3.scaleOrdinal` to map categories to colors. A manually positioned legend explains the color coding at the bottom-right corner.

Mar 30, 2025
Loading thumbnail…

Task 3 activity 6 - 3.2

This scatter plot shows the relationship between sepal length and petal length for three iris species, with each species distinguished by a unique shape symbol (circle, square, and triangle) and a legend on the right. The visualization uses D3.js version 7 to load and parse data from a CSV file containing 150 iris flower measurements, then maps the numeric columns to a linear scale on both axes. The code employs `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` for rendering the marks, while `axisLeft` and `axisBottom` create the labeled axes.

Mar 30, 2025
Loading thumbnail…

Task 3 activity 6

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica). The SVG rendering uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. A legend-like color scheme distinguishes species via a marker function, with axis labels provided in green text. Data originates from a GitHub-hosted CSV file.

Mar 30, 2025
Loading thumbnail…

Fork of Activity 6 task 2 question 2

A stacked bar chart visualizes quarterly sales contributions across four regions—South, Central, East, and West—from 2018 to 2021, with each bar segmented by region and colored via a categorical scale. The chart uses D3 v7 to load CSV data, compute stacked series through `d3.stack()`, and render SVG rectangles scaled by `d3.scaleBand()` and `d3.scaleLinear()`. Hovering over a segment reveals a tooltip with the exact sales value, while an external legend identifies each region’s color. Axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`.

Mar 30, 2025
Loading thumbnail…

Activity 6 task 2

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, with each genre’s bars summing to 100%. It uses d3.stack() to aggregate ratings into five categories, d3.scaleBand for the genre axis, and d3.scaleLinear for percentages. Hovering highlights segments and displays a tooltip with exact percentages via d3.selector. The SVG is rendered with d3.v7, data from a CSV file, and styled with custom CSS.

Mar 30, 2025
Loading thumbnail…

Fork of Fork of Activity-6 Q1-1.2

This example visualizes the 2010 population of 20 countries as a horizontal bar chart, with each bar’s length encoding population magnitude. The bars are rendered as light green rectangles on an SVG canvas, using a linear x-scale and a band y-scale for country labels. Population data is loaded from a GitHub-hosted CSV via `d3.csv`. Axes are configured with `d3.axisBottom` and `d3.axisLeft`, with tick labels formatted using `d3.format` (converting millions to billions). The chart is built modularly with separate JavaScript files for axes and marks, all orchestrated in `index.js`.

Mar 30, 2025
Loading thumbnail…

Fork of Activity-6 Q1-1.1

This horizontal bar chart visualizes the population of ten countries in the year 2000. Sorted bars extend from the left, with light green rectangles representing each nation's population value, while the y-axis lists country names and the x-axis displays population counts. Built with D3 v7, the visualization uses `d3.axisBottom` and `d3.axisLeft` for axes, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and the SVG rendering is generated through separate modules for axes, marks, and data fetching.

Mar 30, 2025
Loading thumbnail…

Activity-6 Task1

This horizontal bar chart displays the population of the top 30 countries in the year 2020, sorted by their 2000 population values from a CSV dataset. The visualization uses d3.v7 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Custom axis components format large numbers with abbreviations (e.g., "1.2B" instead of 1,200,000,000) and label the axes as "POPULATION-2020". Light green rectangles represent each country's population, with axes and labels generated programmatically via the D3 API.

Mar 30, 2025
Loading thumbnail…

test

A horizontal bar chart displays the 2020 population estimates for 30 countries, with bars ordered by country name. The visualization uses React components to render SVG elements, with D3 scales (scaleBand and scaleLinear) and axes (AxisBottom, AxisLeft) handling positioning. Population values are loaded via d3.csv from a GitHub-hosted dataset, formatted in billions using d3.format, and rendered as green rectangles with tooltips showing each country's exact population.

Mar 30, 2025
Loading thumbnail…

test

This example displays the text “Hello VizHub!” prominently centered on a blank page. It demonstrates a minimal D3.js setup, importing the `select` function from D3 v6 to target the HTML element with the id `message` and set its content. The message itself is defined in a separate ES6 module and imported into the main script. The visual result is a simple, large-font greeting, relying on CSS for styling.

Mar 30, 2025
Loading thumbnail…

Fork of IMDb Movie ratings

This visualization uses a stacked horizontal bar chart to show the distribution of IMDb ratings across six movie genres. Each bar represents a genre, with colored segments corresponding to rating brackets from "below 5.0" to "above 8.5," allowing comparison of rating profiles. Hovering over a segment reveals the exact percentage for that genre and rating category. The chart is built with D3 v7, using `d3.stack()` for the stacked bars, `d3.scaleBand` for the y-axis, and `d3.scaleOrdinal` for the color scheme. Data is loaded from a CSV file and rendered as SVG.

Mar 30, 2025
Loading thumbnail…

Fork of Activity 7 sample

This fork of Activity 7 shows a horizontal bar chart of 2020 population estimates for 30 countries, with bars colored green on an SVG rendered through React. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate tick labels (e.g., “B” for billions). Data is loaded from a CSV file via d3.csv and transformed by multiplying the “2020” column by 1000. Axes and marks are built declaratively as React components, with a `<title>` element providing a native tooltip on each bar.

Mar 30, 2025
Loading thumbnail…

Activity - 6

A simple web page displays the text “Hello VizHub!” in large, centered type. The example uses D3.js version 6, specifically the `select` function to target the `#message` div, and imports a message string from a local ES6 module. The styling is handled with CSS, setting the text alignment and font size.

Mar 30, 2025
Loading thumbnail…

Fork of Activity 6

This fork of Activity 6 displays a horizontal bar chart ranking the populations of 30 countries for 2020, sourced from a GitHub-hosted CSV. The visualization uses React components to render SVG marks, with `d3.csv` for data loading and D3 scales to map population values and country names to pixel positions. Custom axis components generate tick marks and labels, while each bar includes a native SVG `<title>` element for hover tooltips.

Mar 30, 2025
Loading thumbnail…

Activity 6

A horizontal bar chart displays the 2020 population estimates for the top 30 countries, with each bar's length encoding the population value in thousands. The React-based visualization uses D3 scale functions to map data to screen coordinates, rendering bars as SVG rectangles with tooltips showing the formatted population. Data is loaded asynchronously from a remote CSV file using d3.csv, which parses the population column into numeric values before slicing the dataset. The axes are built with custom React components that generate tick marks and labels using the scale's domain and bandwidth properties.

Mar 30, 2025