Skip to main content
Log in
B

balaaswitha@gmail.com

@BalaAswitha·14 public vizzes

Loading thumbnail…

Fork of HTML Starter

This interactive SVG world map highlights five countries colored by population size, with India and China appearing darkest on a blue sequential scale. The visualization loads world geometry from the world-atlas TopoJSON dataset, then uses `topojson.feature` to extract country boundaries and `d3.geoPath` with a Natural Earth projection to render them. The D3 v7 code joins the TopoJSON features with the CSV-derived population data by country name, applying a tooltip on mousemove to display exact population figures. Countries lacking data render as gray.

Nov 3, 2025
Loading thumbnail…

Fork of HTML Starter

This interactive network graph visualizes the connections among a team of six individuals, mapping their professional relationships and displaying each person's role in a tooltip on hover. Using D3.js v7, the simulation employs `d3.forceSimulation` with `d3.forceLink` for link constraints, `d3.forceManyBody` for charge-based repulsion, and `d3.forceCenter` for layout anchoring. Nodes are rendered as draggable SVG circles with labels, and the `.on('mousemove')` handler feeds data to a tooltip div. The code utilizes `d3.select` and the `.join()` operator for element creation.

Nov 3, 2025
Loading thumbnail…

Fork of HTML Starter

This visualization shows a hierarchical food category tree, with food items as leaf nodes branching from broader categories like fruits, vegetables, and proteins. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders the structure as SVG paths and circles with `d3.linkVertical`. Node shapes vary by depth: a red rectangle for the root, blue circles for categories, and green circles for individual food items. Colors and node sizes are set directly in the D3 v7 code, which generates all elements dynamically from an inline JavaScript data object.

Nov 3, 2025
Loading thumbnail…

Fork of D3 Starter

This pie chart displays the distribution of geometric shapes grouped into four categories—Round, Triangle, Quadrilateral, and Polygon—based on their number of sides. The visualization loads a CSV file containing shape properties such as area and perimeter, then uses d3.csv to parse the data and d3.rollups to aggregate counts per category. Slices are rendered using d3.pie and d3.arc, with colors assigned via d3.scaleOrdinal and d3.schemeSet2. A legend is appended manually to the SVG, and the chart updates based on the selected value mode defined in the code.

Oct 26, 2025
Loading thumbnail…

Fork of D3 Starter

This line chart visualizes how the area of different geometric shapes varies by their order in a dataset, with each shape indexed sequentially along the x-axis and its area plotted on the y-axis. The SVG chart uses d3.csv to load the shapes_data.csv file, then applies d3.scaleLinear for both axes and d3.line to draw a single steelblue path connecting the data points. Axis labels for “Shape Index” and “Area” are added via d3.axisBottom and d3.axisLeft, with the chart rendered using the D3 v7 library.

Oct 26, 2025
Loading thumbnail…

Fork of D3 Starter

A scatter plot maps the area and perimeter of ten synthetic shapes, with points colored by shape category (round, triangle, quadrilateral, or polygon) using a legend. The visualization loads a CSV file via `d3.csv`, parses numeric fields, and renders SVG circles with `d3.scaleLinear` axes for area and perimeter. Shape grouping is determined by the number of sides, and `d3.schemeSet2` provides the categorical color palette. The chart uses margin conventions and axis labels to present the relationship between geometric measurements.

Oct 26, 2025
Loading thumbnail…

Fork of D3 Starter

This example displays an area chart that visualizes the area of various geometric shapes, with the x-axis showing a sequential shape index and the y-axis representing the measured area. The area is rendered as a filled lightsteelblue path with a steelblue stroke, created using the `d3.area` generator and appended as an SVG path element. Data is loaded asynchronously from a CSV file via `d3.csv`, parsed, and scaled using `d3.scaleLinear` for both axes. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with labels for "Shape Index" and "Area".

Oct 26, 2025
Loading thumbnail…

Fork of D3 Starter

This example displays a bar chart comparing the areas of ten different geometric shapes, such as circles, triangles, and hexagons. The bars are rendered as SVG rectangles with rounded corners and a blue gradient fill, and each shape’s name appears below its corresponding bar on the x-axis. The data is loaded via `d3.csv` from a remote Gist, and the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The React application maps the parsed data to the SVG elements, with y-axis tick labels generated manually. Light horizontal gridlines are also included via `d3.axisLeft`.

Oct 20, 2025
Loading thumbnail…

Fork of D3 Starter

This example visualizes the area (blue bars) and perimeter (orange line with points) of various shapes, using a dual-axis layout with the shape name on the shared x-axis, area scaled on the left y-axis, and perimeter on the right. Data is loaded asynchronously from a CSV file via `d3.csv` and filtered to include only finite numeric values. The visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for both y-axes, `d3.axisLeft`, `d3.axisRight`, and `d3.axisBottom` for ticks, and `d3.line` to generate the perimeter path. A legend and rotated axis labels clarify the two data series.

Oct 20, 2025
Loading thumbnail…

Fork of D3 Starter

A scatter plot displays the relationship between Area and Perimeter for a shapes dataset, with steel-blue circles plotted on SVG axes. It loads CSV data from a GitHub gist and filters for numeric rows. The code uses D3 v6 methods including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` with `join` to render circles. Axis labels indicate “Area” on the x-axis and “Perimeter” on the y-axis, with margins and a fixed 600x400 chart size.

Oct 20, 2025
Loading thumbnail…

Fork of D3 Starter

This example displays the first five rows of a shapes dataset in a styled HTML table. It fetches a remote CSV file and renders its columns and rows using the D3.js library’s `d3.csv` method and DOM selection API. The table features a dark blue header, alternating row colors, and hover highlighting via inline CSS. The code explicitly uses `d3.select`, `d3.append`, and `.data()` to build the table structure, while pulling data from a Gist-hosted CSV containing columns like Shape, Color, and Number of Sides.

Oct 6, 2025
Loading thumbnail…

Fork of HTML Starter

This visualization displays a summary of a CSV file, showing the file size in kilobytes, the number of rows, and the number of columns in a clean card layout. It fetches the `shapes_data.csv` file from a GitHub Gist using the `fetch` API, then uses `d3.csvParse` to parse the text into a tabular data structure. The code accesses the parsed data’s `length` property for row count and the `columns` array for column count, displaying these values as plain text. The example demonstrates a straightforward use of D3.js v7 for CSV parsing and basic DOM manipulation without any chart rendering.

Oct 6, 2025
Loading thumbnail…

Fork of HTML Starter

This example summarizes and previews a CSV file fetched from a remote GitHub URL. It displays the file size in kilobytes, row count, and column count inside an interactive card, then renders the first five rows in an HTML table. The visualization uses D3 v7’s `d3.csvParse` to parse the downloaded text and D3 selections to dynamically build the table header and body cells. The data is loaded using the Fetch API, with a fallback error message if the request fails. The page relies on CSS styling with hover effects and card scaling for presentation.

Oct 5, 2025
Loading thumbnail…

shapes_data.csv

This example displays a static message, “Hello HTML!”, rendered in large, centered text on a blank page. The visualization is built using a simple HTML structure, styled with CSS properties such as `font-size` and `text-align` for typography and layout. The underlying data, sourced from `shapes_data.csv`, is not visualized here. The behavior is limited to a single console log statement, and the page does not use any dynamic libraries or data-rendering APIs like D3 or Canvas.

Oct 5, 2025