D3.js examples in an Ionic app
Switch branches/tags
gh-pages greenkeeper/cordova-android-7.1.2 greenkeeper/cordova-android-7.1.3 greenkeeper/cordova-android-7.1.4 greenkeeper/cordova-android-pin-7.1.1 greenkeeper/cordova-plugin-ionic-webview-2.0.0 greenkeeper/cordova-plugin-ionic-webview-2.0.1 greenkeeper/cordova-plugin-ionic-webview-2.0.2 greenkeeper/cordova-plugin-ionic-webview-2.0.3 greenkeeper/cordova-plugin-ionic-webview-2.1.0 greenkeeper/cordova-plugin-ionic-webview-2.1.1 greenkeeper/cordova-plugin-ionic-webview-2.1.2 greenkeeper/cordova-plugin-ionic-webview-2.1.3 greenkeeper/cordova-plugin-ionic-webview-2.1.4 greenkeeper/cordova-plugin-ionic-webview-2.2.0 greenkeeper/cordova-plugin-ionic-webview-2.2.1 greenkeeper/cordova-plugin-ionic-webview-2.2.2 greenkeeper/cordova-plugin-ionic-webview-2.2.3 greenkeeper/cordova-plugin-ionic-webview-2.2.4 greenkeeper/cordova-plugin-ionic-webview-2.2.5 greenkeeper/cordova-plugin-ionic-webview-2.3.0 greenkeeper/cordova-plugin-ionic-webview-2.3.1 greenkeeper/d3-5.0.0 greenkeeper/d3-5.0.1 greenkeeper/d3-5.0.2 greenkeeper/d3-5.1.0 greenkeeper/d3-5.2.0 greenkeeper/d3-5.3.0 greenkeeper/d3-5.4.0 greenkeeper/d3-5.5.0 greenkeeper/d3-5.6.0 greenkeeper/d3-5.7.0 greenkeeper/d3-array-2.0.0 greenkeeper/d3-array-2.0.1 greenkeeper/d3-array-2.0.2 greenkeeper/tslint-ionic-rules-0.0.14 greenkeeper/tslint-ionic-rules-0.0.15 greenkeeper/tslint-ionic-rules-0.0.16 greenkeeper/tslint-ionic-rules-0.0.17 greenkeeper/tslint-ionic-rules-0.0.18 greenkeeper/tslint-ionic-rules-0.0.19 greenkeeper/tslint-ionic-rules-0.0.20 greenkeeper/tslint-ionic-rules-0.0.21 greenkeeper/typedoc-0.11.0 greenkeeper/typedoc-0.11.1 greenkeeper/typedoc-0.12.0 greenkeeper/typedoc-0.13.0 greenkeeper/@types/d3-5.0.0 greenkeeper/@types/d3-5.0.1 greenkeeper/update-to-node-10 master
Nothing to show
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
config feat(Prism directive): WIP Nov 15, 2017
resources feat(Resources): Generate icon and splash Jan 16, 2018
src fix(Tslint issues): from tslint.json, codeclimate, lint ionic script Jan 21, 2018
.codeclimate.yml ci(Codeclimate): config Jan 21, 2018
.editorconfig fix(basic-shapes basic-elements): Display circles svg even if user co… Jan 18, 2018
.gitignore docs(Typedoc): Replace Esdoc by Typedoc (better for Typescript) Jan 18, 2018
.travis.yml fix(Tslint issues): from tslint.json, codeclimate, lint ionic script Jan 21, 2018
CODE_OF_CONDUCT.md docs: Readme documentation, home page presentation, license, code of … Nov 15, 2017
ISSUE_TEMPLATE.md docs: Readme documentation, home page presentation, license, code of … Nov 15, 2017
LICENSE.md docs: Readme documentation, home page presentation, license, code of … Nov 15, 2017
README.md Update README.md Jan 21, 2018
_config.yml Set theme jekyll-theme-slate Dec 10, 2017
config.xml chore(UpdatePackages): Following Greenkeeper initial commit Jan 19, 2018
deploy.sh ci(Documentation Generation): Disable Jekyll to allow files that star… Jan 18, 2018
ionic.config.json refactor(Split): One page for one example Nov 14, 2017
package-lock.json fix(Tslint issues): from tslint.json, codeclimate, lint ionic script Jan 21, 2018
package.json fix(package): update d3-scale to version 2.0.0 (#5) Feb 4, 2018
sonar-project.properties ci(Sonarcloud): add config and addon to travis config Jan 18, 2018
sonar.sh ci(Sonarcloud): add config and addon to travis config Jan 18, 2018
tsconfig.json docs(typedoc): set 'minimal' theme Jan 19, 2018
tslint-codeclimate.json ci(Codeclimate): config Jan 21, 2018
tslint.json ci(CodeClimate): add config Jan 21, 2018


D3.js with Ionic GitHub license

A tutorial app built with Ionic Framework to learn D3.js with Typescript

Build Status
Sonar quality gate
Code Climate
GitHub last commit
Open issues
Greenkeeper badge
Dependencies Status
DevDependencies Status

screenshot-1 screenshot-2


Why this app?

I made this app while learning D3.js. But while I had in mind that my goal was to use it in an Ionic app, I realized there was some differences compared to a classical use. Mainly because of Typescript.

If you're in this case, you need to install TypeScript type definitions. So syntax may be different than a simple usage of D3.js.

Who is this for?

I propose to share my work to make you save time while learning.

I think these examples could also be appropriated if you already are in and advanced step of your learning but stuck on some points.

What can you find here?

Most of these examples are based on Dashing D3.js tutorials adapted in Typescript 2 for Ionic 3.

Working with this code


Of course you need node and npm.

Please also be sure you installed Ionic and Cordova:

npm install -g ionic cordova

To verify your system is ok run ionic info.


Install the app by running:

git clone git@github.com:proustibat/d3js-ionic.git
cd d3js-ionic
ionic cordova prepare

This should prompt you if you want to install npm packages, answer yes. If it's not the case, run npm install;

Run the app:

// in the browser with livereload
ionic serve -l
// or on a device
ionic cordova run android --device
ionic cordova run ios --device


Code documentation is available here

Feel free to improve the app

  • Please use commitizen if you wanna contribute to the project and create a pull request ( run git cz instead of git commit)
  • Quality code status is available on Sonarcloud
  • CI with Travis



If you are having issues, questions or any suggestions, please let me know: proustibat@gmail.com / twitter/@proustibat


The project is licensed under the GNU Affero General Public License v3.0 license

Dev stats


How simple or complicated the control flow of the application is.

Complexity Complexity per file Cognitive Complexity

Documentation & sizes

Lines Lines of code Comment lines Comments (%)

Directories Files Classes Functions


Duplicated blocks Duplicated lines


Open issues Confirmed issues Won't fix issues


Issues in this domain mark code that will be more difficult to update competently than it should

Code smells SQALE Rating

Technical debt

Effort to fix all maintainability issues. The measure is stored in minutes. An 8-hour day is assumed when values are shown in days. (The value of the cost to develop a line of code is 0.06 days)

Technical debt Technical debt ratio


Issues in this domain mark code where you will get behavior other than what was expected.

Bugs Reliability remediation effort Reliability Rating


Vulnerabilities Security remediation effort	Security Rating