area chart demo

[mrosenberg]

This would be a great help. I'm struggling with how to pass in context to be able to lookup the x,y scale functions to d3-shape.area

In my template I have my scales defined using ember-d3-helpers

{{#with (hash

    yScale=(linear-scale yDomain (append 0 height))

    xScale=(time-scale xDomain (append 0 width))

  ) as |scales|}}

  {{#if d3el}}

    {{silence (compute (d3-join 'g' data
      enter=(pipe
        (d3-append 'path')
        (d3-attr 'class' 'area')
        (d3-attr 'd' 0)
        (d3-style 'fill' 'steelblue')
        (d3-attr 'd' (pipe area))
      )
      update=(pipe
        (d3-style 'opacity' 1)
      )
      exit=(pipe
        (d3-style 'fill' 'purple')
        (d3-style 'opacity' 0)
        (d3-attr 'height' 0)
        (d3-attr 'y' height)
        (d3-remove)
      )
      )
d3el)
    }}

   {{/if}}

  {{/with}}

and I have the area function defined in the component

  area( d, i, n ) {

    return area()
      .x(  d => { return x( d.date );  } )
      .y1( d => { return y( d.value ); } )
      .y0( y( 0 ) );
  },

But of course x and y are undefined inside the area function.

[taras]

Hi @mrosenberg I was just looking at this today. I can take a crack at it tomorrow unless @zigahertz or @guozhaonan gets to it first.

[taras]

@mrosenberg can you give me a link to a D3 demo that you're referencing?

[mrosenberg]

@taras That would be appreciated by myself and I'm sure many others. I can't link to the app I'm working on but I may be able to post a pen later. Of course right after I wrote that post I thought of an idea that may work. I'm writing an area helper similar to the bar-height helper in the bar chart demo.

[taras]

@mrosenberg the area helper is what I was thinking is necessary.

[mrosenberg]

@taras As usual I think of something right after posting. If I get it working I'll write back here, maybe I can contribute it back to the demo.

[taras]

@mrosenberg sounds great and we could pull your helper into ember-d3-helpers if you get it working

[mrosenberg]

@taras Sounds like a plan.

[mrosenberg]

@taras I have a basic area chart up and running. I'm going to fork ember-d3-helpers and write up a demo there then publish a PR if that is OK with you.

[taras]

Sounds great to me

[taras]

@mrosenberg just FYI, we have a change coming to ember-d3-helpers that'll split d3-join into 3 operations. Just wanted to let you know https://github.com/LocusEnergy/ember-d3-helpers/pull/13 cause it might overlap closely with this work.

[mrosenberg]

@taras I read that yesterday. Any eta on the change? I'll merge from upstream after that lands and write the example then.

[taras]

The PR is in the ember-d3-helpers repo. Have a look(sorry, can't link, on phone) we should be merging it soon.

[ghost]

@mrosenberg just merged the PR that @taras is talking about, and published a new version of ember-d3-helpers, v0.5.5, check it out! looking forward to seeing your area helper demo!

[taras]

@mrosenberg I submitted a PR to your ember-d3-helpers PR. Would love to get this going.