This library provides a collection of helpers for building D3 graphs via Ember.js templates. Component and helpers provided in this library are intended to be primitives that one could use to build a D3 graphs.

Support for more features is ongoing.

Currently, there are no configuration options for this addon in config/environment.js. At the moment, this addon will add all the required d3 dependencies.

You can view a demo of a few ways to use these helpers here. Checkout ember-sparkles to see example implementations using these primitives.

• d3-graph
• d3-element

• Selection Helpers
  • d3-select
  • d3-select-all
  • d3-join
  • d3-attr
  • d3-call
• Shape helpers
  • d3-arc
  • d3-area
  • d3-line
  • d3-pie
• Transition Helpers
  • d3-transition
  • d3-transition-delay
  • d3-attr-tween
• Linear Scales
  • linear-scale
  • time-scale
  • seq-color-scale
• Ordinal Scales
  • band-scale
  • point-scale
  • cat-color-scale
• Scale Derivatives
  • scale-tics
  • scale-value
• Misc Helpers
  • immut-array
  • time-interval

d3-graph is used to provide root level selection to render discrete D3 elements, such as SVG <svg> and groups <g>. You can change this with by specifying the component's tagName (ie {{d3-graph (pipe ...) tagName="svg"}}).

It can be used inline.

{{d3-graph (pipe
  (d3-attr "name" "fred")
)}}

It can be nested to allow multiple graph pipes to be rendered into the root component.

{{#d3-graph as |d3|}}
  {{d3.graph (pipe ...)}}
  {{d3.graph (pipe ...)}}
{{/d3-graph}}

You can pass a graph pipe into the parent component. The nested components will receive selection that's a result of the parent's graph pipe.

{{#d3-graph (pipe
    (d3-select-all "rect")
    (d3-data data)
  ) as |d3|}}
  {{! selection here will be result of pipe above }}
  {{d3.graph (pipe ...)}}
  {{d3.graph (pipe ...)}}
{{

d3-element is used to render simple SVG elements using d3's dynamic data join.

required

• element-name: a string specifying the type of SVG element to render (circle, rect, etc.)
• data: data to be bound to the component

optional

• selector: a unique selector string
• data-accessor: accessor function to pass to d3's data join method
• transition: a d3 transition object

required

• on-enter

optional

• enter-transition
• update-transition
• on-update: if not provided, the post-transition update step uses on-enter (mirrors typical D3 behavior)
• exit-transition
• on-exit

{{d3-element
  element-name='circle'
  selector='rotator'
  data=points
  on-enter=(pipe
    (d3-attr 'cx' (r/get 'cx'))
    (d3-attr 'cy' (r/get 'cy'))
    (d3-attr 'r' 3)
  )
  update-transition=(pipe
    (d3-attr 'r' 0)
  )
  on-exit=(pipe
    (d3-attr 'r' 200)
  )
}}

D3 Select

Select an element matching selector and return a selection object.

{{d3-graph (pipe
  (d3-select "#my-link")
  (d3-attr "name" "fred")
)}}

D3 Select All

Selects all elements that match the specified selector string.

{{d3-graph (pipe
  (d3-select-all "rect")
  (d3-data data)
  (d3-style "color" "red")
)}}

D3 Data

Joins the specified array of data with the selected elements, returning a new selection that it represents the update selection: the elements successfully bound to data.

{{d3-graph (pipe
  (d3-select-all "rect")
  (d3-data data key)
  (d3-join
    enter=(pipe
      (d3-append "rect")
      (d3-text (r/get "number"))
    )
  )
)}}

Helper for implementing D3's general update pattern. This helper doesn't have a corresponding function in the API because this helper represents a pattern rather than a specific function in the API. Use it when you need to specify selection.enter().update().exit().

Read more about D3's General Update Pattern.

{{d3-graph (pipe
  (d3-select "svg")
  (d3-select-all "rect")
  (d3-data data)
  (d3-join
    enter=(pipe
      (d3-append "rect")
      (d3-text (r/param))
    )
    update=(pipe
      (d3-text (r/param))
    )
    exit=(pipe
      (d3-remove)
    )
  )
)}}

D3 Attr

Set attribute with specified name to specified value. Value can be a string or a function.

{{d3-graph (pipe
  (d3-select ".myelement")
  (d3-attr "name" name)
)}}

D3 Call

Invokes the specified function exactly once, passing in this selection along with any optional arguments.

{{d3-graph (pipe
  (d3-select ".test-items")
  (d3-call (pipe
    (d3-select-all ".car")
    (d3-attr "color" "red")
  ))
  (d3-call (pipe
    (d3-select-all ".boat")
    (d3-attr "color" "blue")
  ))
  (d3-append 'i')
  (d3-attr "class" "truck")
)}}

D3 On

Adds or removes a listener to each selected element for the specified event typenames. The specified listener will be evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.

An optional capture flag may be specified which corresponds to the W3C useCapture flag.

{{d3-graph (pipe
  (d3-select ".test-items")
  (d3-call (pipe
    (d3-select-all ".car")
    (d3-on "click" listener)
  ))
)}}

D3 Arc

The arc generator produces a circular or annular sector, as in a pie or donut chart.

D3 Areas

The area generator produces an area, as in an area chart.

{{d3-graph
  (pipe
    (d3-select-all 'path')
    (d3-data data)
    (d3-join
      enter=(pipe
        (d3-append 'path')
        (d3-attr 'd'
          (d3-area
            xScale
            yScale
            xAccessor=(d3-get 'x')
            yAccessor=(d3-get 'y')
          )
        )
      )
    )
  )
}}

D3 Lines

The line generator produces a spline or polyline, as in a line chart.

D3 Transition

Apply transition to a selection. Transition can be a name for this transition or a parent transition.

{{d3-graph (pipe
  (d3-select-all "rect")
  (d3-data data)
  (d3-join
    enter=(pipe
      (d3-append "rect")
      (d3-attr height)
      (d3-transition)
      (d3-attr (r/get "y"))
  ))
)}}

D3 Transition Delay

Apply a delay to a transition. Must be chained behind a transition.

{{d3-graph (pipe
  (d3-join
    enter=(pipe
      (d3-append "rect")
      (d3-attr height)
      (d3-transition)
      (d3-delay 300)
      (d3-attr (r/get "y"))
  ))
)}}

D3 Attr Tween

For each selected element, creates a tween for the attribute with the specified name with the specified interpolator value.

Good description of transition.attrTween can be found in this example.

D3 Linear Scale

export default Ember.Component.extend({
  domain: [0, 10],
  range: [0, 100]
});

{{#with (linear-scale domain range nice=true) as |scale|}}
  <span>I am {{scale-value scale 5}} 50 years old.</span>
{{/with}}

D3 Time Scale

export default Ember.Component.extend({
  domain: [
    new Date(2016, 2, 1),
    new Date(2016, 2, 31)
  ]
});

{{#with (time-scale domain) as |scale|}}
  {{#each (scale-ticks scale (time-interval 'day')) as |date|}}
    <a>{{date}}</a>
  {{/each}}
{{/with}}

Sequential color scale description.

Band scale description

Point Scale description

Categorical color scale.

Scale ticks

Get the calculated value from a scale

Immutable array helper description

A time interval helper.

• git clone <repository-url> this repository
• cd ember-d3-helpers
• npm install
• bower install

• ember serve
• Visit your app at http://localhost:4200.

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.