A data visualization framework combining React & D3
OTHER License
Bot releases are hidden (Show)
FIXES
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
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.sketchyRenderingEngine
prop. So something like:import roughjs from "roughjs/dist/rough.es5.umd.js"
<XYFrame
sketchyRenderingEngine={roughjs}
/>
areas
in XYFrame which was replaced by summaries
) are no longer honored.react15Wrapper
is removed from FacetController since React 15 is no longer supportedwordcloud
has been removed from NetworkFrame
it was never a very good word cloudOther changes should be coming. If you have any suggestions just let me know. Bugfixes to 1.X will, of course, continue.
Published by emeeks about 5 years ago
d3-require
(thanks @mbostock)type
(where you send a function) wasn't working if you sent back an array of SVG elementsPublished by emeeks about 5 years ago
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.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).Published by emeeks over 5 years ago
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 datasetshowLinePoints
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.vertical
projection would hang if there were no zero values among your columns (so for instance in a parallel coordinates setting)Published by emeeks over 5 years ago
1.19.1
as things get ironed out.FacetController
had issues when one of the child frames had no data.jaggedBase: true
Published by emeeks over 5 years ago
any
or as unknown as somethingElse
going on in there. PRs welcome! Thanks to @captainsafia for her help with this.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.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.
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
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
FacetController
now supports arrays of hoverAnnotation
or pieceHoverAnnotation
just like the regular framesMinimapXYFrame
now inherits style, class and render props from the parent frameNetworkFrame
now have a zoomedWidth
and zoomedHeight
to reflect their zoomed sizeOrdinalFrame
accepts an axes
prop like XYFrame[min, max]
.column-hover
in OrdinalFrame
now passes proper screenCoordinates
if you want your own html annotation based on thatFacetController
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 onesFacetController
was duplicating annotations on the hovered frameNetworkFrame
was duping nodes that were sent in as object references of edge source-target keyscustomPointMark
, 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)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.
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.Published by emeeks over 5 years ago
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.Published by emeeks over 5 years ago
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 IDnodesEdgesFromHierarchy
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.point
type in OrdinalFrame and radial
projection with connectorType
defined, it will draw filled areas so you can properly create Radar PlotsPublished by emeeks over 5 years ago
filterRenderedNodes
a node with root-generated
as its ID) so it will by default create one or more "trees" visible. Closes #367padding
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 #370screenCoordinates
and its rScale
wasn't always right. Fixes #375 & #372Published by emeeks almost 6 years ago
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.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.hoverAnnotation
Published by emeeks almost 6 years ago
OrdinalFrame
has a multiAxis
prop that causes the frame to evaluate separately the data derived from an array of rAccessor
s 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/barlineenclose-hull
now identifies the closest point in the hull to draw the annotation connector, making it a better visual experience.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 hexbinscenter
prop that will render the axis in the centerline of the viz (for making quadrant-style vizzes). The label still appears outside the vizmotifs
in NetworkFrame
works againshowSummaryPoints
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 approachhexbin
now renders empty hexes in areas where there were no points, so as to match up with heatmap
Published by emeeks almost 6 years ago
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.summaryType
with type set to ridgeline
will now accept string curve
props along with d3-shape
curves, matching functionality in XYFrameridgeline
summary types in OrdinalFrame
will now honor an axis
prop in the summaryType
and display an axis for each summary, like histogram
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)ordinal-line
annotation type to allow people to compose bar+line charts with interactivity on the line portionSee 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
Published by emeeks almost 6 years ago
d3-shape
bump version to ^1.2.0
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.OrdinalFrame
pieces now passes the calculated props of the piece so you can use oIndex
and rIndex
to style pieces made by multiple accessorsPublished by emeeks almost 6 years ago
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.
NetworkFrame
has a new arc
type that creates an arc diagram.