Skip to content

Instantly share code, notes, and snippets.

@weiglemc
Last active January 15, 2019 19:39
Show Gist options
  • Save weiglemc/6185069 to your computer and use it in GitHub Desktop.
Save weiglemc/6185069 to your computer and use it in GitHub Desktop.
D3 Scatterplot Example
license: mit

d3 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 valuescale, mapping from data to display.

Inspired by Andrew Winterman’s post, Tooling for the Lazy Programmer: DRYing up D3.

Cereal Name Manufacturer Type Calories Protein (g) Fat Sodium Dietary Fiber Carbs Sugars Display Shelf Potassium Vitamins and Minerals Serving Size Weight Cups per Serving
100%_Bran Nabisco C 70 4 1 130 10 5 6 3 280 25 1 0.33
100%_Natural_Bran Quaker Oats C 120 3 5 15 2 8 8 3 135 0 1 -1
All-Bran Kelloggs C 70 4 1 260 9 7 5 3 320 25 1 0.33
All-Bran_with_Extra_Fiber Kelloggs C 50 4 0 140 14 8 0 3 330 25 1 0.5
Almond_Delight Ralston Purina C 110 2 2 200 1 14 8 3 -1 25 1 0.75
Apple_Cinnamon_Cheerios General Mills C 110 2 2 180 1.5 10.5 10 1 70 25 1 0.75
Apple_Jacks Kelloggs C 110 2 0 125 1 11 14 2 30 25 1 1
Basic_4 General Mills C 130 3 2 210 2 18 8 3 100 25 1.33 0.75
Bran_Chex Ralston Purina C 90 2 1 200 4 15 6 1 125 25 1 0.67
Bran_Flakes Post C 90 3 0 210 5 13 5 3 190 25 1 0.67
Cap'n'Crunch Quaker Oats C 120 1 2 220 0 12 12 2 35 25 1 0.75
Cheerios General Mills C 110 6 2 290 2 17 1 1 105 25 1 1.25
Cinnamon_Toast_Crunch General Mills C 120 1 3 210 0 13 9 2 45 25 1 0.75
Clusters General Mills C 110 3 2 140 2 13 7 3 105 25 1 0.5
Cocoa_Puffs General Mills C 110 1 1 180 0 12 13 2 55 25 1 1
Corn_Chex Ralston Purina C 110 2 0 280 0 22 3 1 25 25 1 1
Corn_Flakes Kelloggs C 100 2 0 290 1 21 2 1 35 25 1 1
Corn_Pops Kelloggs C 110 1 0 90 1 13 12 2 20 25 1 1
Count_Chocula General Mills C 110 1 1 180 0 12 13 2 65 25 1 1
Cracklin'_Oat_Bran Kelloggs C 110 3 3 140 4 10 7 3 160 25 1 0.5
Cream_of_Wheat_(Quick) Nabisco H 100 3 0 80 1 21 0 2 -1 0 1 1
Crispix Kelloggs C 110 2 0 220 1 21 3 3 30 25 1 1
Crispy_Wheat_&_Raisins General Mills C 100 2 1 140 2 11 10 3 120 25 1 0.75
Double_Chex Ralston Purina C 100 2 0 190 1 18 5 3 80 25 1 0.75
Froot_Loops Kelloggs C 110 2 1 125 1 11 13 2 30 25 1 1
Frosted_Flakes Kelloggs C 110 1 0 200 1 14 11 1 25 25 1 0.75
Frosted_Mini-Wheats Kelloggs C 100 3 0 0 3 14 7 2 100 25 1 0.8
Fruitful_Bran Kelloggs C 120 3 0 240 5 14 12 3 190 25 1.33 0.67
Fruity_Pebbles Post C 110 1 1 135 0 13 12 2 25 25 1 0.75
Golden_Crisp Post C 100 2 0 45 0 11 15 1 40 25 1 0.88
Golden_Grahams General Mills C 110 1 1 280 0 15 9 2 45 25 1 0.75
Grape_Nuts_Flakes Post C 100 3 1 140 3 15 5 3 85 25 1 0.88
Grape-Nuts Post C 110 3 0 170 3 17 3 3 90 25 1 0.25
Great_Grains_Pecan Post C 120 3 3 75 3 13 4 3 100 25 1 0.33
Honey_Graham_Ohs Quaker Oats C 120 1 2 220 1 12 11 2 45 25 1 1
Honey_Nut_Cheerios General Mills C 110 3 1 250 1.5 11.5 10 1 90 25 1 0.75
Honey-comb Post C 110 1 0 180 0 14 11 1 35 25 1 1.33
Just_Right_Crunchy__Nuggets Kelloggs C 110 2 1 170 1 17 6 3 60 100 1 -1
Just_Right_Fruit_&_Nut Kelloggs C 140 3 1 170 2 20 9 3 95 100 1.3 0.75
Kix General Mills C 110 2 1 260 0 21 3 2 40 25 1 1.5
Life Quaker Oats C 100 4 2 150 2 12 6 2 95 25 1 0.67
Lucky_Charms General Mills C 110 2 1 180 0 12 12 2 55 25 1 1
Maypo American Home Food Products H 100 4 1 0 0 16 3 2 95 25 1 -1
Mueslix_Crispy_Blend Kelloggs C 160 3 2 150 3 17 13 3 160 25 1.5 0.67
Multi-Grain_Cheerios General Mills C 100 2 1 220 2 15 6 1 90 25 1 1
Nut&Honey_Crunch Kelloggs C 120 2 1 190 0 15 9 2 40 25 1 0.67
Nutri-Grain_Almond-Raisin Kelloggs C 140 3 2 220 3 21 7 3 130 25 1.33 0.67
Nutri-grain_Wheat Kelloggs C 90 3 0 170 3 18 2 3 90 25 1 -1
Oatmeal_Raisin_Crisp General Mills C 130 3 2 170 1.5 13.5 10 3 120 25 1.25 0.5
Post_Nat._Raisin_Bran Post C 120 3 1 200 6 11 14 3 260 25 1.33 0.67
Product_19 Kelloggs C 100 3 0 320 1 20 3 3 45 100 1 1
Puffed_Rice Quaker Oats C 50 1 0 0 0 13 0 3 15 0 0.5 1
Puffed_Wheat Quaker Oats C 50 2 0 0 1 10 0 3 50 0 0.5 -1
Quaker_Oat_Squares Quaker Oats C 100 4 1 135 2 14 6 3 110 25 1 0.5
Quaker_Oatmeal Quaker Oats H 100 5 2 0 2.7 -1 -1 1 110 0 1 0.67
Raisin_Bran Kelloggs C 120 3 1 210 5 14 12 2 240 25 1.33 0.75
Raisin_Nut_Bran General Mills C 100 3 2 140 2.5 10.5 8 3 140 25 1 0.5
Raisin_Squares Kelloggs C 90 2 0 0 2 15 6 3 110 25 1 0.5
Rice_Chex Ralston Purina C 110 1 0 240 0 23 2 1 30 25 1 1.13
Rice_Krispies Kelloggs C 110 2 0 290 0 22 3 1 35 25 1 1
Shredded_Wheat Nabisco C 80 2 0 0 3 16 0 1 95 0 0.83 -1
Shredded_Wheat_'n'Bran Nabisco C 90 3 0 0 4 19 0 1 140 0 1 0.67
Shredded_Wheat_spoon_size Nabisco C 90 3 0 0 3 20 0 1 120 0 1 0.67
Smacks Kelloggs C 110 2 1 70 1 9 15 2 40 25 1 0.75
Special_K Kelloggs C 110 6 0 230 1 16 3 1 55 25 1 1
Strawberry_Fruit_Wheats Nabisco C 90 2 0 15 3 15 5 2 90 25 1 -1
Total_Corn_Flakes General Mills C 110 2 1 200 0 21 3 3 35 100 1 1
Total_Raisin_Bran General Mills C 140 3 1 190 4 15 14 3 230 100 1.5 1
Total_Whole_Grain General Mills C 100 3 1 200 3 16 3 3 110 100 1 1
Triples General Mills C 110 2 1 250 0 21 3 3 60 25 1 0.75
Trix General Mills C 110 1 1 140 0 13 12 2 25 25 1 1
Wheat_Chex Ralston Purina C 100 3 1 230 3 17 3 1 115 25 1 0.67
Wheaties General Mills C 100 3 1 200 3 17 3 1 110 25 1 1
Wheaties_Honey_Gold General Mills C 110 2 1 200 1 16 8 1 60 25 1 0.75
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<!-- Coding style based on http://gist.github.com/mbostock/5977197 -->
<style>
body {
font: 11px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
/*
* value accessor - returns the value to encode for a given data object.
* scale - maps value to a visual display encoding, such as a pixel position.
* map function - maps from data value to display value
* axis - sets up axis
*/
// setup x
var xValue = function(d) { return d.Calories;}, // data -> value
xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// setup y
var yValue = function(d) { return d["Protein (g)"];}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
// setup fill color
var cValue = function(d) { return d.Manufacturer;},
color = d3.scale.category10();
// add the graph canvas to the body of the webpage
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// load data
d3.csv("cereal.csv", function(error, data) {
// change string (from CSV) into number format
data.forEach(function(d) {
d.Calories = +d.Calories;
d["Protein (g)"] = +d["Protein (g)"];
// console.log(d);
});
// don't want dots overlapping axis, so add in buffer to data domain
xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Calories");
// y-axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Protein (g)");
// draw dots
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d["Cereal Name"] + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
// draw legend
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
// draw legend text
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d;})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment