S

Sai Vamshi B

@saivamshib·16 public vizzes

Loading thumbnail…

Assignment 8 3

This interactive force-directed network visualization maps relationships between eight campus clubs, grouped into categories like Technology, Creative, Academic, and Recreation. It uses d3.forceSimulation with forceLink, forceManyBody, and forceCollide to position nodes, while link thickness encodes interaction strength. Colors differentiate club categories via a d3.scaleOrdinal. Dragging, hover tooltips, and labels are implemented with D3 event handlers. The SVG render is interactive, revealing each club’s category and relative size on mouseover.

Loading thumbnail…

Assignment 8 2

This example shows a three-level biological classification hierarchy, from a root “Living Things” node down to main categories like Animals, Plants, and Fungi, and then to leaf nodes such as Mammals and Flowering. The D3.js (v7) code uses `d3.hierarchy` and `d3.tree` to compute the layout, with SVG links drawn via `d3.linkHorizontal` and node shapes rendered as rectangles, circles, and rotated diamonds. Text labels and a legend are also included, all rendered as SVG elements with styling defined in the HTML.

Loading thumbnail…

Assignment 8 1

This interactive choropleth map visualizes the estimated percentage of internet users per country, using a cool blue color gradient to represent the range from 0–14% to 86–100%. Hovering over a country reveals its exact value in a tooltip. The visualization is built with D3.js v7 and the TopoJSON client, using a geoMercator projection and d3.geoPath to render world boundaries. A static CSV dataset embedded in the code supplies the country-value pairs, which are mapped to a d3.scaleQuantize color scale, while a legend clarifies the data ranges and includes a "No data" category.

Loading thumbnail…

4 Area Chart

This area chart visualizes monthly revenue growth from January to August, using a smooth, curved line to connect data points and a light blue fill beneath the line to emphasize the upward trend. The chart is built with D3.js v7, using `d3.scalePoint` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.area` and `d3.line` generators to create the filled area and stroke. Data is loaded from a CSV file (`monthly_revenue.csv`), and the SVG output includes axis labels, a title, and circular markers at each month’s revenue value.

Loading thumbnail…

2 Pie Chart

This pie chart visualizes the distribution of student exam scores, grouped into ranges from 55-64 to 95+. The chart displays the percentage of students within each score band, using a legend and arc labels to show the share of each category. Built with D3 v7, the visualization loads a CSV dataset, aggregates the scores via JavaScript logic, and renders an SVG pie chart using `d3.pie()` and `d3.arc()`. Color encoding is applied through a sequential `d3.scaleOrdinal` palette, with white strokes separating the slices.

Loading thumbnail…

Resusable Scatter Plot

A reusable scatter plot displays the relationship between students' study hours and exam scores, with each point representing a student. The chart uses axes, labels, and a title to clarify the positive correlation between the two variables. Built with D3 v7, it leverages the reusable `scatterPlot` component to render SVG elements. Data is loaded from a CSV file, and the code uses `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to construct and scale the plot dynamically.

Loading thumbnail…

3 Line Chart

This visualization shows monthly revenue trends across a year using a green line and red circular data points. The chart is built with D3 v7 and rendered as an SVG, using `d3.scalePoint` for the month axis and `d3.scaleLinear` with `.nice()` for the revenue axis. A monotone X curve smooths the line via `d3.curveMonotoneX`, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes, with data loaded from a CSV file.

Loading thumbnail…

1 ice7

This area chart visualizes revenue by category from a provided CSV dataset. It aggregates revenue values using `d3.rollup` and renders the result with an area path, an overlaid line, and black circular points. The chart uses a point scale for the x-axis and a linear scale for the y-axis, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. The visualization is built using D3 v7, with SVG rendering and title and axis labels.

Loading thumbnail…

Fork 3

This combined chart displays three movie trends—revenue, rating, and viewers—across 156 weeks. Yellow bars represent revenue on the left axis, while red and blue lines show rating and viewers on the right axis. The visualization uses D3 v7 to load CSV data, create linear scales for each metric, and generate SVG elements. It includes three distinct axes, axis labels, and a legend, all built with d3.axisBottom, d3.axisLeft, and d3.axisRight.

Loading thumbnail…

fork1

This bar chart shows the number of movies in each genre from the dataset, with genres sorted in descending order of count. It is rendered as an SVG using D3.js (v7) and reads the data from `Movie_ratings.csv`. The chart uses `d3.rollup` to count movies per genre, `d3.scaleBand` and `d3.scaleLinear` for the axes, and `d3.axisLeft` with grid lines to show the y-axis scale. Bars are drawn with `.attr('fill', '#FFD700')` in gold, and axis labels are rotated for readability.

Loading thumbnail…

Fork 2

This scatter plot shows the relationship between movie ratings and revenue, with points positioned by rating on the x-axis and revenue in millions on the y-axis. The visualization uses d3.csv to load the movie_scatter.csv dataset and d3.scaleLinear for both axes, rendering the points as SVG circles with a coral fill and partial opacity. Axis generation relies on d3.axisBottom and d3.axisLeft, while the chart includes a title and axis labels appended directly to the SVG element. The code explicitly clears the previous chart content before drawing, supporting redrawing the same chart in place.

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows the number of Supreme Court cases from 2018 to 2024 grouped by issue area, with bars sorted in descending order and labeled with their counts. The chart is rendered as an SVG using D3 version 7, with scales built via `d3.scaleBand` and `d3.scaleLinear`. It loads the data from a remote CSV file using `d3.csv` and aggregates it with `d3.rollups`. The visualization includes hover effects on the bars, gridlines, axis labels, and a rotated x-axis for readability.

Loading thumbnail…

Task 1

This bar chart displays monthly product sales for a catalog of electronics, with each product’s sales value represented by a steelblue bar. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` to position bars and axes, while rendering SVG elements directly. The data is loaded from a CSV file via `d3.csv`, and axis labels are rotated for readability. Grid lines and tick values are generated programmatically, showing sales totals ranging from roughly 48 to 150 across over 120 product entries.

Loading thumbnail…

task1

A bar chart displays monthly sales figures for electronic products. Each bar’s height encodes the numeric Sales value from the CSV dataset, with product names on the horizontal axis and a linear sales scale on the vertical. Repeating product names across rows aggregate into multiple bars per category. Built with React, the visualization uses D3’s `csv` parser to load data, `scaleBand` and `scaleLinear` for axes, and SVG `rect` elements for rendering, with bars filled in steelblue.

Loading thumbnail…

Task 1 assignment

This visualization presents a horizontal bar chart of the top 10 sales records from a CSV dataset, with each bar labeled by product, region, and month. The chart uses D3 v7 within a React component, rendering to SVG. The implementation loads data via `d3.csv`, sorts and slices the dataset to identify top performers, and maps values with `scaleLinear` and `scaleBand`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Horror movies

This example summarizes a Hollywood horror movies dataset by loading a remote CSV file and displaying its basic statistics. It shows the file size in kilobytes, total row count, and total column count inside a styled box on the page. The code uses `d3.text` and `d3.csvParse` to fetch and parse the data, then updates the HTML via `document.getElementById` and `innerHTML`. The data source is a GitHub gist URL containing the CSV file.