A data visualization framework combining React & D3
OTHER License
Bot releases are hidden (Show)
Published by emeeks almost 6 years ago
OrdinalFrame
sends data and drawing elementNetworkFrame
sends decorated data object to HTML annotation functioncustomPointMark
in XYFrame
had issues with being sent elements rather than functions returning elementsNetworkFrame
sends decorated data object to the separation nodeSizeAccessor
for tree diagramsPublished by emeeks almost 6 years ago
Published by emeeks almost 6 years ago
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 performancePublished by emeeks about 6 years ago
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.Published by emeeks about 6 years ago
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
Published by emeeks about 6 years ago
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)Published by emeeks about 6 years ago
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.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.Published by emeeks about 6 years ago
Published by emeeks about 6 years ago
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.cursor: pointer
pieceHoverAnnotation
interaction regions are now based on the custom mark for any custom mark-based viz in OrdinalFramePublished by emeeks about 6 years ago
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!)matte
now accepts (along with the original true
) a JSX SVG element or a function like ({ size, margin }) => <JSX SVG />
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).Published by emeeks about 6 years ago
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
edgeType
honors a curve
type to draw those s-curves that D3 likes for dendrograms.tooltip
class because of collisions with other libraries that have CSS rules for that incredibly common classPublished by emeeks about 6 years ago
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).Published by emeeks about 6 years ago
Published by emeeks about 6 years ago
react15Wrapper
to FacetController so that React 15 (which doesn't support fragments) can use FacetController by passing a wrapper element (like a div).Published by emeeks about 6 years ago
barpercent
to OrdinalFrame which does the same convenience data formatting as linepercent
and stackedpercent
but for bar chartsPublished by emeeks about 6 years ago
Published by emeeks about 6 years ago
Published by emeeks about 6 years ago
Published by emeeks about 6 years ago
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:
heatmap
areaType would sometimes create an extra row or column on the bottom and/or right. This should be fixed nowPublished by emeeks about 6 years ago
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)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.