kmuddana@gitam.in (@kmuddana-byte), VizHub

Fork of D3 Starter

A choropleth world map visualizes population data for select countries, using a red sequential color scale to encode values and a legend for reference. Built with D3 v7 and TopoJSON, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projections, loading country boundaries from a world-atlas package and population values from a Gist JSON file. Hovering over a country reveals a tooltip with its population in millions.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of D3 Starter

This interactive network graph visualizes a small set of six individuals (Alice through Frank) connected by six social links. Using D3 v7’s force simulation (`d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`), the nodes and links are rendered as SVG circles, lines, and text labels. The simulation automatically positions the network, while drag behavior (`d3.drag`) lets users move individual nodes in real time, with the layout updating on each tick event.

Apr 12, 2026

Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter example displays the text “Hello D3” in the center of a blank webpage. It uses the D3 v7 selection API, `d3.select`, to target the `body` element and replace its content with a text string. The page’s styling, defined in `index.html`, sets a large font size and top margin to center the message visually. Rendering relies on a JavaScript module that imports the `select` function directly from the D3 library.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows a hierarchical tree diagram of food items, with a red root node ("Food"), orange category nodes for fruits, vegetables, and grains, and green leaf nodes for individual items. Built with D3 v7, the code uses `d3.tree()` and `d3.hierarchy()` to compute the layout, then renders SVG lines for links and circles with labels for nodes. The diagram is hardcoded with sample data, and node colors are assigned via a custom function based on the `type` field.

Apr 12, 2026

Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter example displays the text “Hello D3” in the center of a blank webpage. It uses the D3 v7 selection API, `d3.select`, to target the `body` element and replace its content with a text string. The page’s styling, defined in `index.html`, sets a large font size and top margin to center the message visually. Rendering relies on a JavaScript module that imports the `select` function directly from the D3 library.

Apr 12, 2026

Loading thumbnail…

Fork of D3 Starter

This example shows monthly sales trends with a smooth monotone line chart, rendered as an SVG with animated tooltip interactions. It loads data from a CSV via `d3.csv`, maps months to a point scale and sales values to a linear scale, then draws the line using `d3.line` with `curveMonotoneX`. Circles mark each data point, and hover events trigger a tooltip that displays month and sales values. Axis labels and axes are added with `d3.axisBottom` and `d3.axisLeft`.

Mar 30, 2026

Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter example displays a quantitative area chart of scientific data, using a dataset loaded from an external CSV. The visualization renders an orange, semi-transparent filled area with a darkorange outline to show the trend of the `Value1` metric across categories on the x-axis. It uses `d3.csv` to fetch the data, `d3.scalePoint` and `d3.scaleLinear` for the axes, and the `d3.area` generator to create the SVG path. The chart is drawn with `d3.axisBottom` and `d3.axisLeft`, incorporating labeled axes for "Category" and "Value1".

Mar 30, 2026

Loading thumbnail…

Fork of D3 Starter

This pie chart visualizes the proportional breakdown of a CSV dataset by category, using Value1 as the numeric weight for each slice. Built with D3 v7, it renders as an SVG with slices colored via a categorical color scheme, and each slice is labeled with its category name. The chart includes a legend that maps colors back to categories, generated from the same data. The code constructs the pie using `d3.pie()` and draws arcs with `d3.arc()`, calculating slice paths and centroids for label placement.

Mar 30, 2026

Loading thumbnail…

Fork of D3 Starter

This interactive scatter plot visualizes student test scores, plotting Math scores on the x-axis and Science scores on the y-axis, with points colored red or green depending on study hours. The reusable `scatterPlot` function dynamically creates linear scales, axes, and labels using `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Hovering over a point reveals a tooltip with the student’s name, scores, and study hours. Data loads from a remote CSV via `d3.csv` and renders as SVG circles within a fixed 600×450 canvas.

Mar 30, 2026

Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter example displays the text “Hello D3” in the center of a blank webpage. It uses the D3 v7 selection API, `d3.select`, to target the `body` element and replace its content with a text string. The page’s styling, defined in `index.html`, sets a large font size and top margin to center the message visually. Rendering relies on a JavaScript module that imports the `select` function directly from the D3 library.

Mar 30, 2026