v1.11.2

1.11.2

Area Nodes and More cleanup

CHOREs

• Cleaned up the docs a bit. Will get them in better shape coming up
• Cleaned up transparency handling in canvas rendering
• Parallel Coordinates example uses canvas to show improved canvas performance (but the actual code doesn't reflect the change because it's manual instead of automatic, which I will fix)

FEATURES

• NetworkFrame now renders hover areas for area type nodes (circle pack, treemap and partition) and it's available in other modes if you send hoverAnnotation="area" in contrast to earlier when these network types used voronoi based on centroids. So the hover behavior should make a lot more sense. Are hover on edges is not currently supported.

FIXES

• More frame props properly listed
• OrdinalFrame connector styling sends the right data for canvas styling

Fancy pies

FIXES

• Responsive props aren't sent to frames so no more errors about how that's happening
• ordinalAlign="center" wasn't honored for dynamic width radial bar charts
• marginalia wasn't handling multi-subject annotations well
• Update semiotic-mark version so it doesn't complain about tx,ty

FEATURES

• angleRange is a property of an OrdinalFrame type honored when in radial projection for bar, clusterbar and timeline and allowing you to define an angle range to draw the chart in. The range is an array so if you want to draw a pie chart from 30° to 330° you would set:

type={{ type: "bar", angleRange: [ 30,330 ] }}

If you want to loop around, you can pass values greater than 360°. The second value of angleRange always needs to be higher than the first, so if you wanted to flip the prior example you would use:

type={{ type: "bar", angleRange: [ 210,510 ] }}

• offsetAngle is a property of an OrdinalFrame type honored when in radial projection for bar, clusterbar and timeline and allowing you to define where to start drawing the pie chart (by default it's drawn from 0°). Expected value is an integer in degrees of offset.

Clean up props

Fixes

• Tooltips generated by keyboard navigation for accessibility will disappear when you change focus away from a frame
• Update typos in docs (mainly customDoubleClickBehavior)
• Document so many missing prop types (thanks @micahstubbs!)
• beforeElements and afterElements work properly across all frames now

Cleanup

• Moved prop-types into their own file so that they could share prop types and just generally clean them up

Features

• Frames will now warn you if you pass a prop that the frame doesn't take and will also tell you if you pass the prop from a different frame

Optimizations, Custom Hexbins, Fixes, Dots

Features

• NetworkFrame can take a graph prop that is an object with edges and nodes or a hierarchical data structure (like you use with d3-hierarchy)
• Less data processing when you only pass changes to non-data properties (only in XYFrame for now) so if you change style or axis properties it doesn't recalculate the data space. This will improve and be rolled out to other frames once I figure out the best approach.
• frame-hover now accepts a color prop that you can use to set the color of the hover circle. By default you send an undecorated frame-hover when hoverAnnotation={true} but you can use the built in custom hover behavior to pass a specific color or a dynamic color like so:

hoverAnnotation={[ { type: "frame-hover", color: "orange" } ]}
hoverAnnotation={[ d => ({ type: "frame-hover", color: d.parentLine && d.parentLine.color || "none" }) ]}

• The hexbin and grid area types now accept a customMark function that is sent the parameters of the hex or cell and can be used to draw custom shapes. Examples added at the end of the XY Plots Tutorial.

Fixes

• Fix git repo addresses in the dependencies so they work with yarn thanks to @cvkline
• semiotic-mark update to fix wonky animations and git repo addresses that work with yarn thanks to @cvkline

Chores

• Thanks @micahstubbs for cleaning up a whole bunch of the build bits and just making everything better as far as linting and dependencies goes.
• Direct import of react-annotation dependencies for better bundle size thanks to @susielu

"flipped" dendrograms, log grids

Features

• Grid will handle a custom scale (like scaleLog or scalePow)
• NetworkFrame will take a flipped direction in networkType for making bottom-up trees

Fixes

• Somehow a console log sneaked into the last release

Heatmaps, Hexbins, Custom Mouse Events

Features

• heatmap and hexbin are now available options for areaType in XYFrame. A full explanation on their use as well as scatterplots and contour plots are available in new docs: https://emeeks.github.io/semiotic/#/semiotic/creatingxyplots

* Spark frames originally only supported SVG annotations and hover, but have been updated to support HTML and standard tooltips. Because spark frames are in `span` elements you need to ensure any `tooltipContent` rules take this into account and make `span`s (otherwise if you try to put a `div` in a `p` or otherwise break semantic DOM rules you might run into trouble).

FIXES

• Marginalia annotations should properly redraw on responsive resizing
• custom click, hover and doubleclick events should be working across all frames

Unfix dependencies, parentLine for linepoints

FIXES

• Points were not being decorated with their parentLine for pointStyle in XYFrame.
• package.json no longer points to exact versions in order to hopefully resolve the oddness around brush that happened when different versions of D3 libs were floating around.

Repair unpkg dist

FIXES

• 1.9.4 did not have the correct rollup settings and it broke all the codepens pointing at semiotic.min.js

Rough.js, dynamic line interpolators

Features

• Under the hood, roughjs is now used to render sketchy elements. To support this, any renderMode props will also take an object (or function returning an object) that can have the structure of {renderMode: "sketchy", roughness: 1.5, ...otherRoughJSOptions } to allow you to key different sketchy rendering settings based on data properties.
• Because of roughjs support for canvas, all elements that could be rendered in canvas (everything but summary elements in OrdinalFrame) will also be rendered sketchy in canvas now.

• lineType in XYFrame now lets you pass an object to interpolator that can have a property dynamicInterpolator that can take a function and will be passed each line data so you can interpolate lines with different interpolators in the same frame:

           lineType={{
              type: "line",
              interpolator: {
                dynamicInterpolator: (d, i) =>
                  i === 0 ? curveStep : curveBasis
              }
            }}

FIXES

• Bars in OrdinalFrame now have a minimum width of 1px even when padding or dynamicColumnWidth would push them into the negative.