R

Rithvik

@RitHviKREddY731·16 public vizzes

Loading thumbnail…

ICE-8 2B Rithvik Reddy

This example shows a network of seven Texas cities connected by six links, rendered as draggable nodes with labels in an SVG force-directed graph. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while circles and text labels are grouped in SVG <g> elements. Users can drag nodes, which temporarily pins them via fixed x and y coordinates during interaction. The graph uses a Set2 categorical color scale for node fills and a light gray stroke for links, with the simulation updating positions on each tick event.

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter shows a single static page with the message “Hello HTML!” centered in large type. It renders the text using a CSS class with a 12em font size, while the page structure comes from basic HTML markup and a linked stylesheet. The accompanying JavaScript logs “hello world” to the console. No data sources, external libraries, or interactive charts are present; the example simply demonstrates minimal HTML, CSS, and JavaScript file organization in a standalone page.

Loading thumbnail…

ICE-8 2A Rithvik Reddy

This example shows a family tree diagram with nodes representing individuals from Grandparents down to Alice and Bob, colored by generation depth. The code uses d3.stratify to convert CSV data into a hierarchy, then applies the d3.tree layout to position nodes horizontally. Links are drawn with d3.linkHorizontal, while nodes appear as colored circles with labels, all rendered as SVG within a full-viewport container.

Loading thumbnail…

ICE-8 1B Rithvik Reddy

This choropleth map of USA states uses a light blue background and encodes FIPS codes with numeric values from a small inline CSV. The visualization maps each state’s data value to a color and shows a tooltip with the state name on hover. It loads TopoJSON state boundaries via the `us-atlas` package with a robust multi-URL fetch strategy, then projects them using `d3.geoAlbersUsa()` and renders the result with implicit SVG paths. The code also uses `topojson.feature` and `topojson.mesh` from the `topojson-client` library to extract state geometries and borders.

Loading thumbnail…

ICE-8 1A Rithvik Reddy

This choropleth map of the world uses a Natural Earth projection to show numeric values per country, with a yellow-to-blue sequential color scale and interactive tooltips revealing ISO-Numeric IDs. Built with D3 v7, it loads TopoJSON from world-atlas, computes paths via `d3.geoPath`, and renders countries as SVG elements. A linear gradient legend and `d3.axisBottom` display the value range, while `d3.csvParse` maps the small inline dataset.

Loading thumbnail…

Fork of HTML Starter

This choropleth map colors countries by their 2020 population in millions, using a blue sequential scale where darker shades represent larger populations. Built with D3 v7 and TopoJSON data from the world-atlas package, the visualization projects geographic features with `d3.geoNaturalEarth1` and renders them as SVG paths via `d3.geoPath`. Country populations from `dataset.csv` are joined to geometry using ISO3 codes, with tooltips displaying each nation’s name and population value.

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter shows a single static page with the message “Hello HTML!” centered in large type. It renders the text using a CSS class with a 12em font size, while the page structure comes from basic HTML markup and a linked stylesheet. The accompanying JavaScript logs “hello world” to the console. No data sources, external libraries, or interactive charts are present; the example simply demonstrates minimal HTML, CSS, and JavaScript file organization in a standalone page.

Loading thumbnail…

ICE-7 AREA CHART Rithvik Reddy Krishnaraj Rajmohan

This area chart visualizes the age of 12 individuals plotted against their row index in a CSV dataset, showing how age varies across the ordered list. The chart uses D3 v7 with an SVG rendering approach, employing `d3.area()` to generate the filled path, `d3.scaleLinear()` for both x and y axes, and `d3.axisBottom()` and `d3.axisLeft()` to render the scales. The data is loaded via `d3.csv()` with `d3.autoType` parsing, and missing values are filtered before plotting.

Loading thumbnail…

ICE-7 LINE CHART Rithvik Reddy Krishnaraj Rajmohan

This line chart displays the numeric `age` column from a CSV dataset, plotting each row’s age against its row index in file order. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` and `d3.autoType` to load and parse the data, then `d3.scaleLinear` for the x- and y-axes and `d3.line` to generate the path. The line is stroked in blue, with axis labels for “Index (row order)” and “age”. The chart highlights how age varies sequentially across the 12 records, with no interpolation or smoothing applied.

Loading thumbnail…

ICE-7 PIE CHART Rithvik Reddy Krishnaraj Rajmohan

This example shows the distribution of a categorical variable, `favorite_fruit`, across twelve survey responses as a static pie chart. Each slice is labeled with its fruit name and count, and a matching color-coded legend lists the totals. The visualization is generated using D3 version 7, with data loaded from a CSV via `d3.csv` and `d3.autoType`. Category counts are computed with `d3.rollups`, and the pie geometry is built using `d3.pie` and `d3.arc`, with the final SVG rendered on a canvas sized 520 by 380 pixels.

Loading thumbnail…

ICE-7 REUSABLE SCATTER Rithvik Reddy Krishnaraj Rajmohan

This example shows a reusable scatter plot built with D3 v7, mapping the `age` column to the x-axis and the `rating` column to the y-axis for a small CSV dataset of 12 individuals. The chart displays points as blue circles with opacity, along with labeled axes and a title. The code implements a `scatterChart()` factory function that uses D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to construct the visualization. It leverages the `.join` pattern to create SVG elements and the `d3.csv` method with `autoType` to load and parse the data from `rithvik_ice5_data.csv`.

Loading thumbnail…

Fork of HTML Starter

This example presents a reusable D3 v7 scatter plot that visualizes a small CSV dataset of individuals, plotting their age against their ID number. The chart uses the `d3.scaleLinear` API for both axes, with points rendered as circles using the D3 `.join()` pattern for efficient SVG creation. The code defines a chart factory function, following Mike Bostock’s reusable chart design, allowing customization of the x and y columns and point radius. The data is loaded via `d3.csv` with `d3.autoType` for automatic type inference.

Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This example loads a CSV file from a public gist and presents a data summary, a preview table of the first five rows, and a bar chart showing categorical counts. It uses `d3.csv` to fetch and parse the data, dynamically detects numeric columns, and renders the summary statistics and table into HTML elements. The bar chart is drawn as an SVG using D3’s selection and scale APIs, with all styling applied via CSS.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This data-summary and preview dashboard combines a CSV data table with a simple categorical bar chart. Built with D3 v7, it loads a small dataset of twelve people with attributes like age, country, and favorite color using `d3.csv`. The interface shows key statistics, a preview of the first five rows in an HTML table, and a bar chart rendered as SVG. The chart visualizes the frequency of values within selected columns, offering a quick view of categorical distributions while the dark-themed layout presents all insights in one organized page.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example presents a data-summary dashboard that loads a CSV file with d3.csv, displays basic row and column counts, and previews the first five rows in an HTML table. It also renders a simple bar chart of categorical counts as SVG. The code uses D3 v7 selection methods and d3.csv for asynchronous data loading, with data sourced from a public GitHub gist.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example demonstrates a data summary and preview dashboard, loading a CSV of fictional individuals and presenting it through a card-based interface. It shows key dataset metrics like row and column counts, a preview table of the first five rows, and a bar chart visualizing categorical counts. The implementation uses d3.csv for data loading, D3 selections to dynamically build HTML elements for the summary and table, and an SVG bar chart for the visualization. The interface features a dark-themed, responsive layout with hover effects on table rows.