Fix typos and change space+newline -> newline

Derek Greentree · Derek Greentree · commit 63812291ee6d · 2013-05-01T11:09:52.000-06:00
diff --git a/content/guides/rendering-data-as-graphs.md b/content/guides/rendering-data-as-graphs.md
@@ -11,7 +11,7 @@ In this guide, we're going to poll repositories that we own, and render the
 information there with graphs, using the [d3.js][d3.js] library. We'll also
 be using Octokit, a Ruby library designed to interact with the GitHub API.
 
-We're going to jump right in and assume you've already read the ["Basics of Authentication"][basics-of-authentication] 
+We're going to jump right in and assume you've already read the ["Basics of Authentication"][basics-of-authentication]
 guide.
 
 Note: you can download the complete source code for this project [from the platform-samples repo](https://github.com/github/platform-samples/tree/master/api/ruby/rendering-data-as-graphs).
@@ -68,10 +68,10 @@ Set up a similar _config.ru_ file as in the previous example:
 ## Fetching repository information
 
 This time, in order to talk to the GitHub API, we're going to use the [Octokit
-Ruby library][Octokit]. This is supremly better than directly making a bunch of
+Ruby library][Octokit]. This is supremely better than directly making a bunch of
 REST calls. Plus, Octokit was developed by a GitHubber, so you know it'll work.
 
-Establishing an Octokit instance is extremly easy; just pass your login
+Establishing an Octokit instance is extremely easy; just pass your login
 and token to the `Octokit::Client` constructor:
 
     if !authenticated?
@@ -81,7 +81,7 @@ and token to the `Octokit::Client` constructor:
     end
 
 Let's do something interesting with our repository information; let's list the count
-of each language found in our repositories. To do that, we'll first have to grab 
+of each language found in our repositories. To do that, we'll first have to grab
 a list of repositories we own. With Octokit, that looks like this:
 
     repos = client.repositories
@@ -91,7 +91,7 @@ identifies:
 
     language_obj = {}
     repos.each do |repo|
-      # sometimes language can be nil 
+      # sometimes language can be nil
       if repo.language
         if !language_obj[repo.language]
           language_obj[repo.language] = 1
@@ -103,7 +103,7 @@ identifies:
 
     languages.to_s
 
-When you restart your server, your web page should display some information 
+When you restart your server, your web page should display some information
 that looks like this:
 
     {"JavaScript"=>13, "PHP"=>1, "Perl"=>1, "CoffeeScript"=>2, nil=>4, "Python"=>1, "Java"=>3, "Ruby"=>3, "Go"=>1, "C++"=>1}
@@ -119,11 +119,11 @@ d3.js likes working with arrays of JSON, so let's convert our Ruby hash into one
     language_obj.each do |lang, count|
       languages.push :language => lang, :count => count
     end
-    
+
     erb :lang_freq, :locals => { :languages => languages.to_json}
 
 We're iterating over each key-value pair in our object, and just pushing them into
-a new array. The reason we didn't do this earlier is because we didn't want to iterate 
+a new array. The reason we didn't do this earlier is because we didn't want to iterate
 over our `language_obj` object whilst we were creating it.
 
 Now, _lang_freq.erb_ is going to need a bunch of code to support rendering a bar graph.
@@ -146,7 +146,7 @@ For a really good tutorial on the basics of d3, check out [this article called
           fill: white;
         }
         text.yAxis {
-          font-size: 12px; 
+          font-size: 12px;
           font-family: Helvetica, sans-serif;
           fill: black;
         }
@@ -208,7 +208,7 @@ For a really good tutorial on the basics of d3, check out [this article called
     </html>
 
 Phew! Again, don't worry about what most of this code is doing. The relevant part
-here is a line way at the top--`var data = <%= languages %>;`--which indicates 
+here is a line way at the top--`var data = <%= languages %>;`--which indicates
 that we're passing our previously created `languages` array into ERB for manipulation.
 
 As the "D3 for Mortals" guide suggests, this isn't necessarily the best use of
@@ -218,22 +218,22 @@ to make some really amazing things.
 ## Combining different API calls
 
 Now it's time for a confession: the `language` attribute within repositories
-only identifies the "primary" language defined. That means that if you have 
+only identifies the "primary" language defined. That means that if you have
 a repository that combines several languages, the one with the most bytes of code
 is considered to be the primary language.
 
-Let's combine a few API calls to get a _true_ representation of which language 
+Let's combine a few API calls to get a _true_ representation of which language
 has the greatest number of bytes written across all our code. A [treemap][d3 treemap]
-should be a great way to visualize the sizes of our coding languages used, rather 
-than simply the count. We'll need to construct an array of objects that looks 
+should be a great way to visualize the sizes of our coding languages used, rather
+than simply the count. We'll need to construct an array of objects that looks
 something like this:
 
     [ { "name": "language1", "size": 100},
       { "name": "language2", "size": 23}
       ...
     ]
 
-Since we already have a list of repositories above, let's inspect each one, and 
+Since we already have a list of repositories above, let's inspect each one, and
 call [the language listing API method][language API]:
 
     repos.each do |repo|
@@ -269,7 +269,7 @@ To wrap up, we'll want to just pass this JSON information over to the same ERB f
 
 
 Just like we did before, here's a bunch of d3 JavaScript code that you can just drop
-directly into your template: 
+directly into your template:
 
     <div id="byte_freq"></div>
     <script>
@@ -279,26 +279,26 @@ directly into your template:
       var sizeFunction = function(d){return d.count;};
       var colorFunction = function(d){return Math.floor(Math.random()*20)};
       var nameFunction = function(d){return d.name;};
-   
+
       var color = d3.scale.linear()
                   .domain([0,10,15,20])
                   .range(["grey","green","yellow","red"]);
-   
+
       drawTreemap(5000, 2000, '#byte_freq', language_bytes, childrenFunction, nameFunction, sizeFunction, colorFunction, color);
 
       function drawTreemap(height,width,elementSelector,language_bytes,childrenFunction,nameFunction,sizeFunction,colorFunction,colorScale){
-       
+
           var treemap = d3.layout.treemap()
               .children(childrenFunction)
               .size([width,height])
               .value(sizeFunction);
-       
+
           var div = d3.select(elementSelector)
               .append("div")
               .style("position","relative")
               .style("width",width + "px")
               .style("height",height + "px");
-       
+
           div.data(language_bytes).selectAll("div")
               .data(function(d){return treemap.nodes(d);})
               .enter()
@@ -308,7 +308,7 @@ directly into your template:
               .call(cell)
               .text(nameFunction);
       }
-       
+
       function cell(){
           this
               .style("left",function(d){return d.x + "px";})
