Skip to content

Instantly share code, notes, and snippets.

@weiglemc

weiglemc/.block

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.
Download ZIP
D3 Scatterplot Example
Raw
.block
license: mit
Raw
README.md

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 value ○ scale, mapping from data to display.

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

Raw
cereal.csv
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
Raw
index.html
<!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