vikramkotlo9@gmail.com

Fork of Blank Slate with Hot Reloading

This visualization displays a pie chart of video game releases, using release year as the categorical color grouping and price as the slice value. The chart is built with D3.js v6, loading data from a remote CSV file via `d3.csv` and rendering SVG `path` elements with a `d3.pie` layout and `d3.arc` generator. A color scale using `d3.scaleOrdinal` and `d3.schemeSet3` fills each slice, while text labels at the centroid of each arc show the year and price. A simple legend on the left lists the years with matching colors.

5320-Group25-Vikram-

Two D3.js v7 charts explore COVID-19’s demographic impact from a CSV dataset loaded via `d3.csvParse`. A pie chart aggregates confirmed cases by WHO region using `d3.pie`, `d3.arc`, and an ordinal color scale, with an HTML legend listing counts. A second SVG chart displays grouped bars for the top ten countries, comparing confirmed, death, and recovered cases via a linear scale, band scale, and `d3.axisBottom`/`d3.axisLeft`. Both visuals use SVG rendering and rely on color-coded legends for interpretation.

5320-Group25-Vikram

Murali Final

This visualization presents a comparative analysis of Indian agricultural and demographic data through four distinct charts. It contrasts the top ten rice-producing states with sugarcane production trends over recent years, while also displaying the most populous states and the national gender distribution. The agricultural bar chart employs interactive tooltips and a color-coded legend, while the demographic charts render data as a bar chart and a pie chart. The implementation uses D3 v7's `scaleBand` and `scaleLinear` for axes, `pie` and `arc` for the pie chart, and CSV data loaded from external gist sources.

sai_tej_2

sai tej _1

A dashboard presents two linked visualizations of product category distribution from a May 2022 dataset. The first is a bar chart showing counts per category with interactive tooltips, while the second is a pie chart displaying the same data. Both use D3 v7 APIs including `d3.csv`, `d3.rollup`, `d3.scaleBand`, `d3.scaleLinear`, `d3.pie`, and `d3.arc`, rendered as SVG with hover effects and legends.

new shivsai

This example presents COVID-19 statistics through two coordinated D3 v7 visualizations: a pie chart and a bar chart. The pie chart breaks down global confirmed cases by WHO Region, while the bar chart displays confirmed cases per country. Both visualizations load data from the same CSV file using `d3.csv` and update interactively via mouseover tooltips showing detailed case counts. The charts use `d3.pie`, `d3.arc`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG elements, with `d3.schemeCategory10` providing distinct colors for categorical data.

verma

This example presents a dashboard of five D3.js v7 visualizations analyzing CO2 emissions and population data from a GitHub-hosted CSV. A line chart, scatter plot, and histogram summarize global CO2 emission trends over the last twenty years, while two bar charts rank the top and least populated countries by 2022 data. The scatter plot groups emissions by country, and the interface includes a supplementary index listing all countries. Using SVG rendering, the code employs d3.csv, d3.scaleBand, d3.scaleLinear, d3.line, d3.axisBottom, d3.axisLeft, d3.group, and d3.sum to build the charts.

Harshini

Four D3.js charts explore data science salaries. Two bar charts display the highest-paying jobs in the US and the top-paying companies in India, using `d3.scaleBand` and `d3.scaleLinear` with vertical bars. Two additional charts, created with the same functions, illustrate salary distributions across US employment types and work models. All charts are rendered as SVGs, with rotated x-axis labels to accommodate long category names. The data is loaded asynchronously from CSV files using `d3.csv`.

harsha new

Two side-by-side bar charts compare top-ten country rankings from separate datasets. The first shows GDP per capita using `d3.scaleBand` and `d3.scaleLinear`, with hover tooltips displaying country and value. The second visualizes gross primary education enrollment, also as ranked bars. Both use D3 v6 with SVG rendering, load CSV data via `d3.csv`, and include rotated axis labels for readability.

new vitesh

Two side-by-side bar charts compare the ten countries with the highest Global Innovation Index (GII) scores. The left chart displays each country’s 2023 population, while the right chart shows its GII value, using the same country order for direct visual comparison. Built with D3 v6, the example fetches and merges two CSV datasets, then renders SVG bar charts with rotated x-axis labels. The code uses `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` plus `d3.axisLeft` for axes.

Activity 6-vikram

This gallery example presents two coordinated D3.js visualizations of global health statistics. The first chart is a histogram displaying the distribution of health expenditure as a percentage of GDP, using `d3.histogram` with interactive tooltips that reveal bin ranges and counts. The second chart is a scatter plot matrix exploring correlations between three health expenditure variables, employing `d3.scaleLinear` and `d3.axis`. Data is loaded from a CSV file via `d3.csv` and rendered as SVG elements within distinct chart containers.

Fork of sample start 1

This example presents a multi-panel dashboard exploring global development indicators, using D3.js v7 to render data from CSV files hosted on GitHub. The visualizations include a bar chart showing nurses and midwives per 1000 people by country, scatter plots of population projections and gender inequality metrics, and an additional bar chart of GDP per capita. The code uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes, with interactive tooltips on hover for the first chart. Rendered as SVG, the layout uses three separate containers with a background image applied via CSS.

sample

This example presents a multi-panel dashboard of health and development indicators using D3.js v7. It displays a simple circle, several scatter plots comparing health expenditure metrics (such as public health spending as a percentage of GDP), a line chart of per-capita health expenditure, a scatter plot relating the Gender Inequality Index to the Human Development Index, and a bar chart of GDP per capita. The visualizations are rendered as SVGs with animations and interactive tooltips. The code uses d3.csv to load remote datasets, d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, d3.scaleOrdinal with d3.schemeCategory10, and a d3.zoom for panning and zooming in one chart.

smaple

vitesh sample

This example presents two linked visualizations of health expenditure data across countries from a CSV dataset. The first chart is a histogram showing the distribution of health expenditure as a percentage of GDP, using `d3.histogram` and `d3.bin` with interactive tooltips on mouseover. The second chart displays a scatter plot matrix for correlation analysis across three health expenditure dimensions. Both charts are rendered as SVG using D3 v6, with axes, labels, and responsive styling via inline-block containers.

Fork of Fork of Hello VizHub Q2 vk

Fork of Hello VizHub

This example shows the distribution of sepal lengths across Iris species using an interactive SVG pie chart. The chart displays the percentage of each species in tooltips and includes a legend. It loads the Iris dataset from a CSV URL using D3's `csv` function, then renders the visualization with `pie` and `arc` generators from the D3 6.7.0 library. The code also demonstrates importing D3 via UNPKG and using the `select` and `append` DOM methods to build the SVG.

assignment 2 VK

Fork of Reusable Scatter plot Activity 8 v

assignment2 vikram

This scatter plot visualizes the relationship between sepal width and sepal length from an Iris dataset loaded via `d3.csv`. The SVG rendering uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and appends circle elements for each data point. The reusable `ScatterPlot` function takes a container selector and data array, setting up a fixed 600×400 pixel chart with margins and axis labels. Points are colored steelblue with a radius of 3 pixels.

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

A dense field of semi-transparent, randomly colored diamond shapes overlaps a large, detailed Buddha silhouette drawn in white SVG paths. The polygons are generated procedurally from nested array maps, with random coordinates, fills, and rotations, while the Buddha figure comes from an inline path dataset. Built with React and rendered as SVG, the example layers abstract geometric noise over a recognizable sacred icon.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with each car brand represented as a circle positioned by its performance metrics and scaled by fuel efficiency. The visualization uses D3 v7 to render SVG elements, employing linear scales for the axes, an ordinal color scale with interpolateTurbo for car brands, and interactive tooltips that display the car make on hover. A legend explains the bubble size mapping to highway MPG values, while the data is loaded from a CSV file containing performance specifications across 31 automotive manufacturers.

scatter plot with shape

This example presents a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It distinguishes the three iris species by rendering each data point with a distinct shape from the `symbolsFill` array, using `scaleOrdinal` and the `symbol` type generator. The visualization includes labeled axes built with `axisLeft` and `axisBottom`, alongside a custom shape legend positioned within the plot. The chart loads data via `csvParse` from a remote GitHub source and demonstrates modular ES6 imports for local visualization components.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis, petal width on the y-axis, and sepal dimensions encoded through circle attributes. Each point is colored by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica. The visualization loads data from a GitHub gist using D3 v6’s `csv` method, with scales from `scaleLinear`, axes from `axisLeft` and `axisBottom`, and marks rendered as SVG circles.

Activity6_Task 2

A stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, using five rating brackets from below 5.0 to above 8.5. The chart uses `d3.stack()` to compute stacked series, `d3.scaleOrdinal` for color encoding, and `d3.scaleBand` for the categorical genre axis. Hovering over a segment reveals the exact percentage via a tooltip. Data comes from a local CSV file, rendered as SVG with D3 v7.

Activity6_Task 2

Activity 6_Task 1

activity 6 task1 tutorial 1

Fork of Hello VizHub vikram

Fork of Hello VizHub vikram

This example demonstrates how a minimal D3.js visualization can be built using VizHub’s ES6 module system. It imports the `select` function from D3 and a custom local module, `myMessage.js`, to display the text “Hello VizHub!” inside a page element. The code uses D3 v5 loaded from UNPKG, with styling provided by external CSS. The visualization renders no data or charts, instead serving as a template for loading libraries and organizing JavaScript code into reusable modules.

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

vikram 6 Buddha

This example shows a Buddha-like silhouette crafted from overlapping geometric forms, rendered against a floral background image. The visualization builds the figure using nested arrays to generate numerous small elements with randomized positions, colors, and opacity. It relies on React for component structure and SVG for drawing the Buddha path, with the styling applied through a mixture of CSS and inline attributes. The code imports React and ReactDOM to manage the rendering.