semiotic

A data visualization framework combining React & D3

OTHER License

Downloads
7K
Stars
2.4K
Committers
29

Bot releases are visible (Hide)

semiotic - Little Fixes

Published by emeeks almost 6 years ago

FIXES

  • Connector styling in OrdinalFrame sends data and drawing element
  • NetworkFrame sends decorated data object to HTML annotation function
  • customPointMark in XYFrame had issues with being sent elements rather than functions returning elements
  • NetworkFrame sends decorated data object to the separation nodeSizeAccessor for tree diagrams
semiotic - ForegroundGraphics fix in OrdinalFrame

Published by emeeks almost 6 years ago

Fixes

  • OrdinalFrame generates its foregroundGraphics slightly differently than the other two frames, so it wasn't honoring the new foregroundGraphics as a function thing
semiotic - Precalc Bins, Node Size in Trees

Published by emeeks almost 6 years ago

Features

  • NetworkFrame in tree or cluster will take nodeSizeAccessor into account when calculating the separation value for nodes. Note that this can have strange effects if your total node size for a row/column is larger than the size of the viz.
  • heatmapping and hexbinning are exposed as functions so you can precalc your bins to find max values and optimize performance

screen shot 2018-10-23 at 10 17 11 am

semiotic - foregroundGraphics/backgroundGraphics accept functions

Published by emeeks about 6 years ago

Features

  • foregroundGraphics and backgroundGraphics will now take a function of type ({ size, margin }) => <JSX-SVG /> so you can properly size your foreground and background graphics with responsive frames.

Fixes

  • Default tooltip content for edges was showing "source id to source id" instead of "source id to target id".
semiotic - Edge Highlighting

Published by emeeks about 6 years ago

Features

  • NetworkFrame highlight annotation works for edges. The edge annotation needs to have edge: true and source and target objects that have IDs that correspond to your nodeIDAccessor
semiotic - Fix 0 value point tooltips

Published by emeeks about 6 years ago

FIXES

  • Points with a value of 0 were incorrectly showing the position of the tooltip

FEATURES

  • heatmap and hexbin area types honor a binMax property that takes a callback and returns the maximum binned value (for use with legends, for instance)
semiotic - multi-x

Published by emeeks about 6 years ago

Features

  • In XYFrame you can pass an xAccessor that returns an array of values for things like horizontal candlestick charts. This would probably cause extreme weirdness if used for lines or areas but if you have an idea of how or why that would work, feel free to file an issue.

Fixes

  • OrdinalFrame and NetworkFrame have canvas interaction disabled to allow for SVG-based interactivity when rendering with canvas. Canvas interaction (like the kind found in XYFrame) will come in a future release for these frames.
semiotic - Canvas Interaction

Published by emeeks about 6 years ago

Features

itt_muse_3

Fixes

  • Axis elements weren't calculating bounding boxes if they were using custom tickFormat that returned JSX
semiotic - Cumulative, Multi-Point Marks

Published by emeeks about 6 years ago

Features

  • XYFrame now honors cumulative and cumulative-reverse which calculate cumulative data based on the passed data. For showing the calculated data (like in a tooltip) look at the yMiddle property and that will reflect the cumulative data value.
  • XYFrame points can now have yAccessors that return arrays of data. Extent is calculated based on the min-max and a circle will be rendered for each point (the style, class, render and renderKey functions will all receive an optional 3rd parameter reflecting the array position within the array of y coordinates if you want to style them accordingly) this makes multi-element point charts (like Candlestick charts) easier to generate
  • When customClickBehavior and customDoubleClickBehavior are active in a frame, the interaction overlays will have cursor: pointer
  • pieceHoverAnnotation interaction regions are now based on the custom mark for any custom mark-based viz in OrdinalFrame
semiotic - Axis Label Adjust, Perf, Matte

Published by emeeks about 6 years ago

FEATURES

  • Performance improvements for area drawing in XYFrame (thanks @jasonk000!)
  • XYFrame heatmap areaType honors a useAreasAsInteractionLayer={true} setting that creates a faster interaction grid instead of a voronoi based on centroids (thanks @jasonk000!)
  • baseMarkProps are passed to axis elements (thanks @jasonk000!)
  • Performance improvements with area rendering and XYFrame rendering more generally (thanks @jasonk000!)
  • matte now accepts (along with the original true) a JSX SVG element or a function like ({ size, margin }) => <JSX SVG />
  • If you don't send a position for an axis label, the position of the label will be based on a bounding box of the axis tick labels, ensuring no overlap (though it does not dynamically adjust the margin but it does ensure no overdraw).
semiotic - DAGRE graph support

Published by emeeks about 6 years ago

FEATURES

  • NetworkFrame now has a dagre option. If you set your networkType to dagre you can pass a dagre graph to the graph property of NetworkFrame and Semiotic will use some nice custom line and node rendering. dagre is not included in Semiotic (because of size) but you can import it into your project and get access to amazing DAG rendering like this:

https://emeeks.github.io/semiotic/#/semiotic/customnode

  • NetworkFrame edgeType honors a curve type to draw those s-curves that D3 likes for dendrograms.

DOCS

  • Added docs for dagre, ordinal snap brushing, some marginalia line labeling

FIXES

  • Column names in OrdinalFrame were sometimes numbers and sometimes strings and it was causing issues that got fixed (thanks @agirton)
  • OrdinalFrame tooltips no longer have the tooltip class because of collisions with other libraries that have CSS rules for that incredibly common class
semiotic - Render Order

Published by emeeks about 6 years ago

Features

  • Add renderOrder prop to all frames that is an array of strings that indicates the order of rendering individual dataviz types (so like "lines", "areas", "points" in XYFrame or "summaries", "pieces", "connectors" in OrdinalFrame or "edges", "nodes" in NetworkFrame).
  • Aria labels use tick formatting from axes when available

Fixes

  • Handle update when extent changes better
semiotic - FacetController Tidying

Published by emeeks about 6 years ago

Fixes

  • A bunch of little issues introduced with FacetController-related changes to annotations and drawing were cleaned up.
semiotic - React 15 Compatibility with FacetController

Published by emeeks about 6 years ago

Fixes

  • Added react15Wrapper to FacetController so that React 15 (which doesn't support fragments) can use FacetController by passing a wrapper element (like a div).
  • Fix key complaint with node labels
semiotic - barpercent

Published by emeeks about 6 years ago

Features

  • Added barpercent to OrdinalFrame which does the same convenience data formatting as linepercent and stackedpercent but for bar charts

Fixes

  • FacetController wasn't handling responsive frames
semiotic - FacetController Invert

Published by emeeks about 6 years ago

Fixes

  • FacetController wasn't correctly honoring some invert and extent settings
  • Custom interpolator behavior was having issues with CurveLinear
semiotic - Sunburst Labeling

Published by emeeks about 6 years ago

Features

  • Sunburst labels are now rotated like stem labels in pie charts

Fixes

  • Enclose rules in NetworkFrame weren't always generated correctly
semiotic - Arc Tweening

Published by emeeks about 6 years ago

Features

  • Sunburst and pie arcs will now do an angle tween instead of a shape morph
semiotic - Ordinal Brushing

Published by emeeks about 6 years ago

Features

  • OrdinalFrame when sent an interaction prop that doesn't specify columnsBrush will now enable snapped brushing of the entire frame. So send something like this:
<OrdinalFrame
{...otherProps}
   interaction={{
      extent: ["Jason", "Betty"],
      end: e => {
      console.info("e", e)
   },
   during: e => {
      console.info("during e", e)
   }
   }}

Will get you something like this:
itt_muse_3

Fixes

  • heatmap areaType would sometimes create an extra row or column on the bottom and/or right. This should be fixed now
semiotic - Faceting

Published by emeeks about 6 years ago

Features

  • FacetController allows you to (via composition) tie a bunch of frames together. This means you can share tooltips easily, share extents easily, and share props easily. The next step (not implemented) is to create FacetXYFrame, FacetOrdinalFrame and FacetNetworkFrame that automatically create the frames inside FacetController but you can already do a pretty decent amount with it now. See example in docs at: https://emeeks.github.io/semiotic/#/semiotic/facet (thanks to @agirton for making the code a bit less obtuse)
    itt_muse_2
  • Annotations are a bit more robust at handling annotations sent to the annotations prop that used to only use built-in functionality. For instance you can now send frame-hover and column-hover annotations and they'll render tooltips correctly.

Fixes

  • Chord diagram was generating path elements that had undefined pathstrings which was causing issues in rendering. These are now not rendered.
  • NetworkFrame would allow edge strings that were so high they were crashing D3's forceSimulation. It's capped now.

Chores

  • Added a few more dataviz examples and functionality bits to the galleria bot