semiotic

A data visualization framework combining React & D3

OTHER License

Downloads
7K
Stars
2.4K
Committers
29

Bot releases are hidden (Show)

semiotic - Annotation & Brush Bug-Squashing Latest Release

Published by emeeks over 4 years ago

FIXES

  • Updating note props wouldn't cause the note to rerender (thanks @torioLuz!)
  • Brushing could return null extent, failing the destructuring default (in the docs even!)
semiotic - Smarter Tooltips, Clean Up Logging Issues

Published by emeeks almost 5 years ago

Minor release (the real work is going on in the semiotic-2 branch) that adds some functionality thanks to @torioLuz and otherwise just cleans up some minor logging bugs

FEATURES

  • Outbound tick lines option (@torioLuz could you make a PR to document this on semiotic-docs and/or a codepen or other to show how to use it?)
  • Add more tooltip attributes to improve tooltip behavior (@torioLuz could you make a PR to document this on semiotic-docs and/or a codepen or other to show how to use it?)

FIXES

  • Remove console log from OrdinalFrame
semiotic - React 16.8+ Compatibility

Published by emeeks about 5 years ago

Semiotic 2.0 deprecates a lot of old compatibility props, removes the download button and gets rid of deprecated lifecycle events. It should also (hopefully) take advantage of some of the newer React features. Please take a look and file any issues you discover.

  • DownloadButton is gone. It provided some convenience and much hassle and my philosophy on how to handle exporting data is that it should be a case-by-case feature handled outside of the dataviz framework.
  • Since everyone didn't always want to render with sketchy rendering it's optional now, so to enable sketchy rendering you will need to import Rough or a Rough-like library and pass it to your frame using the sketchyRenderingEngine prop. So something like:
import roughjs from "roughjs/dist/rough.es5.umd.js"
<XYFrame 
   sketchyRenderingEngine={roughjs}
/>
  • Old names for props (like areas in XYFrame which was replaced by summaries) are no longer honored.
  • react15Wrapper is removed from FacetController since React 15 is no longer supported
  • wordcloud has been removed from NetworkFrame it was never a very good word cloud

Other changes should be coming. If you have any suggestions just let me know. Bugfixes to 1.X will, of course, continue.

semiotic - Fix UMD, custom OrdinalFrame type

Published by emeeks about 5 years ago

FIXES

  • UMD build wasn't working with d3-require (thanks @mbostock)
  • Annotations wouldn't update if you change the label (thanks @mph006)
  • Custom type (where you send a function) wasn't working if you sent back an array of SVG elements
semiotic - Calculate Extent with Annotations Included

Published by emeeks about 5 years ago

FIXES

  • Annotations in FacetController might not have been displayed prior to an interaction (thanks @susielu!)
  • Invert extent wasn't being honored in FacetController (thanks @susielu!)
  • Area annotation wasn't properly offset in XYFrame

FEATURES

  • Honor optimizeCustomTooltipPosition in OrdinalFrame (thanks @torioLuz!) this allows you to change the tooltip position based on positive and negative data and whether it gets close to the edges.
  • Extent objects now honor a includeAnnotations option (which takes true or false) which if set to true calculates the extent of the frame based not only on the data but also on simple annotations (any annotation types that use the data attributes like xy, x, y, react-annotation, not bounds or coordinates or anything like that).
semiotic - Fix Download Button, Column Brushing, Add Orphan Points

Published by emeeks over 5 years ago

FEATURES

  • In NetworkFrame in motifs mode you can now set a padding prop for your networkSettings that determines the number of pixels between each group.
  • XYFrame now supports filterRenderedLines and filterRenderedSummaries which allows you to remove lines or summaries after they have been calculated so that the extent and other aspects of the chart are based on the complete dataset
  • showLinePoints now honors an "orphan" setting that will only show line points if a point has an undefined point immediately before and after that point. This means it will only have any kind of effect if you have defined set but when you do, it lets you show a floating point as a point so that it's not lost in the way a line renders.
    Screen Shot 2019-06-24 at 10 22 54 AM

FIXES

  • The download feature should be working again
  • Column brushes in vertical projection would hang if there were no zero values among your columns (so for instance in a parallel coordinates setting)
semiotic - Torn Baseline

Published by emeeks over 5 years ago

FIXES

  • As expected, the TypeScript migration introduces a few issues and these seem to all be ironed out now (hence the lack of release notes since 1.19.1 as things get ironed out.
  • FacetController had issues when one of the child frames had no data.

FEATURES

  • Full docs on how to better style your axes at https://semiotic.nteract.io/guides/axis
  • Axes can now display a jagged base tick for you to use in non-zero baseline situations (this was historically a best practice half a century ago and seems useful to bring back) You can accomplish this by setting an axis prop: jaggedBase: true

OTHER

  • More tests! Please feel free to submit PRs for tests there are so many open issues related to this and I'm trying to handle them as they come up but if someone wants to start building a more robust set of tests then please let me know. We also need to expose the types in a sensible way and always need more docs.
semiotic - TypeScript, Marginal Graphics, Trend Lines

Published by emeeks over 5 years ago

UPDATES

  • Semiotic is now in typescript, though there's a lot to be done to clean it up and remove the various any or as unknown as somethingElse going on in there. PRs welcome! Thanks to @captainsafia for her help with this.

FEATURES

  • XYFrame has a new summaryType: "trendline" that will show trendlines using regression.js. You can see the documentation on how to use it at the bottom of the XY Plot Guide.
semiotic - Moving to nteract!

Published by emeeks over 5 years ago

As some of you know already, Semiotic is now moving into the nteract project (https://github.com/nteract). So this release is just about updating the docs and pointing you to the new amazing docs written by @susielu! Please reach out if you see any issues.

semiotic - areaType->summaryType

Published by emeeks over 5 years ago

I was expecting to do the next minor version bump when the docs release and Semiotic gets moved into the nteract org (which should happen next week) but this last batch of changes was just too much, and I don't want to gatekeep it, so 1.18.0 will have to be the nteract release. This one has quite a few things:

#CHANGES

  • A few versions back, areas in XYFrame was renamed summaries (though it's all backward compatible under the hood) but there were still computed class names and other bits that still said area that now say summary
  • oSort replaces sortO in OrdinalFrame

FEATURES

  • custom hover behavior in ordinal frame passes summary props, like boxplot points (thanks @torioLuz!)
  • FacetController now supports arrays of hoverAnnotation or pieceHoverAnnotation just like the regular frames
  • minimap in MinimapXYFrame now inherits style, class and render props from the parent frame
  • area nodes (like sankey and dagre nodes) in NetworkFrame now have a zoomedWidth and zoomedHeight to reflect their zoomed size
  • OrdinalFrame accepts an axes prop like XYFrame
  • brush extent is always returned sorted so that the y values are [min, max].

FIXES

  • column-hover in OrdinalFrame now passes proper screenCoordinates if you want your own html annotation based on that
  • FacetController wasn't always updating the extents properly if you deleted a frame or only changed data in one of your frames or swapped out all your frames for new ones
  • FacetController was duplicating annotations on the hovered frame
  • NetworkFrame was duping nodes that were sent in as object references of edge source-target keys
  • Network data sometimes was being mutated so you would see weird effects on your frames if you used the same data in multiple frames
  • All the custom generators (customPointMark, customNodeIcon, customMark, etc) should be sent the same kind of data in the same pattern (obviously with scales and frame-specific stuff being different in different frames)
  • display names for spark frames match up with the component names
semiotic - More Little Fixes and Features

Published by emeeks over 5 years ago

There have been a lot of patch releases lately. That's because the docs are getting rewritten and it's been a great process for showing areas that were buggy or didn't make sense. This should be the last one. There will be a minor version bump when the new docs drop. Thanks to @susielu for finding so many of the issues that were resolved in this last series of patch releases.

FEATURES

  • Axes can now take an axisMarginOverride object that allows you to set the margins of your annotations when using marginalia. Thanks @torioLuz!
  • nodesEdgesFromHierarchy used to require a d3-hierarchy decorated hierarchy js object but now you can send it just the object and it will assume it is default formatted (such as with children) and do the hierarchy bit for you.

FIXES

  • Chord diagrams weren't honoring margin properly
  • Titles were causing re-renders in XYFrame
  • Annotations were suppressed when they returned a projected coordinate of NaN, null or undefined, they are now positioned at 0 so you can see them and debug better
semiotic - Clean Up Custom Network Layouts

Published by emeeks over 5 years ago

FEATURES

  • You can pass a function to your networkType's zoom property that will be passed (nodes, size) where you can change the xy props of the nodes to zoom them the way you want. This is because some layouts don't come back within the bounds of the size you pass (I'm looking at you d3-flextree) and there's no way for Semiotic to guess, so you'll have to handle it.
  • showLinePoints used to only take true/false but now honors also "top" and "bottom" which will change the points that appear in an area chart (like stackedarea or bumparea). In the past these used to only show the middle point of the area, but now you can change it to show the top or bottom.
semiotic - Improve NetworkFrame Zoom

Published by emeeks over 5 years ago

FEATURES

  • NetworkFrame will do a better job of zooming your network. It used to distort it by stretching it to the size of the frame, now it maintains the aspect ratio

FIXES

  • The various frames custom SVG and HTML annotation functions weren't all being sent the same properties. They are now.
semiotic -

Published by emeeks over 5 years ago

FIXES

  • Some horizontal XY data wasn't being sent properly in the custom marks for OrdinalFrame
  • Sankey diagrams should never have been honoring direction that's meant for hierarchical charts (if you want to change the direction of your sankeys, change the direction of the edges) instead they now honor vertical or horizontal settings in the networkType's projection property.
  • highlight annotationType wasn't getting parentLine information to the points and also wasn't letting you select a line just by using ID

FEATURES

  • nodesEdgesFromHierarchy is exported by Semiotic, it takes a hierarchical JS object and returns an object with nodes and edges that you can use for non-hierarchical viz types.
  • If you use point type in OrdinalFrame and radial projection with connectorType defined, it will draw filled areas so you can properly create Radar Plots
semiotic - Edge Hierarchies

Published by emeeks over 5 years ago

Features

  • NetworkFrame now allows you to try hierarchical network types even if you're sending an array of edges. It will attempt to make a hierarchy out of them and if it follows a strict single-parent rule (all edges have only one parent) it will make a hierarchy out of the data. This will include a step to create (and then filter out using a default setting change to filterRenderedNodes a node with root-generated as its ID) so it will by default create one or more "trees" visible. Closes #367
  • histogram and heatmap summary types now obey a padding and elementStyleFn prop to allow you to create padding between individual bars (minimum 1px width) and to style the bars. elementStyleFn is passed the (totalBinValue, percentOfMax, arrayOfPiecesInThisBin) closes #370

Fixes

  • HTMLAnnotationRules in OrdinalFrame was not being sent screenCoordinates and its rScale wasn't always right. Fixes #375 & #372
semiotic - Editable Annotations

Published by emeeks almost 6 years ago

CHANGES

  • A number of changes in what data is sent and how the drag functions from react-annotation are wrapped to enable adjusting annotations easily. Added a second example to https://emeeks.github.io/semiotic/#/semiotic/annotations which shows how to update annotations and store the update in state to persist the change.
    annotations
  • Updates enclose, enclose-hull and enclose-rect to all accept padding as the amount in pixels to buffer the shape. Before this, there was (and is still honored) padding, radiusPadding and buffer, which makes for ugly code for people wanting to work with these annotations.

FIXES

  • InteractionLayer was not turning off interactivity when you turned off hoverAnnotation
semiotic - Bar/Line

Published by emeeks almost 6 years ago

FEATURES

  • OrdinalFrame has a multiAxis prop that causes the frame to evaluate separately the data derived from an array of rAccessors to create multi-axis charts. The axes sent to the axis prop (which despite its name can accept an array of axis objects) will be decorated in the same order as the rAccessor props to produce the correct axes elements. You can see an example here: https://emeeks.github.io/semiotic/#/semiotic/barline
    barline
  • enclose-hull now identifies the closest point in the hull to draw the annotation connector, making it a better visual experience.
    screen shot 2018-12-17 at 9 37 32 am
  • desaturation-layer is a new annotation type honored by all three frames that just renders a semi-transparent white rect that you can use to desaturate the viz layer. You can pass a style object with the annotation if you want to style the rect yourself.
  • contour summaryTypes now have a percent property that gives you the percent-of-maximum-density so that you can style them the same way you would heatmaps and hexbins
  • An axis object will now honor a center prop that will render the axis in the centerline of the viz (for making quadrant-style vizzes). The label still appears outside the viz
    screen shot 2018-12-17 at 12 09 33 pm

FIXES

  • motifs in NetworkFrame works again
  • DAGRE networks don't rerender weirdly
  • When a point was at the very top-edge of the frame it rendered the tooltip above the frame
  • Add a bunch of props to the list of complain-if-they're-assigned-because-the-frame-doesn't-honor-them props.
  • Add unique keys for DAGRE parallel edges

CHANGES

  • showSummaryPoints is a new prop in XYFrame to expose points for summaries (previously showLinePoints exposed points for lines and summaries but that was a very hacky approach
  • hexbin now renders empty hexes in areas where there were no points, so as to match up with heatmap
semiotic - Annotation Interactivity

Published by emeeks almost 6 years ago

Big Changes

  • areas in XYFrame is a problematic term, since it conflates with stacked areas and other things that are handled by lines. As of 1.16 they've been renamed to summary so all the existing areaClass, areaStyle, areas and so on will be summaryClass, summaryStyle, summaries and so on. This is not a breaking change (only a minor version bump) because the area terminology is still honored for backward compatibility.

Features

  • A summaryType with type set to ridgeline will now accept string curve props along with d3-shape curves, matching functionality in XYFrame
  • Bumpline starts counting at 1 instead of 0 so you get a more semantically meaningful rank description. It also flips the extent by default, so Rank 1 is on top.
  • ridgeline summary types in OrdinalFrame will now honor an axis prop in the summaryType and display an axis for each summary, like histogram
  • Pass voronoiHover to annotation rules, this allows you to fire off tooltips using Semiotic's built-in system (though you still need to enable pointer-events on any items you want to fire events from)
  • OrdinalFrame honors an ordinal-line annotation type to allow people to compose bar+line charts with interactivity on the line portion
    bar-line-chart-semiotic

See the example at the bottom of the Creating Bar Chart page for how to use ordinal-line. More interactive annotation types should be coming and you can experiment with using voronoiHover on your custom annotations.

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

semiotic - Square Root Bar Charts?

Published by emeeks almost 6 years ago

CLEANUP

  • d3-shape bump version to ^1.2.0

FIXES

  • Passing updated point data wouldn't always trigger an XYFrame update

FEATURES

  • Axis now has a dynamicLabelPosition prop that needs to be set to true to enable the bounding-box based collision detection to adjust labels (introduced in an earlier version) because of performance issues with automatically running this for every Axis.
  • OrdinalFrame's rScaleType will now take an instantiated scale (matching XYFrame) so you can make scales with settings (like scaleExp) like you can with XYFrame.
  • XYFrame supports an area lineType that sets the y1 accessor to () => 0 for easy line area charts.
  • Styling of OrdinalFrame pieces now passes the calculated props of the piece so you can use oIndex and rIndex to style pieces made by multiple accessors
  • Bar pieces now have a minimum size of 0 px instead of 1px, which caused weird issues with rendering offset
semiotic - Arcs, Matrices & accessor index

Published by emeeks almost 6 years ago

Features

  • In XYFrame, points and lines are decorated with xIndex, yIndex, lineIndex corresponding to the array position of xAccessors, yAccessors and lineAccessors. Likewise, OrdinalFrame decorates pieces with rIndex and oIndex which correspond to which of the accessors generated them.

  • NetworkFrame has a new matrix type that creates an adjacency matrix.
    screen shot 2018-11-05 at 2 44 13 pm

  • NetworkFrame has a new arc type that creates an arc diagram.
    screen shot 2018-11-05 at 2 40 34 pm