Skip to main content
Log in
C

Chindamrohan321@gmail.com

@Rohan551US·9 public vizzes

Loading thumbnail…

Fork of Network

This interactive network visualization maps relationships between seven main characters from *The Simpsons*, with nodes colored by group (Simpsons, Neighbors, Boss) and link thickness encoding relationship strength from 1–9. Using the `d3.forceSimulation` API with `d3.forceLink`, `d3.forceManyBody` for repulsion, and `d3.forceCenter` plus `d3.drag()` for interactivity, nodes settle into a spread layout and can be repositioned by the viewer. The SVG renderer draws circular nodes with bold labels below each character, while the connection values are defined in the static `dataset` and mapped to stroke widths via `d3.scaleLinear`.

Nov 3, 2025
Loading thumbnail…

Fork of tree of kids

This example visualizes a three-generation family tree from the television show *Modern Family*, using a hierarchical tree layout to show parent-child relationships from patriarch Jay Pritchett down to great-grandchildren. The code explicitly labels each node with the family member’s name and its layer number, while using a color scale based on depth to distinguish generations. Built with D3 v7, it applies the `d3.tree` layout and `d3.hierarchy` to structure the data, then renders SVG links via `d3.linkVertical` and nodes as circles with text labels. The data is a static JavaScript object embedded in the page.

Nov 3, 2025
Loading thumbnail…

Fork of Fork of Map

This choropleth map colors countries by GDP per capita using a green sequential scale, with twelve nations assigned numeric scores from 0 to 100. It displays a Mercator projection of world geography loaded from world-atlas TopoJSON, rendered as SVG paths via `d3.geoPath`. The code uses `d3.scaleSequential` with `d3.interpolateGreens`, joins GeoJSON features with `topojson.feature`, and appends tooltips plus a legend showing the color range from low to high values.

Nov 2, 2025
Loading thumbnail…

LINE CHART

This line chart visualizes monthly sales data for a six-month period, with a smooth monotone curve connecting sales values for January through June. The chart uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical month axis, `d3.scaleLinear` for the sales values, and `d3.line` with `curveMonotoneX` to create the interpolated path. Circular markers highlight individual data points at each month's sales level, while axes are rendered using `d3.axisBottom` and `d3.axisLeft` with labels for "Month" and "Sales."

Oct 27, 2025
Loading thumbnail…

area chart

This area chart displays monthly sales figures for a six-month period, with each month’s value represented by a filled region beneath a smoothed curve. The visualization uses D3 v7’s `d3.area()` with `curveMonotoneX` to generate the path, while `d3.scaleBand()` and `d3.scaleLinear()` map months and sales values to the SVG coordinates. The chart includes labeled axes for both dimensions and renders the area with a translucent teal fill and a dark stroke.

Oct 27, 2025
Loading thumbnail…

pie chart

A pie chart visualizes the proportion of sales across three product categories—Electronics, Clothing, and Food—using hardcoded data from an array. The chart is rendered as SVG with D3.js v7, employing `d3.pie()` to compute arc angles and `d3.arc()` to generate the path shapes, which are filled using a categorical color scale. Each slice includes a centered text label displaying the category and sales value, while a separate legend lists the categories with their corresponding colors.

Oct 27, 2025
Loading thumbnail…

scatter plot

This scatter plot displays product sales versus profit, with each circle representing a product and colored by category (Electronics, Clothing, or Food). The D3.js v7 code uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring, and SVG circles to render data points. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with text labels for Sales and Profit. The static dataset is embedded in JavaScript and passed to a render function that clears and redraws the chart.

Oct 27, 2025
Loading thumbnail…

Fork of Fork of HTML Starter

This interactive web page displays summary statistics and a preview of a programming languages dataset. It shows the file size, row count, and column count derived from a remote CSV file, alongside a data table of the first ten records. The visualization uses D3.js v7 to fetch and parse the CSV with `d3.csvParse`, generate summary items, and construct the table by appending `thead` and `tbody` elements. The page is styled with custom CSS for a clean, readable layout.

Oct 6, 2025
Loading thumbnail…

Fork of Type Table

This fork of the Type Table displays a color-coded matrix of DPC website publication prices across twelve recent year-month columns. The table groups rows by website name, sorted alphabetically, and uses a menu component from a custom `menu()` module to select frequency. The visualization builds an HTML table using d3.csv, d3.group, and d3.select, with cell backgrounds colored based on Change value percentiles—red for low, yellow for zero, and green for high—via inline style functions. Data comes from a static CSV hosted on GitHub Gist.

Oct 6, 2025