S

SYAM TEJ

@Syam-tej·32 public vizzes

Loading thumbnail…

Fork of HTML Starter

This is a multi-page website demonstrating different chart types. The home page links to three separate HTML pages: a stacked and grouped bar chart, a stacked area chart, and a line chart with multiple lines. Each page displays static images of the visualizations, which are embedded via `<img>` tags and hosted from local desktop file paths. The site uses basic inline CSS for image sizing and borders, alongside a linked `style.css` file for typography and layout, creating a simple gallery of pre-rendered charts.

Loading thumbnail…

Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes 2024 US state unemployment rates using D3.js v7 and TopoJSON. It shows each state colored on a red-yellow-green sequential scale, where green indicates lower unemployment and red indicates higher rates, with hover interactions revealing exact percentages via a tooltip. The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from the us-atlas TopoJSON dataset, while `d3.scaleSequential` with `d3.interpolateRdYlGn` drives the color encoding, and an SVG linear gradient legend communicates the scale.

Loading thumbnail…

Section 1(b)-Making Maps Using TOPOJSON

This example presents a world map visualizing life expectancy across 27 countries, colored with a turquoise-to-red scale (d3.scaleSequential with interpolateTurbo) and showing a tooltip on hover with the country name and average years. It uses the Natural Earth projection (d3.geoNaturalEarth1) and generates geographic paths with d3.geoPath, rendering the sphere and graticule for context. The map loads world boundaries as GeoJSON, maps country names to life-expectancy values via a lookup table, and supports zooming/panning through d3.zoom.

Loading thumbnail…

Section 2B-Visualizing Network

This example visualizes a research collaboration network using D3.js v7’s force-directed layout. Nodes represent researchers, institutions, projects, and organizations, colored by group and connected by directed links with arrowheads. Hovering over a node reveals a tooltip with details like role, field, and country. The graph uses `d3.forceSimulation` with `d3.forceLink`, and positions are fixed via `fx`/`fy` properties while SVG circles, labels, and markers are rendered dynamically.

Loading thumbnail…

Section 2A -Visualizing tree

This example visualizes a hierarchical corporate cloud infrastructure as a tree, with nodes representing data centers, servers, databases, and services. The visualization uses D3 v7’s `d3.tree()` layout to position nodes, with shapes varying by data type—circles for databases, rectangles for services, and polygons for other components. Hovering over a node triggers a tooltip displaying the component’s name, type, CPU usage, and memory usage. Links between nodes are drawn as vertical paths using `d3.linkVertical()`, and the entire tree is rendered as SVG with metadata including CPU and memory values for each node.

Loading thumbnail…

Area Chart ICE-7

This area chart visualizes the relationship between age and monthly income, using a smooth monotone curve to connect data points. The SVG rendering includes labeled axes for time and sales, with blue circles marking each data point. Interactive tooltips appear on mouseover, enlarging the circles and displaying the exact year and sales value. The chart is built with D3.js v7, using the area generator with a baseline at the bottom of the chart to fill the region under the curve in semi-transparent light blue.

Loading thumbnail…

Line chart ICE-7

This line chart displays the relationship between monthly income and age, using data loaded from a CSV file via `d3.csv`. The chart plots the values on a linear scale, with axes for both variables labeled, and lines are drawn with a smooth monotone curve using `d3.curveMonotoneX`. Interactive tooltips appear on mouseover, showing the exact year and sales figures for each data point. The visualization is rendered as an SVG, with axes and labels generated using `d3.axisBottom` and `d3.axisLeft`, and the tooltip is implemented as an HTML overlay whose visibility is controlled by D3 event handlers.

Loading thumbnail…

Pie Chart ICE-7

This pie chart shows employee attrition distribution with two categories, "Yes" and "No", colored purple and red using a d3.scaleOrdinal. The code loads CSV data via d3.csv, aggregates counts with d3.rollup, and renders SVG paths using d3.pie and d3.arc. Interactive tooltips appear on mouseover, and a legend is positioned within the chart. The visualization uses D3 v7 and renders to an SVG element with a fixed 500x500 viewport.

Loading thumbnail…

Scatter Plot ICE-7

This scatter plot visualizes the relationship between age and monthly income for a dataset of individuals. Each point is a person, with steel blue circles encoded by linear scales for the x (age) and y (monthly income) axes. The chart uses D3 v7 to load CSV data from a GitHub gist via `d3.csv`, render SVG axes with `d3.axisBottom` and `d3.axisLeft`, and display hover tooltips via mouseover and mouseout events. The visualization renders entirely as SVG with a custom tooltip div.

Loading thumbnail…

Fork of HTML Starter

This dashboard displays 180 days of synthetic student performance data, presenting study hours, practice tests, and scores. One card shows a multi-series line chart with dual y-axes, plotting study hours and practice tests on the left and score on the right, using `d3.scaleLinear` and `d3.line`. A second card combines a bar chart of practice tests with a line for average score, using `d3.select`, `d3.append`, and `d3.scaleTime`. The data is generated client-side with a seeded random number generator and a downloadable CSV is provided via a custom `toCSV` function.

Loading thumbnail…

ICE-6 (3)

This example presents two linked charts that analyze student performance data loaded from a CSV file hosted in a GitHub Gist. A multi-series line chart compares subject scores, team scores (scaled by a factor of ten), and average scores across student IDs, using D3’s scaleLinear, axis, and line APIs. A second combined chart overlays bars and lines to show average scores grouped by team score. Both visualizations include legends, labels, gridlines, and an annotation highlighting the largest divergence between subject and average scores.

Loading thumbnail…

ICE-6(2)

This scatter plot visualizes the relationship between team scores and subject scores, with each data point rendered as a circle. The visualization uses D3 v7 to load tab-separated data from a remote gist, parse it, and render it as an SVG. It includes animated circle transitions using `transition.attr` to grow points from zero radius, plus tooltip interactivity via mouseover events. Red circles mark team scores on the x-axis, while blue circles represent subject scores, with axes labeled through `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of STUDENT'S SPORTS DATA VIZ

This scatter plot compares students’ Team Scores against their Subject Scores using a two-axis layout, with blue circles representing data points that animate from zero radius to full size. The visualization loads tab-separated data from a remote gist, parses it with `d3.text`, and renders the SVG using D3 v7 scales and axes. Hover interactions change circle color and size while displaying score details in a tooltip, and the chart includes labeled axes and a title.

Loading thumbnail…

ICE-6

This visualization displays average subject scores grouped by students’ favorite subject, using an animated bar chart that rises from the baseline on load. Individual student scores appear as additional bars, with hover interactions changing bar color and showing a tooltip with the exact subject and score. Built with D3 v7, it loads tab-separated data from a GitHub gist, parses it via `d3.text`, and aggregates averages using `d3.rollup`. The SVG chart uses `scaleBand` and `scaleLinear` for axes, with `transition()` animating bar heights and `axisBottom`/`axisLeft` rendering labeled axes.

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

This visualization displays individual student subject scores as orange bars alongside skyblue bars representing the average score for each favorite subject. The bar chart animates upward on load using D3 transitions, with hover interactions changing bar color and showing a tooltip with the exact score. The code uses d3.text to load tab-separated data from a GitHub gist, d3.rollup to compute means, and d3.scaleBand with d3.axisBottom and d3.axisLeft to render the SVG chart.

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

A bar chart displays the average score for each favorite subject, derived from a CSV dataset via `d3.csv` and aggregated with `d3.rollup`. Bars animate upward from the baseline using `transition().duration(900)`, and hover interactions change fill color and show a tooltip. The visualization uses D3 v7 with SVG rendering, including axes generated by `d3.axisBottom` and `d3.axisLeft`, while subject labels are rotated for clarity. The title and axis labels are added as SVG text elements, and all data is filtered for valid subject and score entries before aggregation.

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

This visualization compares individual students’ subject scores with the average score for each favorite subject. Orange bars animate upward from zero on load, while sky-blue bars overlay the average per subject; hovering turns bars red with a tooltip showing the exact score. Built with D3 v7, it uses `d3.text` to load tab-separated data, `d3.rollup` to compute means, and `scaleBand`/`scaleLinear` for axes. The SVG renders with transitions, axis labels, and rotating x-axis text.

Loading thumbnail…

Fork of HTML Starter

This bar chart displays the average subject score for each favorite subject, with bars animating upward on load. Hovering over a bar turns it red and shows a tooltip with the exact value. Using D3 v7, the visualization fetches DSV data from a gist, parses it with `d3.dsvFormat`, aggregates values via `d3.rollup` and `d3.mean`, and renders an SVG with `scaleBand` and `scaleLinear` axes. Interactive transitions use `transition().duration()`, while mouse events update tooltip visibility and bar color.

Loading thumbnail…

Project 1 — Bar Chart

A bar chart displays aggregated values by category, with interactive controls that let users choose the categorical and numeric columns to visualize. The chart loads data from a local CSV file using `d3.csv` with `d3.autoType` to infer column types, then builds a sorted bar layout. The D3 v7 code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, grid lines via `d3.axisLeft`, and tooltips that follow the mouse. The bars are filled with a blue color, and axes are automatically labeled and rotated for readability.

Loading thumbnail…

Fork of HTML Starter

This example displays a single static message, “Hello HTML!”, centered on the page. The visualization uses plain HTML and CSS, with the text styled at a large font size via the `.message` class. It does not rely on any JavaScript-based charting or data libraries; the included `index.js` merely logs “hello world” to the console. The rendering is

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A React and D3 bar chart displays the frequency of letters A through G from a CSV dataset, with interactive bars that can be toggled on and off through clicks. A ResizeObserver tracks container dimensions, updating the SVG render with each size change. The visualization uses D3 v7 scaleBand and scaleLinear with d3.axisBottom and d3.axisLeft, while React state management handles selection highlighting and data loading through d3.csv.

Loading thumbnail…

Fork of HTML Starter

This bar chart displays the value of each category, sorted in descending order. Built with D3 v7, it loads data from a CSV file via a Gist URL using `d3.csv` and `d3.autoType`. The visualization uses a band scale for categories, a linear scale for values, grid lines, rotated axis labels, and a tooltip that appears on mouseover.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot compares sepal length and width across Iris species, with filters for selecting numeric columns and a categorical color dimension. It loads CSV data via the `d3.csv` API and maps columns to user-chosen fields. The visualization uses SVG rendering with D3 v7, featuring axes via `d3.axisBottom` and `d3.axisLeft`, ordinal color scaling, and hover tooltips. Users can also render a legend and resize the chart through a ResizeObserver.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A categorical bar chart displays letter frequencies from a CSV file, with bars colored in teal and rounded corners. Clicking a bar toggles a highlight that dims other bars, revealing the selected category. The React app uses a `ResizeObserver` to track container dimensions and D3 v7 for scales, axes, and SVG rendering. Data loads via `d3.csv`, and bar interactions are handled through React state updates that trigger D3 data joins and transitions.

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a student data dashboard that loads a CSV file containing student names, ID numbers, color codes, favorite subjects, and team names. It displays summary statistics for total students, unique subjects, and unique teams, alongside a bar chart showing team membership counts rendered with D3 v7's `d3.rollups` and `scaleBand`/`scaleLinear` APIs. The page also features color swatch cards and a preview table, with data fetched via the `d3.csv` method and custom canvas rendering for the SVG bar chart.

Loading thumbnail…

Fork of ICE5

This dashboard summarizes student and sports data from a CSV file. It displays key performance indicators, a bar chart of team counts, color-coded student swatches, and a preview table. The visualization uses D3.js v7 with d3.csv, d3.rollups, and d3.scaleBand to process the data and render the SVG bar chart, while d3.select and d3.create build the HTML elements for the swatches and table.

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes student and sports data from a CSV file, displaying key statistics such as total student count, unique favorite subjects, and the top team. It presents these findings in a simple SVG bar chart that shows team counts, with axes labeled using D3's `d3.axisBottom` and `d3.axisLeft`. The data is loaded via `d3.csv` and processed using `d3.rollups` and `d3.scaleBand`, resulting in an accessible chart with a summary section and rotated x-axis labels for readability.

Loading thumbnail…

Fork of HTML Starter

This example displays a single static message, “Hello HTML!”, centered on the page. The visualization uses plain HTML and CSS, with the text styled at a large font size via the `.message` class. It does not rely on any JavaScript-based charting or data libraries; the included `index.js` merely logs “hello world” to the console. The rendering is

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3” centered on the page, functioning as a minimal starter template. It demonstrates the core setup for a D3 v7 project using ES modules and an import map, with the page structure defined in HTML and styling via CSS. The script imports the `select` function from the d3 library and applies the `.text()` method to the body element. The example uses D3’s selection API to directly manipulate the DOM, showcasing a simple, uncomplicated introduction to building visualizations with the library.

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes a student sports dataset, showing a bar chart of team counts alongside text statistics for total students, unique subjects, and the top team. The code uses `d3.csv` with `d3.autoType` to fetch and parse the data, then `d3.rollups` with `d3.descending` to compute team frequencies. An SVG bar chart is rendered using `d3.scaleBand` and `d3.scaleLinear`, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. The page structure and styling come from the accompanying `index.html`, `styles.css`, and `script.js` files.

Loading thumbnail…

Fork of HTML Starter

This example displays a single static message, “Hello HTML!”, centered on the page. The visualization uses plain HTML and CSS, with the text styled at a large font size via the `.message` class. It does not rely on any JavaScript-based charting or data libraries; the included `index.js` merely logs “hello world” to the console. The rendering is

Loading thumbnail…

Fork of HTML Starter

This example displays a single static message, “Hello HTML!”, centered on the page. The visualization uses plain HTML and CSS, with the text styled at a large font size via the `.message` class. It does not rely on any JavaScript-based charting or data libraries; the included `index.js` merely logs “hello world” to the console. The rendering is