Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published0🌍 Public
Ppeesarie
Last edited Jul 1, 2022
Created on Jul 1, 2022
Forked from D3 Starter

This example displays a scatter plot comparing age and weight for six data points, with labeled axes and a title. It uses the Google Charts loader and its `google.visualization.ScatterChart` API to render the chart inside a `chart_div` element, while also loading D3 v7 via a script tag. The code defines the dataset inline with `google.visualization.arrayToDataTable` and sets axis ranges and legend options before drawing. Although the page includes D3, the visible functionality relies entirely on Google Charts, not D3 methods.

AI-generated description
MIT Licensed

Similar vizzes

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
79% match
Loading thumbnail…

Fork of HTML Starter

This example presents a reusable D3 v7 scatter plot that visualizes a small CSV dataset of individuals, plotting their age against their ID number. The chart uses the `d3.scaleLinear` API for both axes, with points rendered as circles using the D3 `.join()` pattern for efficient SVG creation. The code defines a chart factory function, following Mike Bostock’s reusable chart design, allowing customization of the x and y columns and point radius. The data is loaded via `d3.csv` with `d3.autoType` for automatic type inference.

RRithvik
78% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee
78% match
Loading thumbnail…

Fork of D3 Starter

This example shows a scatter plot of automobile data, mapping cylinders to the x-axis and horsepower to the y-axis, with each car represented as a semi-transparent circle. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements with `scaleLinear`, `axisBottom`, and `axisLeft`. Axis labels are added with rotated text, while margins define the chart’s inner dimensions. The code demonstrates a basic D3 starter template, including data type conversion and appended circle elements.

Ssplit56
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot test

This example presents a reusable scatter plot that visualizes data read from a Google Sheets document via the Google Visualization API. The chart maps two selected spreadsheet columns to x and y positions using D3’s `scaleLinear`, rendering circles with an SVG `join` pattern. Axes are drawn with `axisLeft` and `axisBottom`. The implementation follows a reusable chart pattern, allowing configuration of data, margins, radius, and value accessors.

Ssirenajbpearl@gmail.com
77% match
Loading thumbnail…

Fork of D3 Starter

This example presents two interactive charts built with D3 v7: a multi-series line chart tracking three quantitative variables over time, and a combined bar-and-line chart. The line chart uses `d3.line` to plot valueA, valueB, and valueC against year, while the bar chart draws valueA as rectangles via `d3.scaleBand` and overlays valueB as a line with a secondary `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`. The code also demonstrates axes, legends, and chart titles.

Mmaddulanagasanjana@gmail.com
76% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal line chart created with D3.js, plotting a small time-series dataset of monthly amounts from January to April 2014 as circles on a date-scaled x-axis. The code builds an SVG visualization using D3 v4 and v7, defining chart dimensions, margins, and a time scale via `d3.scaleTime()`. It constructs axes with `d3.axisBottom` and `d3.axisLeft`, binds the data to circle elements using `.data()`, and applies basic styling. The visualization serves as a starter template, showcasing core D3 workflows for scale creation, axis rendering, and data binding.

Aabdeldev504
75% match
Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot of automobile data, plotting engine horsepower against model year for a dataset of vehicles. The visualization uses an SVG rendering approach, with D3 version 3’s `scaleLinear` and `d3.extent` to map the year and horsepower values to pixel coordinates. Circles represent individual data points, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes for both variables. The code structures the plot within a reusable `scatterPlot` function, called with the dataset directly on the body element.

Nnishanththouta16@gmail.com
75% match