A data visualization framework combining React & D3
OTHER License
Bot releases are hidden (Show)
Published by emeeks over 6 years ago
XYFrame
and OrdinalFrame
now accept arrays of accessors for oAccessor
, rAccessor
, xAccessor
, yAccessor
, lineDataAccessor
, and areaDataAccessor
. which allows you to create something like this:From a single dataset with code like this:
<XYFrame
areas={[{ coordinates: pointTestData }]}
areaDataAccessor={[
d => d.coordinates.filter(p => p.color === "#4d430c"),
d => d.coordinates.filter(p => p.color === "#00a2ce")
]}
areaType={{ type: "contour", thresholds: 5 }}
xAccessor="x"
yAccessor="y"
areaStyle={d => {
return {
stroke: d.parentArea._baseData[0].color,
fill: "none",
strokeOpacity: 0.5,
strokeWidth: 3,
strokeDasharray: "15 5"
}
}}
/>
Notice the array in areaDataAccessor
. This convenience could be improved by somehow decorating the data to know how it was made but for now that's not available. In the case of annotations, the annotation will be applied to the first valid accessor and not to all valid accessors.
Published by emeeks over 6 years ago
Published by emeeks over 6 years ago
customSankey
in networkType
would fail if you didn't send any nodePadding
ResponsiveFrame
was sharing the isResizing
var across instantiationsevents
is passed to the underlying react annotation, if events
is passed to <Annotation>
then it will automatically have pointer-events
turned on.Published by emeeks over 6 years ago
fill
set as you would a normal line and that they will not do an animated transition into a stacked chart. This was done to resolve a long-term Chrome rendering bug with SVG that couldn't handle single pixel-width perfectly straight areas. It also cured the poor honoring of stroke-dasharray since technically these lines were one on top of the other.sortO
in OrdinalFrame is now passed the column details in new third and fourth parameters so you can set a function to sort based on column data like sortO={(columnAName,columnBName,columnAData,columnBData) => your sorting logic here}
axis
property of the summaryType
that obeys the same axis settings seen elsewhere in Semiotic.debounce
propertysortGroups
(for Chord diagrams) is honored as a passthrough on networkTypePublished by emeeks over 6 years ago
OrdinalFrame
were being calculated ran into issues with the most common polyfilled version of IE11 making the charts not render in IE11yExtent={[0,undefined]}
were having strange effects with Responsive frames.Published by emeeks over 6 years ago
Published by emeeks over 6 years ago
Hopefully this finally resolves a few persistent issues with yarn and npm related to dependencies that were pointed at repos (element-resize-event which I'd forked to add support for tabindex
as well as Rough which I'd forked and built to ES5).
Published by emeeks over 6 years ago
element-resize-event
and rough
so that Semiotic points to NPM versions of each rather than direct to repos.Published by emeeks over 6 years ago
this
complaint (thanks @rgbkrk)highlight
annotation finallyPublished by emeeks over 6 years ago
Published by emeeks over 6 years ago
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.Published by emeeks over 6 years ago
ordinalAlign="center"
wasn't honored for dynamic width radial bar chartsmarginalia
wasn't handling multi-subject annotations wellsemiotic-mark
version so it doesn't complain about tx
,ty
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.Published by emeeks over 6 years ago
customDoubleClickBehavior
)beforeElements
and afterElements
work properly across all frames nowPublished by emeeks over 6 years ago
graph
prop that is an object with edges
and nodes
or a hierarchical data structure (like you use with d3-hierarchy)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" }) ]}
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.semiotic-mark
update to fix wonky animations and git repo addresses that work with yarn thanks to @cvklinereact-annotation
dependencies for better bundle size thanks to @susieluPublished by emeeks over 6 years ago
scaleLog
or scalePow
)NetworkFrame
will take a flipped
direction in networkType
for making bottom-up treesPublished by emeeks over 6 years ago
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
Published by emeeks over 6 years ago
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.Published by emeeks over 6 years ago
semiotic.min.js
Published by emeeks over 6 years ago
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.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
}
}}