Skip to main content
Log in
A

AKSHAY

@akshay11151·12 public vizzes

Loading thumbnail…

Social Media Network - Assignment 8

This interactive network graph maps connections among six social media platforms—Facebook, Instagram, WhatsApp, YouTube, Twitter, and LinkedIn—with color-coded nodes and labeled links. Users can drag nodes to rearrange the layout while a force-directed simulation continuously repositions elements. Built with D3 v7, the visualization uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute the graph’s geometry, rendering nodes as SVG circles and links as lines. The data is defined inline as JavaScript arrays within the module.

Nov 9, 2025
Loading thumbnail…

Animal Kingdom Tree - Assignment 8

This example presents a hierarchical tree diagram of the animal kingdom, with a red root node for Animals, teal nodes for Mammals and Birds, and yellow leaf nodes for individual species. The visualization uses D3.js v7’s `hierarchy`, `tree`, and `linkVertical` APIs to compute the layout and draw the SVG paths, while `select` and `attr` manage the rendering. The data is defined inline in JavaScript, and the tree is rendered as an SVG with circle nodes and text labels.

Nov 9, 2025
Loading thumbnail…

Technology Companies Tree - Assignment 8

A horizontal tree diagram displays technology companies organized into hardware and software categories, with nodes colored by depth level. The visualization uses d3.stratify to construct the hierarchy from flat data and d3.tree for layout, while d3.linkHorizontal draws connecting paths as SVGs. A d3.scaleOrdinal assigns distinct colors to root, category, and leaf nodes, and a legend clarifies the depth-color mapping. The tree updates its label positioning based on whether nodes have children.

Nov 9, 2025
Loading thumbnail…

World Population Map - Assignment 8

This world population map visualizes population data for 30 countries using a choropleth encoding, where countries are shaded from light pink to dark red based on population size. Powered by D3.js v7 and TopoJSON, it renders geographic outlines with a Natural Earth projection and geoPath, overlaying a graticule for reference. Hovering highlights a country in gold and displays a tooltip with its name and population in millions. Population figures come from a hardcoded dataset applied via d3.scaleThreshold.

Nov 9, 2025
Loading thumbnail…

Assignment 7 - Q3

This area chart visualizes the average alcohol content of white wine across quality scores, using data from a CSV file. The visualization groups wines by quality rating and computes the mean alcohol percentage for each score. Built with D3.js v7, the chart combines a filled area path with an overlaid line, points, and value labels, all rendered as SVG. The code uses D3 scales, axes, the `d3.area` generator, and `d3.rollup` for data aggregation, with styling defined in an external CSS file.

Oct 26, 2025
Loading thumbnail…

Assignment 7 - Q2 - 2

This chart shows the average alcohol content for each wine quality score in a white wine dataset, with a line connecting the mean values and orange circles marking each point. The visualization is built using D3 v7, with the SVG rendered through a `d3.svg` container. The code loads a CSV from a GitHub Gist, calculates averages using `d3.rollup` and `d3.mean`, and scales data with `d3.scaleLinear`. It draws the line via `d3.line` and axes with `d3.axisBottom` and `d3.axisLeft`.

Oct 26, 2025
Loading thumbnail…

Assignment 7 - Q2

This pie chart visualizes the distribution of wine quality ratings from a CSV dataset of white wines. The visualization shows the proportion of wines at each quality level, with slices labeled by their quality score and a custom legend displaying exact counts. The chart is rendered using D3 v7's modular APIs, including `d3.pie()` for slice generation, `d3.arc()` for path construction, and `d3.scaleOrdinal()` for categorical coloring. Data is loaded from a remote CSV file via `d3.csv()` and aggregated with `d3.rollup()` to count entries per quality group.

Oct 26, 2025
Loading thumbnail…

Assignment 7

This scatter plot shows the relationship between alcohol content and quality scores for white wine samples, with each circle representing an individual wine. A reusable `scatterPlot()` function in D3 v7 builds the SVG chart, using `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The chart loads CSV data from a GitHub gist, parses the numeric columns, and renders semi-transparent steelblue points. The function exposes getter/setter methods for width, height, value accessors, and color, demonstrating a configurable chart pattern.

Oct 26, 2025
Loading thumbnail…

Assignment 6 - Q1

This bar chart displays the top 10 car makes by average price, sorted in descending order from a CSV dataset of car listings. Each bar’s height represents the mean price for that make, with value labels showing dollar amounts in thousands. Built with D3 v7, the visualization loads data via `d3.csv`, groups and aggregates it using `d3.rollup` with `d3.mean`, and renders SVG rectangles with axes created through `d3.axisBottom` and `d3.axisLeft`. Interactive hover effects change bar opacity and color.

Oct 19, 2025
Loading thumbnail…

Assignment 6 - Q3

This visualization of the Iris dataset presents two complementary charts: a multi-series line chart tracks sepal length, sepal width, and petal length across all 150 samples, while a combined bar and line chart displays species counts alongside average petal width. The code uses D3.js v7 with SVG rendering, employing `d3.csv` to load data, `d3.line` for the line paths, and `d3.rollups` to aggregate species statistics. Hover effects on bars and custom color schemes enhance interactivity.

Oct 19, 2025
Loading thumbnail…

Assignment 6 - Q2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for 150 flower samples. Each point is colored by species (setosa, versicolor, virginica) using d3.scaleOrdinal, with hover effects that enlarge points via mouseover events. The chart loads data from a CSV hosted on jsDelivr using d3.csv, renders axes with d3.axisBottom and d3.axisLeft, and includes an SVG legend. An accompanying d3.scaleLinear maps data values to pixel coordinates within an 800×600 SVG canvas.

Oct 19, 2025
Loading thumbnail…

Assignment 5

This visualization presents a summary of a car dataset, including total vehicles, average price, average mileage, and most common make, alongside a bar chart showing the number of cars per make. It is built with D3 v7, using d3.csv to load the data and d3.select to manage the SVG. The chart uses d3.scaleBand and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft for ticks, and d3.mean and d3.rollups for aggregations.

Oct 5, 2025