Scatterplot instructions and comments

times · Mar 15, 2017 · 9c1a819 · 9c1a819
1 parent 8a1d462
commit 9c1a819
Show file tree

Hide file tree

Showing 7 changed files with 672 additions and 14 deletions.
diff --git a/.RData b/.RData
diff --git a/.Rhistory b/.Rhistory
diff --git a/index.json b/index.json
@@ -1,6 +1,6 @@
 [
   {
-    "title": "Scatterplot",
+    "title": "Scatterplot (d3 + R)",
     "img": "https://github.com/basilesimon/times-visual-vocabulary/blob/master/scatterplot/1.png?raw=true",
     "url" : "scatterplot/"
   },

diff --git a/scatterplot-r.svg b/scatterplot-r.svg
diff --git a/scatterplot/README.md b/scatterplot/README.md
@@ -6,6 +6,8 @@ A simple bubble scatterplot.
 
 ## Data format
 
+#### for d3
+
 An array of objects containing two key/value pairs for the x-axis and y-axis.
 
 ```
@@ -20,12 +22,25 @@ An array of objects containing two key/value pairs for the x-axis and y-axis.
   ]
 ```
 
+#### for R
+
+A CSV file containing at least two variables (columns).
+
+```
+Name,Fee,Age
+Glenn Murray,3,33
+Lukas Jutkiewicz,1,27
+Danny Lafferty,0.43,27
+```
+
 ## Annotations
 
 At the top of `script.js`, an array of objects contains the annotation layer.
 
 Un-comment line 119 (`draggable(true)`) and refresh to manually drag and edit your annotations. Once you're happy, run `copy(annotations)` in the console and paste into `annotations` at the top of `script.js`.
 
+Annotations are added manually in R.
+
 ## Download and edit
 
 Install the [SVG Crowbar](http://nytimes.github.io/svg-crowbar/) by dragging the bookmarklet on this page to your bookmarks bar. Click the bookmarklet to download an Illustrator-ready SVG.
diff --git a/scatterplot/script.R b/scatterplot/script.R
@@ -1,30 +1,55 @@
+# Load following libraries
+library(ggplot2)
 library(readr)
+
+# Load CSV file containing data
+# Note: the path to the file must be correct!
+# It can be a local file or a URL
 data <- read_csv("~/Github/times-visual-vocabulary/scatterplot/data.csv")
 
+# Replace Age and Fee in the example by the variables you want
+# on x and y in your plot
 ggplot(data = data, aes(x = Age,
                         y = Fee)) +
+
+# Fill colour defaults to Times blue
   geom_point(stat = "identity", 
              aes(size = 2, fill = "#254251")) +
+
+# Name and label of the y axis
+# Limits sets up to and from where runs our axis
+# Breaks sets the tick placements
   scale_y_continuous(name = "Fee (m£)", 
                      limits = c(0,60), 
                      breaks = seq(0,60,10)) +
+
+# Breaks sets the tick placements
+# on our x axis
   scale_x_continuous(breaks = seq(20,33,1)) +
+
+# Annotation layer
+# Use x/y coordinates similar to the one you'd use
+# if you were placing a point on the plot
   annotate("text", 
            x = 25.8, y = 52, 
            label = "Oscar", color="#F37F2F") +
   annotate("text", 
            x = 25.2, y = 24.2, 
            label = "Morgan Schneiderlin", color="#F37F2F") +
+
+# Theming
   theme(
-    plot.background = element_rect(fill = "#f7f8f1"),
-    panel.background = element_rect(fill = "#f7f8f1"),
-    panel.grid.minor = element_blank(),
+    plot.background = element_rect(fill = "#f7f8f1"),     # on buff
+    panel.background = element_rect(fill = "#f7f8f1"),    # on buff
+    panel.grid.minor = element_blank(),                   # no small lines
     panel.grid.major = element_line(colour = "lightgrey", linetype = "dashed"),
-    panel.grid.minor.x = element_blank(),
-    panel.grid.major.x = element_blank(),
-    legend.position = "none",
-    axis.ticks = element_blank(),
+    panel.grid.minor.x = element_blank(),                 # no x axis rules
+    panel.grid.major.x = element_blank(),                 # no x axis rules
+    legend.position = "none",                             # no legend
+    axis.ticks = element_blank(),                         # no ticks
     plot.margin = unit(c(1,1,1,1), "cm")
   ) +
+
+# Export to SVG
   ggsave(filename = "scatterplot-r.svg")
 
diff --git a/scatterplot/script.js b/scatterplot/script.js
@@ -1,3 +1,8 @@
+/*
+ * Annotation layer
+ * DO uncomment further below
+ *    draggable(true)
+ */
 var annotations = [{
     "Fee": "50",
     "Age": "25",
@@ -26,35 +31,48 @@ var margin = {top: 20, right: 40, bottom: 50, left: 60},
     height = config.height - margin.top - margin.bottom;
 
 // Clean up before drawing
+// By brutally emptying all HTML from plot container div
 d3.select("#times-scatterplot").html("");
 
 var svg = d3.select("#times-scatterplot")
             .attr("width", config.width)
-            .attr("height", config.height)
-
-// Scales
+            .attr("height", config.height);
+
+/*
+ * Scales
+ * Both scales run full height and full width
+ * and are linear
+ * More about scales: https://github.com/d3/d3/blob/master/API.md#scales-d3-scale
+ */
 var x = d3.scaleLinear().range([0, width]);
 var y = d3.scaleLinear().range([height, 0]);
 
-// g is our container
+// g is our main container
 var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 d3.json("data.json", function(err, dataset) {
+
+  /*
+   * Constrain variables to numbers
+   */
   dataset.forEach(function(d) {
     d.Age = +d.Age;
     d.Fee = +d.Fee;
   });
 
-  // d3.extent should return a [min,max] array
+  /*
+   * d3.extent should return a [min,max] array
+   * We're hard-coding the y-axis extent in this case
+   */
   var xExtent = d3.extent(dataset, function(d) { return d.Age; });
   //var yExtent = d3.extent(dataset, function(d) { return d.Fee; });
   var yExtent = d3.extent([0,65]);
+
   x.domain(xExtent);
   y.domain(yExtent);
 
   // X-axis
-  // do not render by avoid calling it
   g.append("g")
     .attr("class", "axis axis--x")
     .attr("transform", "translate(0," + height + ")")
@@ -113,6 +131,7 @@ d3.json("data.json", function(err, dataset) {
     .call(swoopy);
 
   // SVG arrow marker fix
+  // Do not change
   svg.append("marker")
     .attr("id", "arrow")
     .attr("viewBox", "-10 -10 20 20")