diff --git a/README.md b/README.md index f9c1143..7d3bbc3 100644 --- a/README.md +++ b/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). diff --git a/angular-cli.json b/angular-cli.json index e4fa37a..086ac89 100644 --- a/angular-cli.json +++ b/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": [ diff --git a/package.json b/package.json index e7b6416..b84eee2 100644 --- a/package.json +++ b/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", diff --git a/screenshots/d3-ng2-demo-screenshot-2.PNG b/screenshots/d3-ng2-demo-screenshot-2.PNG new file mode 100644 index 0000000..40f30f4 Binary files /dev/null and b/screenshots/d3-ng2-demo-screenshot-2.PNG differ diff --git a/src/app/app.component.css b/src/app/app.component.css index 1ec939a..b402a32 100644 --- a/src/app/app.component.css +++ b/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; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 8ae3335..0de5861 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,7 +2,7 @@
- {{title}} + {{title}}
@@ -11,61 +11,57 @@
-

Visual Power at Scale?

-

Fuse D3 and Angular 2 in TypeScript

+

Reusable Visual Power?

+

Fuse D3 and Angular 2 in TypeScript (A Demo)


Perfect Storm

- 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?

- The latest incarnation of D3 is getting you excited, Angular 2 is approaching the landing strip, - and you have come to love TypeScript for its promise to develop complex solutions at scale. + The latest incarnation of D3 is getting you excited about new destinations.

- But integrating all three seems daunting. + Angular 2 is finally on the tarmac. +

+

+ TypeScript has become the fuel that lets you develop complex solutions at scale. +

+

+ Integrating all three, however, seems as daunting as taking off in the perfect storm.

+
+ + +

Take Flight

- 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.

- 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.

- 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. -

-
-
-
-

Further References

-
-

- D3 Resources
- D3 Data Driven Documents (Official Website)
- D3 on Github
- Mike Bostock's D3 Blocks
+ Explore how D3 visualizations can be implemented as Angular 2 components in TypeScript 2.

- Angular 2 Resources
- Angular 2 + See how a visualization component can change in response to input data changes.

- Source Code Resources for this App
- App Github Repo
- D3Service Github Repo + Find ways to unit test your D3 components with Karma/Jasmine and check out a worked example end-to-end test using Protractor.

+
@@ -75,14 +71,42 @@

Further References