Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/datencia/d3js-angular-examples

This project shows how to integrate D3.js with Angular 2.
https://github.com/datencia/d3js-angular-examples

Last synced: 12 days ago
JSON representation

This project shows how to integrate D3.js with Angular 2.

Awesome Lists containing this project

README

        

# D3.js with Angular Examples

This project shows how to integrate D3.js with Angular.

> It was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.

We'll implement a few D3.js examples described in [bl.ocks.org](http://bl.ocks.org/)
in Angular.

![Examples](./resources/screenshot.png "Examples")

## Examples Summary

- [Line Chart 4.0](http://bl.ocks.org/mbostock/02d893e3486c70c4475f)
- [Multi-Series Line Chart](http://bl.ocks.org/mbostock/3884955)
- [Bar Chart](http://bl.ocks.org/mbostock/3885304)
- [Stacked Bar Chart](https://bl.ocks.org/mbostock/3886208)
- [Brush & Zoom](https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172)
- [Pie Chart](http://bl.ocks.org/mbostock/3887235)
- [Donut Chart](https://bl.ocks.org/mbostock/3887193)

## Prerequisites

To follow these examples you need to install [Node.js and npm](https://nodejs.org/en/) if they are not already installed on your computer.

> Verify that you are running at least node v6.x.x and npm 3.x.x by running node -v and npm -v in a terminal / console window. Older versions may produce errors.

## Steps

- Clone this repo into a new project folder.

```bash
$ git clone https://github.com/datencia/d3js-angular-examples.git
$ cd d3js-angular-examples
```

- Install the npm packages described in the `package.json`:

```bash
$ npm install
```

- Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`.