C

charchana0527@gmail.com

@Arch1n1·19 public vizzes

Loading thumbnail…

Ecommerce website

This example shows a force-directed network of an e-commerce ecosystem, with blue customer nodes, green product nodes, and orange seller nodes connected by gray links representing purchases, offers, and recommendations. Built with D3 v7, the visualization uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position twenty nodes and twenty links interactively, with drag-and-drop support via `d3.drag()`. Node labels and a color legend are rendered directly on the SVG canvas, and the layout updates continuously on each simulation tick.

Loading thumbnail…

tree

This tree visualization shows the hierarchical structure of academic fields, from a root "Science" node down to subfields and individual topics. The layout is generated by d3.hierarchy and d3.tree, with SVG paths representing links between nodes, styled with stroke colors. Node types (root, major, subfield, topic) are distinguished by shape—circles, rectangles, and ellipses—and color is applied per major scientific branch. The static rendering uses D3 v7 with a fixed 1600x900 pixel SVG canvas, positioning nodes with a computed tree layout rather than any animation or interaction.

Loading thumbnail…

pizza eaters

This interactive map visualizes the estimated number of pizza eaters per 100,000 population for 50 countries. A sidebar displays the country name and value upon hover, complemented by a color-coded legend using an orange sequential scale. Built with d3.v7, it fetches country boundaries as GeoJSON from the D3 graph gallery and renders them as map layers alongside OpenStreetMap tiles via Leaflet 1.7.1. Tooltips and hover interactions are implemented using the Leaflet API.

Loading thumbnail…

ice - 8 Ar

The example displays two interactive SVG maps in a single page: a world map using the Natural Earth projection and a United Kingdom map using the Mercator projection. Both maps load TopoJSON data from external sources—world-atlas for countries and a UK counties dataset—then render geographic features with D3 v7's `d3.geoPath` and projections like `d3.geoNaturalEarth1` and `d3.geoMercator`. Graticules and country/region outlines are styled via CSS classes, with hoverable tooltips showing feature IDs or names.

Loading thumbnail…

ice - 8

A choropleth map displays the estimated number of Samsung users per country using a blue sequential color scale, with tooltips revealing exact values on hover. Built with D3.js v7, it loads world geometry via `d3.json` and TopoJSON, joins ISO codes from a TSV, and reads user data from a CSV. Countries render as SVG paths through `d3.geoPath` and a Natural Earth projection, while a CSS-styled tooltip animates opacity using `transition().duration()`. The map focuses on a subset of 20 listed countries, leaving others gray.

Loading thumbnail…

ice - 8

This visualization shows crime rates across Indian states and union territories using an interactive choropleth map, with a sidebar providing a color legend and details about the hovered region. It combines D3.js version 6 for data parsing and SVG path generation via `d3.geoPath` with a custom `d3.geoTransform` projection, and Leaflet 1.7.1 for map rendering and interaction. The map loads state boundaries from a GeoJSON URL and colors each polygon based on crime rates from a CSV file using a sequential `d3.scaleSequential` with the `d3.interpolateYlOrRd` color scheme.

Loading thumbnail…

ice 8

This example displays a polished world map rendered in SVG using React and D3 v5. It shows land masses in teal, country borders, graticules, and a light sphere background. The code uses `geoNaturalEarth1` and `geoPath` for projection and path generation, plus `geoGraticule` for the grid. Geographical data comes from the world-atlas TopoJSON source, processed via `feature` and `mesh` to create land and interior boundaries.

Loading thumbnail…

covid -19

This choropleth map visualizes COVID-19 deaths per million across 20 countries, with a red sequential color scale ranging from light to dark based on mortality rates. The map uses a Robinson projection via `d3.geoRobinson` and renders country boundaries as SVG paths through `d3.geoPath`, with a tooltip revealing the country name and death rate on hover. Geographic data comes from the world-atlas TopoJSON file, joined to the CSV dataset by ISO_A3 codes, and a linear gradient legend with an axis labels the color scale.

Loading thumbnail…

ice 7 Line chart Ar

This chart tracks period flow intensity across the twelve months of the year, using a monotone-smoothed line and circular dots to highlight monthly values. Built with d3.v7 and rendered as SVG, the visualization maps month names along the x-axis and flow intensity on a fixed 0–5 scale. The line is generated with the `d3.line` API, while `d3.scalePoint` and `d3.scaleLinear` set the scales, and `d3.axisBottom` and `d3.axisLeft` produce the axes. The dataset is embedded directly in the script, showing a consistent pattern of intensity fluctuating between 2 and 4.

Loading thumbnail…

ICE 7 Area chart Ar

This area chart visualizes menstrual cycle flow intensity across the twelve months of the year, with a smooth monotone curve filling the space beneath the line. The SVG rendering uses d3.area with curveMonotoneX to generate the filled path, while d3.scalePoint positions months along the x-axis and d3.scaleLinear maps intensity values on the y-axis. Data comes from a CSV file containing monthly cycle length, period duration, and flow intensity metrics, with axes labeled and month labels rotated for readability.

Loading thumbnail…

Fork of ICE-7 AREA CHART Rithvik Reddy Krishnaraj Rajmohan

This chart tracks menstrual cycle patterns across twelve months, plotting three variables—cycle length, period duration, and flow intensity—as color-coded lines against a shared month axis. The visualization uses a D3 v7 SVG implementation with `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` with monotone curve interpolation. Data is loaded from a CSV file via `d3.csv`, with the chart rendered as animated-free static SVG paths. Axis labels and a legend clarify the mapping, while color assignment distinguishes each metric.

Loading thumbnail…

Ice 7 Line chart Ar

A line chart tracks monthly order counts across twelve months, from January’s 120 to December’s 480, with each data point marked by a blue dot and an orange line. The chart uses D3 v7’s `d3.csv` to load the data, `d3.scalePoint` and `d3.scaleLinear` for axes, and `d3.line` for the path. Tooltips via SVG `<title>` elements show exact values on hover. The SVG rendering includes rotated month labels and styled axes.

Loading thumbnail…

ICE 7 pie chart Ar

This pie chart visualizes energy consumption by source, displaying six categories (Coal, Natural Gas, Hydro, Nuclear, Solar, and Wind) with their respective percentage contributions. Built with D3.js v7, it renders slices using the `d3.pie` and `d3.arc` APIs, with labels positioned via `labelArc.centroid`. A color-coded legend identifies each source, and the chart is styled with a white background and rounded corners. Data is loaded from a local CSV file containing two columns: Energy_Source and Consumption.

Loading thumbnail…

ICE 7 Resuable scatter plot Ar

A scatter plot visualizes the relationship between engine size and fuel efficiency for 15 car models, revealing a general trend toward lower MPG as engine displacement increases. Each model is represented by a colored circle with a distinct categorical color, and interactive tooltips display details on hover. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from an inline CSV file.

Loading thumbnail…

Combined chart

This combined chart displays monthly car sales as blue bars on a left axis and a satisfaction score as a pink line on a right axis. The visualization uses D3 v7 to load a CSV from a GitHub gist, then renders with SVG. It employs `d3.scaleBand` for the x-axis months and separate `d3.scaleLinear` scales for the two y-axes, with gridlines, rotated tick labels, and a legend.

Loading thumbnail…

Scatter plot

This interactive scatter plot displays the relationship between car mileage and price, with individual dots colored by fuel type. Built with D3.js (v7), it renders as an SVG chart with axes, labels, and a hover tooltip that reveals the car name, fuel, mileage, and price. The visualization loads a CSV dataset from a GitHub gist, uses `d3.scaleOrdinal` for color mapping, and applies CSS transitions to highlight dots on hover.

Loading thumbnail…

Car Price by Brand_bar graph

This grouped bar chart compares average mileage and average price by car brand, using a dataset loaded from a GitHub Gist via `d3.csv`. The visualization uses `d3.scaleBand` for the grouped brand categories and sub-bands for the two metrics, with `d3.scaleLinear` mapping values to the y-axis. Bars are colored through `d3.scaleOrdinal`, and the SVG output includes axis labels, rotated brand names, and a legend. Hovering dims bars via CSS opacity.

Loading thumbnail…

Car Price by Brand_bar graph

This bar chart visualizes the average car price by brand, with each brand’s price aggregated from individual car records using d3.group and d3.mean. The visualization uses an SVG rendered with d3.v7, mapping brand names to a band scale and prices to a linear scale, while a d3.scaleOrdinal with d3.schemeSet2 assigns distinct colors to each bar. Hovering dims a bar via CSS opacity.

Loading thumbnail…

Vehicles

This example demonstrates how to load and parse a CSV dataset using D3 v7, displaying a summary of the data’s size, row count, and column count alongside a styled preview table of the first five rows. The code uses `d3.csv` to fetch the data from a GitHub gist, then dynamically builds an HTML table with `d3.select` and `join`. The table features sticky headers, zebra striping, and hover effects with an accent bar, all styled via external CSS. A loading message and error handling are included.