Canvas Rendering Improvements, Custom Networks

Features

• You can pass custom d3-forceSimulation simulations to NetworkFrame, as a simulation parameter in the networkType. It's demonstrated here to create bubble charts and multi-foci charts.
• All frames have a baseMarkProps that can take an object with props to apply to all marks generated by the frame. This is primarily to leverage the new feature in semiotic-mark that lets you defined transitionDuration. For now it only takes an object, so you can across the board set transitions to be something other than the 1000ms default that Semiotic has been using up to this point. You can try it out in your frame by adding something like:

   baseMarkProps={{ transitionDuration: 2000 }}

To set all transitions to 2 seconds or something more nuanced like:

   baseMarkProps={{ transitionDuration: { default: 500, fill: 2500 }}}

To make fill transitions take 2.5 seconds and all other transitions take 0.5 seconds.

• canvasPieces & canvasConnectors are now honored in <ORFrame> and will render those elements to canvas. canvasSummaries is still not available.
• canvasPostProcess is available on all frames. It is fired after canvas rendering and is passed (canvas, context, size) so you can graphically modify your chart. For instance if you want it to have a glowy look like this:
  
  You can add the following code to the Frame:

   canvasPostProcess={(canvas, context, size) => {
  const dataURL = canvas.toDataURL("image/png")
  const baseImage = document.createElement("img")

  baseImage.src = dataURL
  baseImage.onload = () => {
    context.clearRect(0, 0, size[0] + 120, size[1] + 120)
    context.filter = "blur(10px)"
    context.drawImage(baseImage, 0, 0)
    context.filter = "blur(5px)"
    context.drawImage(baseImage, 0, 0)
    context.filter = "none"
    context.drawImage(baseImage, 0, 0)
  }}

It also will do a fun Chuck Close style pixelation if you pass canvasPostProcess={"chuckClose"}

Changes

• This uses [email protected] which no longer uses flubber. Instead, complex shapes that won't transition well don't use transitions. Flubber was too big and still caused distracting changes in shapes when doing the interpolation--it's great for abstract shapes but not so great for the lines and areas in a traditional chart.
• Default for <XYFrame>'s lineIDAccessor is now d => d.semioticLineID instead of d => d.id because the latter would conflict with the occasional dataset.