Merge pull request #8 from tomwanzek/update-readme-pre-release

Content/Layout. angular-cli beta.15. Minor Fixes.

README.md

@@ -1,45 +1,69 @@
-# D3 Angular 2 Demo
+# Reusable Visual Power?
 
 [![Build Status](https://travis-ci.org/tomwanzek/d3-ng2-demo.svg?branch=master)](https://travis-ci.org/tomwanzek/d3-ng2-demo)
 
-## Purpose
+## Fuse D3 and Angular 2 in TypeScript (A Demo)
 
-This project repository contains an **Angular 2** web application which demonstrates the integration with **D3 version 4** in **TypeScript**.
 
-The running web app can be seen at: [d3-ng2-demo Github Page](https://tomwanzek.github.io/d3-ng2-demo/).
+Ever wondered, how to build modern web apps with reusable, interactive data visualization components?
 
-It illustrates the use of a _D3 Service_ as a provider for the rendering of **D3** data visualizations implemented as Angular 2 components.
+The latest incarnation of **[D3](https://d3js.org/)** is getting you excited about new destinations. **[Angular 2](https://angular.io/)** is finally on the tarmac. [**TypeScript**](https://github.com/midrosoft/typescript) has become the fuel that lets you develop complex solutions at scale.
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.14.
+Integrating all three, however, seems as daunting as taking off in the perfect storm.
 
+This Angular 2 demo app is intended to get you started. Rather than trying to be exhaustive or writing a lengthy blog post, a select few well-known D3 demo scripts have been adapted to highlight key considerations:
 
-_This Readme is undergoing an update process_
+* use an Angular 2 Service to inject the power of D3 version 4 into a project,
 
+* explore how D3 visualizations can be implemented as Angular 2 components in TypeScript 2,
 
-## Development server
+* see how a visualization component can change in response to input data changes,
+
+* find ways to unit test your D3 components with Karma/Jasmine, and
+
+* check out an example end-to-end test using Protractor.
+
+_The running web app can be seen at:_ **[d3-ng2-demo Github Page](https://tomwanzek.github.io/d3-ng2-demo/)**.
+
+
+![Screenshot Drag-Zoom-2](./screenshots/d3-ng2-demo-screenshot-2.PNG)
+
+
+## Explore this Project Locally
+
+This project was generated with **[angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.15**.
+
+### Installation
+
+In order to explore the project locally:
+
+1. clone this git repository using `git clone https://github.com/tomwanzek/d3-ng2-demo.git`,
+2. change into the project directory `cd d3-ng2-demo`, and
+3. run `npm install`.
+
+Now you are ready to explore the source code and use the features provided by **angular-cli** for your convenience.
+A brief overview of the command line support provided by angular-cli is sketched out in the following subsections.
+
+### Development Server
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-## Code scaffolding
+### Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
 
-## Build
+### Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
 
-## Running unit tests
+### Running Unit Tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running end-to-end tests
+### Running End-to-End Tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 
 Before running the tests make sure you are serving the app via `ng serve`.
 
-## Deploying to Github Pages
-
-Run `ng github-pages:deploy` to deploy to Github Pages.
-
-## Further help
+### Further Help
 
 To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular-cli.json

@@ -1,6 +1,6 @@
 {
   "project": {
-    "version": "1.0.0-beta.14",
+    "version": "1.0.0-beta.15",
     "name": "d3-ng2-demo"
   },
   "apps": [

package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.30",
-    "angular-cli": "1.0.0-beta.14",
+    "angular-cli": "1.0.0-beta.15",
     "codelyzer": "~0.0.26",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",

src/app/app.component.css

@@ -6,6 +6,13 @@ div.jumbotron p {
   font-size: 14px;
 }
 
-footer a {
-  color: white;
+div.jumbotron img {
+  max-height: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+footer {
+  background-color: #222;
+  color: #eee;
 }

src/app/app.component.html

@@ -2,7 +2,7 @@
   <div class="container-fluid">
     <div class="navbar-header">
       <span class="navbar-brand">
-        {{title}}
+        <a href="https://github.com/tomwanzek/d3-ng2-demo">{{title}}</a>
         </span>
     </div>
   </div>
@@ -11,61 +11,57 @@
 <div class="container-fluid">
 
   <div class="jumbotron">
-    <h1>Visual Power at Scale?</h1>
-    <h3><em>Fuse D3 and Angular 2 in TypeScript</em></h3>
+    <h1>Reusable Visual Power?</h1>
+    <h3><em>Fuse D3 and Angular 2 in TypeScript (A Demo)</em></h3>
     <br>
     <div class="row">
       <div class="col-lg-3 col-lg-offset-1">
         <h4>Perfect Storm</h4>
         <div class="text-justify">
           <p>
-            Ever wondered, how to build modern web apps with re-usable, interactive data visualization components?
+            Ever wondered, how to build modern web apps with reusable, interactive data visualization components?
           </p>
           <p>
-            The latest incarnation of <b>D3</b> is getting you excited, <b>Angular 2</b> is approaching the landing strip,
-            and you have come to love <b>TypeScript</b> for its promise to develop complex solutions at scale.
+            The latest incarnation of <b>D3</b> is getting you excited about new destinations.
           </p>
           <p>
-            But integrating all three seems daunting.
+            <b>Angular 2</b> is finally on the tarmac.
+          </p>
+          <p>
+            <b>TypeScript</b> has become the fuel that lets you develop complex solutions at scale.
+          </p>
+          <p>
+            Integrating all three, however, seems as daunting as taking off in the perfect storm.
           </p>
         </div>
       </div>
+      <div class="col-lg-4">
+        <!-- insert images -->
+        <img src="assets/d3-ng2-demo-screenshots.png" class="img-responsive" />
+      </div>
       <div class="col-lg-3">
         <h4>Take Flight</h4>
         <div class="text-justify">
           <p>
-            This Angular 2 demo app and its source code repository are intended to get you started.
+            This Angular 2 demo app and its source code repository are intended to get you started. Rather than trying to be exhaustive
+            or writing a lengthy blog post, a select few well-known D3 demo scripts have been adapted to highlight key considerations.
           </p>
           <p>
-            They illustrate how D3 version 4 visualizations can be implemented as Angular 2 components in TypeScript 2.
+            Use an Angular 2 Service to inject the power of D3 version 4 into a project.
           </p>
           <p>
-            Rather than trying to be exhaustive or writing a lengthy blog post, a select few well-known D3 demo scripts have been adapted
-            to highlight key considerations.
-          </p>
-        </div>
-      </div>
-      <div class="col-lg-4">
-        <h4>Further References</h4>
-        <div>
-          <p>
-            <b>D3 Resources</b><br>
-            <a href="https://d3js.org/">D3 Data Driven Documents (Official Website)</a><br>
-            <a href="https://github.com/d3/d3">D3 on Github</a><br>
-            <a href="https://bl.ocks.org/mbostock">Mike Bostock's D3 Blocks</a><br>
+            Explore how D3 visualizations can be implemented as Angular 2 components in TypeScript 2.
           </p>
           <p>
-            <b>Angular 2 Resources</b><br>
-            <a href="https://angular.io/">Angular 2</a>
+            See how a visualization component can change in response to input data changes.
           </p>
           <p>
-            <b>Source Code Resources for this App</b><br>
-            <a href="https://github.com/tomwanzek/d3-ng2-demo">App Github Repo</a><br>
-            <a href="https://github.com/tomwanzek/d3-ng2-service">D3Service Github Repo</a>
+            Find ways to unit test your D3 components with Karma/Jasmine and check out a worked example end-to-end test using Protractor.
           </p>
         </div>
       </div>
     </div>
+
   </div>
 
 </div>
@@ -75,14 +71,42 @@ <h4>Further References</h4>
 <app-wrapper-voronoi-spirals-3></app-wrapper-voronoi-spirals-3>
 
 <footer class="container-fluid">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="col-lg-4">
+        <h3>Source Code Resources for this App</h3>
+        <div class="well">
+
+          <a href="https://github.com/tomwanzek/d3-ng2-demo">Demo App Github Repo</a><br>
+          <a href="https://github.com/tomwanzek/d3-ng2-service">D3Service Github Repo</a>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <h3>D3 Resources</h3>
+        <div class="well">
+
+          <a href="https://d3js.org/">D3 Data Driven Documents (Official Website)</a><br>
+          <a href="https://github.com/d3/d3">D3 on Github</a><br>
+          <a href="https://bl.ocks.org/mbostock">Mike Bostock's D3 Blocks</a><br>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <h3>Angular 2 Resources</h3>
+        <div class="well">
+          <a href="https://angular.io/">Angular 2</a><br>
+          <a href="https://github.com/angular/angular-cli/">Angular CLI</a>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="row">
     <div class="text-center col-lg-12">
       <p>
         Copyright &copy; 2016 Thomas Wanzek.
       </p>
       <p>
-        <em>Released under MIT License. For licensing information please refer to the github repository underlying this website. The repository can be found at:</em>
-        <a href="https://github.com/tomwanzek/d3-ng2-demo">https://github.com/tomwanzek/d3-ng2-demo</a>
+        <em>Released under MIT License. For details see:</em>
+        <a href="https://github.com/tomwanzek/d3-ng2-demo/tree/master/LICENSE.txt">https://github.com/tomwanzek/d3-ng2-demo/tree/master/LICENSE</a>
       </p>
     </div>
   </div>

src/app/d3-demos/voronoi-spirals-3/voronoi-spirals-3.component.ts

@@ -113,8 +113,7 @@ export class VoronoiSpirals3Component implements OnInit, OnDestroy {
           }
           context.putImageData(targetBuffer, 0, 0);
         });
-      }
-      )
+      });
 
     }
   }

src/app/d3-demos/wrapper-drag-zoom-2/wrapper-drag-zoom-2.component.html

@@ -14,10 +14,10 @@ <h3 class="text-primary">Drag & Zoom II</h3>
           build an Angular 2 component which uses a D3 service to render to <code>&lt;svg&gt;</code>,
         </li>
         <li>
-          use D3 version 4 in TypeScript to handle of drag and zoom/pan events, and
+          use D3 version 4 in TypeScript to handle drag and zoom/pan events, and
         </li>
         <li>
-          use Angular 2 to manage input changes to a reusable D3 component.
+          use Angular 2 to respond to input changes to a reusable D3 component.
         </li>
       </ul>
     </div>

src/index.html

@@ -1,15 +1,27 @@
 <!doctype html>
 <html>
+
 <head>
   <meta charset="utf-8">
-  <title>D3 Angular 2 Demo</title>
+  <title>Reusable Visual Power</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
 
 </head>
+
 <body>
-  <app-root>Loading...</app-root>
+  <app-root>
+    <div class="containter">
+      <div class="row">
+        <div class="col-lg-12">
+          <div class="alert alert-info text-center">
+            <span class="glyphicon glyphicon-refresh"></span><em>Loading...</em>
+          </div>
+        </div>
+      </div>
+    </div>
+  </app-root>
 </body>
+
 </html>