D3 Scatterplot Example
This example visualizes the relationship between calories and protein content for various breakfast cereals using a scatterplot. Each dot represents a cereal, with its horizontal position mapped to calorie count, vertical position to protein grams, and color indicating the manufacturer. The chart includes labeled axes, a categorical color legend, and interactive tooltips that display the cereal name and exact values on hover. Built with D3.js v3, the code uses the `d3.scale.linear` API for axis scaling, `d3.svg.axis` for rendering, and SVG circles for the data points. The dataset is loaded from a local CSV file and processed with `d3.csv`.
AI-generated descriptiond3 scatterplot example using the Breakfast Cereal Dataset from http://idvbook.com and based on the scatterplot example at http://bl.ocks.org/mbostock/3887118
Coding style based on mbostock's DRY Bar Chart at http://gist.github.com/mbostock/5977197
A variation of the example bar chart using a slightly more D.R.Y. style. The visual encoding is represented by two functions and their composition:
- The value accessor returns the value (or property) to encode for a given data object.
- The scale maps this value to a visual display encoding, such as a pixel position.
- The map function represents the composition value ○ scale, mapping from data to display.
Inspired by Andrew Winterman’s post, Tooling for the Lazy Programmer: DRYing up D3.
forked from <a href='http://bl.ocks.org/weiglemc/'>weiglemc</a>'s block: <a href='http://bl.ocks.org/weiglemc/6185069'>D3 Scatterplot Example</a>