Example of using a csv file generated by responses to a Google Form.

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

Scatterplot basic

This scatterplot displays clustered data from a CSV file, using color to distinguish clusters. Users can brush a region to zoom in, and double-click to reset the view. The visualization is built with D3 v4, using `d3.scaleLinear` for axes, `d3.brush` for selection, and SVG transitions for smooth animations. It renders data points as circles, with a legend for cluster identification.

MMNoichl

Likert Scales - Squares

This visualization displays Likert-scale survey responses as a grid of colored squares, with each row representing a question and each column an individual respondent. It encodes answer values through a quantized blue color scale, aiding quiz designers in spotting response patterns. The interactive page uses D3 v4 to render the SVG matrix, while jQuery manages dynamic filter checkboxes that let users narrow the displayed data by metadata fields like age, gender, accuracy, country, and source. The code also implements axis labels and a tooltip for detailed inspection, with data loaded from a CSV file via `d3.csv`.

AAllyaenn

Pie Chart

This interactive pie chart displays survey responses on Google apps grouped by category, with each slice representing a data record from a TSV file. Clicking radio buttons changes the displayed category from art to beauty. The visualization uses React with d3.pie for arc generation, d3.nest() for data grouping, and transition.attrTween to animate fill colors while paths morph from a wider inner radius to a narrower one in SVG.

Kkaviya-ds

scatterplot using d3

A scatterplot displays name-number pairs from a local CSV file, mapping names to the y-axis and numeric values (scaled by 1000) to the x-axis using d3.scalePoint and d3.scaleLinear. Circles are rendered via SVG with fixed radius and semi-transparent steelblue fill. The code imports d3 functions like select, csv, and axisBottom, and includes a formatted x-axis with tick size and a custom text label, demonstrating basic D3 v6 data binding and margin-based layout.

RRITUZZ

D3 Example

This example shows a horizontal bar chart comparing the number of Google search results for 14 visualization techniques, ranked from most to least common. The visualization uses D3.js version 3.5.5 to load a CSV file via `d3.csv`, then maps data to an ordinal y-scale and linear x-scale. It includes formatted tick labels that abbreviate large numbers with SI prefixes via `d3.format("s")`, plus a custom tooltip using `d3-tip` that displays exact result counts on mouseover. The chart is rendered as SVG with a Playfair Display font for axis text.

CCurran Kelleher

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange

Scatter Plot with Color Menu

This example presents an interactive scatter plot of the auto-mpg dataset, where users select the x-axis, y-axis, and color encoding variables via three dropdown menus built with a reusable d3 module. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and renders SVG circles with animated transitions. A separate color legend displays the categorical scale. Data parsing and updates are handled through d3.csv and D3’s data join pattern.

CCurran Kelleher