finnfiddle / potion

React components for declaratively composing animated, interactive visualizations.
https://potion.js.org/
MIT License
184 stars 5 forks source link

Accept function in collection data #1

Closed wilkerlucio closed 7 years ago

wilkerlucio commented 7 years ago

Hello, I'm trying to port a code from pure d3 to Number Picture, it's all going great! But I did hit one wall, and that's about dynamic data for the Collection type, in my original d3 source I have this snippet:

p.enter()
  .append("g")
  .attr("transform", (_, i) => "translate(0, " + yScale(i - 1) + ")")
  .selectAll("rect")
  .data(d => d3.range(Math.min(d.size, 120)).map(_ => d))
  // ^^^ Dynamic data generation based on datum `size`, a pictogram
  .enter()
  .append("rect")

This what I'm trying to do with Number Picture:

    <Collection data={queues}>
      <Group y={props => yScale(props.index)}>
        <Collection data={props => d3.range(Math.min(props.datum.size, 120)).map(_ => d)}>
          <Rect x={props => xScale(props.index)} y={0} width={10} height={10} />
        </Collection>
      </Group>
    </Collection>

Since d3 accepts functions on data I think it's a good idea to support here too. Or there is another way to accomplish this that I'm missing?

Thanks.

finnfiddle commented 7 years ago

@wilkerlucio would it be possible to create an example fiddle with some example data so I can have a look at it: https://fiddle.jshell.net/finnworks/fbjs3jkt/

wilkerlucio commented 7 years ago

Sure, well, I don't know how to create using Number Picture at this time, this is the farthest I could get: https://fiddle.jshell.net/5mLorn7y/ (trying to use the data as a function, so this example doesn't work but might be a start point if you wanna dive in).

Here is a working example of the same demo, using raw d3: https://codepen.io/wilkerlucio/pen/mMZWyN

finnfiddle commented 7 years ago

You're right I agree thats an important feature. I'll work on having it in the next release

finnfiddle commented 7 years ago

Ok its fixed in v0.4.2 and on npm https://fiddle.jshell.net/5mLorn7y/3/