LaasyaJ256

@LaasyaPriyaJ256·15 public vizzes

network

This example shows a force-directed network of city flight routes, with nodes representing cities and links representing connections. Major hubs like New York and Tokyo are drawn as larger, blue circles, while non-hub cities appear as smaller, orange circles. The visualization uses D3.js v7 with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`, and `d3.drag` to position the nodes dynamically. The SVG output renders nodes and edges, with labels showing city names.

Apr 11, 2026

Loading thumbnail…

tree

The visualization presents a hierarchical university structure as a tree diagram, showing the Global University, its departments, faculties, and professors. Nodes are rendered as size‑coded circles with distinct colors per depth level, connected by straight links. Built with D3.js v7, the code uses `d3.hierarchy` and `d3.tree` to compute layout positions, then manually normalizes x-coordinates to fit the SVG canvas. Each node displays its label and adjusts fill color based on hierarchy depth.

Apr 11, 2026

Loading thumbnail…

projection

This geographic map of Canada displays temperature distribution based on latitude, using a blue-to-red color gradient to represent colder northern and warmer southern regions. The visualization loads GeoJSON data from a GitHub repository and renders the country’s provinces using D3.js v7 with the `d3.geoMercator` projection and `d3.geoPath` for shapes. Province colors are computed from centroid latitudes via a simulated temperature model, with a legend gradient showing the cold-to-warm scale. The implementation utilizes `d3.scaleSequential`, `d3.interpolateRdYlBu`, and SVG rendering.

Apr 11, 2026

Loading thumbnail…

map

This example visualizes world temperatures by coloring each country according to its latitude-derived temperature estimate, using a sequential blue-to-red scale. The map is rendered as SVG paths via `d3.geoPath` with a `d3.geoNaturalEarth1` projection, while country boundaries come from the `world-atlas@2` TopoJSON dataset. A linear gradient legend, built with D3's `scaleSequential` and `interpolateRdYlBu`, shows the temperature range from cold to warm.

Apr 11, 2026

Loading thumbnail…

ice07-pie chart

This pie chart shows the distribution of retail records across product categories, with each slice labeled and a legend on the right. The visualization uses D3 v7’s `d3.pie` and `d3.arc` generators to compute and draw the slices, while `d3.rollup` aggregates the CSV data by category. A custom ordinal color scale assigns distinct colors to each category. The SVG rendering includes white labels positioned at each arc’s centroid, and the data is loaded from an external CSV file via `d3.csv`.

Mar 30, 2026

Loading thumbnail…

ice07-areachart

This area chart visualizes total sales by product category from a retailer CSV file, loading data via `d3.csv` with `d3.autoType`. It aggregates sales using `d3.rollups` and `d3.sum`, then maps categories to the x-axis with `d3.scalePoint` and sales to a linear y-axis with `d3.scaleLinear`. The graphic uses `d3.area` to create the filled region and overlays a `d3.line` path for clarity, with axes rendered by `d3.axisBottom` and `d3.axisLeft` as SVG elements.

Mar 30, 2026

Loading thumbnail…

ice07 - linechart

This line chart displays sales trends across product categories, with total sales on the y-axis and categories on the x-axis. Using d3.csv with autoType, it loads retailer data from a GitHub gist and aggregates sales per category via d3.rollups and d3.sum. The line is drawn with d3.line, while d3.scalePoint and d3.scaleLinear handle positioning; circles mark each data point. Axes are rendered using d3.axisBottom and d3.axisLeft, with SVG output and a purple stroke for the line.

Mar 30, 2026

Loading thumbnail…

ice07-reusable scatter plot

This interactive scatter plot visualizes retailer sales and profit data, with points colored by product category and a tooltip revealing details about each item on hover. The reusable chart function, implemented in D3 v7, accepts configurable parameters for scales, labels, and data accessors, making it adaptable to different datasets. It creates an SVG with linear axes, a dashed reference line at zero, and a legend, while the tooltip uses D3 event handlers to appear and move with the cursor.

Mar 30, 2026

Loading thumbnail…

Fork of ice07-reusable scatter plot

This reusable scatter plot visualizes retailer data, mapping Sales on the x-axis against Profit on the y-axis, with points colored by product Category using d3.scaleOrdinal and a Tableau color scheme. The code uses D3 v7 to create an SVG chart with axes, tick labels, a dashed zero-profit reference line, and an interactive tooltip triggered by mouse events. It also includes a legend and fixed plot dimensions, with data loaded from a CSV file via d3.csv and parsed with d3.autoType.

Mar 29, 2026

Loading thumbnail…

ICE-06: COMBINED CHART

This combined chart compares grocery spending across ten equal-sized segments of the dataset. A single bar series shows average produce spending, while overlaid line-and-dot series depict average dairy, snacks, and beverages spending using distinct colors. The visualization uses d3.csv to load data, d3.mean for aggregation, and d3.scaleBand, d3.scaleLinear, d3.line, and d3.axisBottom/Left to construct the SVG rendering. The chart is built with d3.v7 inside a React framework, and the initial view includes axis labels and a legend.

Mar 7, 2026

Loading thumbnail…

ICE-06: Multi-line Series Chart

This multi-line series chart visualizes average grocery spending across four categories—produce, dairy, snacks, and beverages—over ten time segments. Each colored line represents a category, with a legend identifying them. The chart uses d3.csv to load remote spending data, then groups it into ten segments and applies d3.mean for aggregation. D3’s line generator builds the SVG paths, while d3.scaleLinear and d3.axisBottom/axisLeft handle scales and axes. The rendering is SVG-based with React managing the component structure.

Mar 7, 2026

Loading thumbnail…

Ice-06 : Scatter Plot

This scatter plot shows the relationship between fish length and weight, with points colored by species using a categorical scale. The visualization loads CSV data from a GitHub gist and renders circles on an SVG canvas using D3 v7’s `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.schemeCategory10` for colors. The code defines margins, appends axis groups, and positions dots via `cx` and `cy` attributes. The data is parsed with `d3.csv`, converting numeric fields before scaling.

Mar 7, 2026

Loading thumbnail…

ICE-06: Bar Chart

A bar chart visualizes total revenue by product category, with each bar’s height and color mapping to aggregated sales data and category identity. The D3 v7 code loads a CSV from a GitHub gist, rolls up rows by category using `d3.rollup` and `d3.sum`, then renders SVG bars with `d3.scaleBand` and `d3.scaleOrdinal`. Axes, value labels, and chart titles are added via D3 selections, while the React wrapper only displays static text and does not participate in the chart rendering.

Mar 7, 2026

Loading thumbnail…

Laasya_Ice05

This visualization displays summary statistics for a CSV file fetched from a GitHub gist, showing row and column counts, the number of unique categories, and a table of per-category counts. The page uses the Fetch API to retrieve and parse the comma-separated data, then manipulates the DOM with plain JavaScript to populate the HTML elements. The table is styled with CSS, featuring red outer borders and cell borders. The data is processed by splitting each line into fields, and category counts are tallied using a JavaScript object.

Feb 28, 2026

Loading thumbnail…

Sathvi D3

Sathvi D3 is a minimal starter example that renders a static placeholder, loading an external SVG file through an HTML `<object>` tag. The page displays the SVG at a fixed 800 by 600 pixel size, while a separate script imports the `select` function from D3 and simply replaces the body text with “Hello D3.” The visualization does not perform any data binding or drawing; instead, it demonstrates the basic setup for combining an embedded SVG document with a D3 module import. The code relies on standard D3 v3 selection methods.

Oct 7, 2025