Collection of composable D3 components built with ember-d3-helpers
Clone or download
chilicoder and Zachary Zibrat regenerated package-lock.json (#65)
* regenerated package-lock.json

* babel-plugin-transform-object-rest-spread moved to dependencies
Latest commit 16bd9ca Jan 10, 2018
Permalink
Failed to load latest commit information.
addon Update the library for ember 2.17 (#63) Dec 27, 2017
app upgrades ember to 2.10 (#58) Feb 22, 2017
assets Data join (#38) Sep 2, 2016
config Update the library for ember 2.17 (#63) Dec 27, 2017
tests Update the library for ember 2.17 (#63) Dec 27, 2017
typings/ember Unnest d3 graph (#43) Sep 17, 2016
vendor Update the library for ember 2.17 (#63) Dec 27, 2017
.bowerrc Initial Commit from Ember CLI v2.4.3 Apr 13, 2016
.editorconfig improves axis helper (#52) Nov 16, 2016
.ember-cli Initial Commit from Ember CLI v2.4.3 Apr 13, 2016
.eslintrc.js Update the library for ember 2.17 (#63) Dec 27, 2017
.gitignore Update the library for ember 2.17 (#63) Dec 27, 2017
.npmignore Initial Commit from Ember CLI v2.4.3 Apr 13, 2016
.travis.yml Update the library for ember 2.17 (#63) Dec 27, 2017
.watchmanconfig Initial Commit from Ember CLI v2.4.3 Apr 13, 2016
CHANGELOG.md sets up demo site (#17) Jul 6, 2016
LICENSE.md upgrades ember to 2.10 (#58) Feb 22, 2017
README.md upgrades to 2.11 (#59) Feb 22, 2017
crossdomain.xml many new things Jul 26, 2016
ember-cli-build.js Update the library for ember 2.17 (#63) Dec 27, 2017
index.html many new things Jul 26, 2016
index.js Update the library for ember 2.17 (#63) Dec 27, 2017
package-lock.json regenerated package-lock.json (#65) Jan 10, 2018
package.json regenerated package-lock.json (#65) Jan 10, 2018
robots.txt many new things Jul 26, 2016
testem.js Update the library for ember 2.17 (#63) Dec 27, 2017
yarn.lock Update the library for ember 2.17 (#63) Dec 27, 2017

README.md

ember-sparkles

Build Status npm version Dependency Status Ember Observer Score

William Shatner in Sparkles

ember-sparkles is a collection of composable D3 charts built with ember-d3-helpers library. It aims to provide reactive and highly performant D3-based data visualizations through simple template-bound configurations.

This library currently includes the following charts:

Note: This library is still in beta, please use carefully, and file issues as discovered. Pull requests for additional charts always welcome!

Install

First install ember-sparkles to your application:

ember install ember-sparkles

Then add default ember-resize configuration into config/environment.js file, these properties can be changed to suit your needs. For more information, please see the documentation for ember-resize:

    resizeServiceDefaults: {
      widthSensitive: true,
      heightSensitive: true,
      debounceTimeout: 200,
      injectionFactories: ['view', 'component']
    },

How to use

This addon includes an {{ember-sparkles}}, which renders a responsive SVG container element. D3-based graphs, axes, and legend components are contextually yielded from this component.

example

{{#ember-sparkles
  data=your-data

  input-key='ts'
  output-key='value'

  scale-type='band'
  y-scale-type='linear'
  x-domain=(map (r/get 'ts') data)
  y-domain=(append 0 outputMax)


  as |chart|
}}
  {{!render your charts here}}
{{/ember-sparkles}}

Properties (WIP)

  • data {Array} required

    Array containing data, structure depending on data visualization type.

  • input-key {String} required

    Key by which to obtain independent variable from array or object. Defaults to zeroth index of array.

  • output-key {String} required

    Key by which to obtain dependent variable from array or object. Defaults to first index of array.

  • x-scale-type {String} optional

    Type of D3 scale function to use for horizontal axis (linear, band, or time).

    default: linear

Axis

To render an axis, add {{chart.y-axis}} or {{chart.x-axis}} to the {{#ember-sparkles}} block.

{{#ember-sparkles as |chart|}}
  {{chart.x-axis
    tick-format=(d3-time-format '%Y-%m-%d')
    label='date'
    dy=100
    dx=-100
  }}

  {{chart.y-axis
    label='kWh'
    position='right'
    ticks=5
    tick-format=(d3-format '.2s')
    gridlines=true
    dx=100
    dy=-30
  }}
{{/ember-sparkles}}

Similar to the y-axis example, the x-axis contextual component can take a position property, set to top (by default these are set to left and bottom), respectively).

For more information on configuring tick formats using the d3-time-format and d3-format helpers, please see d3-format and d3-time-format, respectively.

Legend

To show a legend, add {{chart.legend}} to the {{#ember-sparkles}} block.

{{#ember-sparkles as |chart|}}
  {{chart.legend
    dx=50
  }}
{{/ember-sparkles}}

Installation

ember install ember-sparkles

Helpful Links

Looking for help?

If it is a bug please open an issue on GitHub.

Usage

Updating the Demo site

ember github-pages:commit --message <some commit message>
git push origin master