Skip to main content
SimilarExport ZIP
100%

Basic starter code for many simple D3 charts, v4

✓ Published0🌍 Public
LLucyI
Last edited Mar 31, 2017
Created on Mar 31, 2017

A scatterplot displays Anscombe’s Quartet, with points labeled by their x- and y-coordinates and grouped by quartile. The chart uses D3 v4’s `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisRight`, with axes positioned on the right and bottom of an SVG canvas. Data loads from a tab-separated file via `d3.tsv`, and the x- and y-domain extents are updated based on the loaded values. Each point is drawn as a `circle` with a sibling `text` label, both grouped in a transformed `<g>` element.

AI-generated description

A basic scatterplot that loads data, scales and axes and updates domains based on extrema. Uses Mike Bostock's margin conventions and the data for Anscombe's Quartet.

forked from <a href='http://bl.ocks.org/kpq/'>kpq</a>'s block: <a href='http://bl.ocks.org/kpq/4ec215b40c1d559fcb2a'>Basic starter code for many simple D3 charts</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/08e7b999c0a5c1977b34edc7870071e4'>Basic starter code for many simple D3 charts, v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

anscombe

This example displays the Anscombe’s quartet dataset as a simple scatter plot of x and y coordinates. It uses the D3.js v4 library to read the CSV file, scale the data to fit a 700×700 pixel SVG canvas, and render each data point as a steel-blue circle with a red stroke. The code defines linear scales for both axes and maps the y-values to an inverted range so that larger y-values appear higher on the screen.

KK-Du
79% match
Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片
78% match
Loading thumbnail…

HTML Starter

Anscombe's Quartet demonstrates how four datasets with identical statistical summaries produce drastically different scatterplots. The visualization animates between quartet members using Svelte's tweened motion store, smoothly interpolating point positions with a cubicOut easing. D3's scaleLinear maps the data coordinates to the responsive SVG viewport. The chart includes radio buttons to manually select a quartet member, and each point renders as an orange semi-transparent SVG circle with dashed axis tick marks.

MMila Frerichs
78% match
Loading thumbnail…

Simple scatter plot in v4

This example shows a simple line graph with circular data points overlaid to create a scatter plot, displaying stock closing prices over time. The visualization uses d3.csv to load the data, d3.timeParse to convert date strings, and d3.scaleTime and d3.scaleLinear to map the date and price values to pixel coordinates. A d3.line generator draws the line path, while appended circle elements mark each data point. The chart includes axes generated with d3.axisBottom and d3.axisLeft, all rendered as SVG within the page.

Dd3noob
76% match
Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot comparing programming language performance on Project Euler problems, with user-selectable axes, filter options, and animated transitions. It loads CSV timing data and color mappings from GitHub repositories, then visualizes results as colored circles that animate to new positions when the dataset changes. The visualization uses a custom surrounding-layout system that automatically positions titles, subtitles, axes, and legends within an SVG canvas. Built with D3 v7, the code leverages `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, `d3.transition`, and dynamic menu-driven data selection through reusable chart components.

GGavin Sykes
76% match
Loading thumbnail…

D3 v4 Line Chart

This example shows a basic line chart built with D3 v4, plotting a randomly generated dataset of 21 points against a linear x-axis and y-axis. The visualization uses an SVG canvas and follows the standard margin convention, with the line rendered via the `d3.line()` generator and a `curveMonotoneX` smoothing curve. Axis components are created using `d3.axisBottom` and `d3.axisLeft`, while circles representing each datapoint are appended using the `enter().append()` method. The chart demonstrates core D3 data-binding and scale APIs within a minimal, self-contained HTML file.

663anp3ca
76% match
Loading thumbnail…

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

DDuc Pham
76% match
Loading thumbnail…

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
76% match