Feature Request: component to handle the rendering of arcs

[ralfbecher]

Hi all,

I'm looking for a component to handle the rendering of arcs like this:

https://bl.ocks.org/rpgove/53bb49d6ed762139f33bdaea1f3a9e1c

Maybe we can have paths like in SVG:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

[carlhannes]

I'm not quite sure what the best way to tacke this problem would be, but if you want to try on creating your own SVG paths, the renderer(s) can handle custom paths just like SVG d attribute.

To do this yourself you'll need to create your own custom component, there's a tutorial for the tooltip component here: https://beta.observablehq.com/@cbt1/picasso-js-creating-your-own-tooltip-component but you would like to return paths to the renderer instead.

If you check out how the line component in picasso.js is built https://github.com/qlik-oss/picasso.js/blob/master/packages/picasso.js/src/core/chart-components/line/line.js - you could create something similar with own custom paths.

The components render function returns an array of simple objects which then are rendered using canvas or svg, these objects are pretty straightforward, and taking the example from line.js, you would want to return something like this

  return {
    type: 'path',
    d: path,
    opacity: item.opacity,
    stroke: item.stroke,
    strokeWidth: item.strokeWidth,
    fill: fill || item.fill,
    data
  };

Sadly I don't have more time right now but I'll check out if I can create some example for you on observable in the coming week.

Good luck!

[ralfbecher]

Would be nice if we could add this into line.js but don't know how atm..