A data visualization framework combining React & D3

nteract

Last update: Dec 29, 2022

Overview

Semiotic is a data visualization framework combining React & D3

Interactive Documentation

API Docs on the wiki

Examples

Installation

npm i semiotic

Example

import { XYFrame } from "semiotic"

You can also use the static distribution:

https://unpkg.com/semiotic/dist/semiotic.min.js

In which case the elements are exposed as properties of a Semiotic object:

const { XYFrame } = Semiotic

This is how it's used in these Codepen examples.

Semiotic icon based on an icon by André Schauer

It may not be apparent in the commit logs but development of this library owes a lot to:

Susie Lu
Jason Reid
James Womack
Matt Herman
Shelby Sturgis
Tristan Reid

Using BrowserStack for browser compatibility testing

Comments

Add simple examples
Add examples in the interactive documentation that show the code for minimal, effective traditional charts:

Bar Chart (Stacked Bar Chart separately)

Pie Chart

Line Chart

enhancement
opened by emeeks 19

Using a brush to select a time range.

I would like to create a component that can be used to select a timerange using semiotic. What I have in mind is a "line chart" with a time axis, to which I want to add a Brush. I cannot find any example on how to do that. I have this:

 const timeRangeData = [
  {
    id: "timeRange",
    color: "blue",
    data: [{ px: new Date(2016,6,1,0,0,0), py: 1 }, { px: new Date(), py: 1}]
  }
]
         <XYFrame
            xScaleType={scaleTime()}
            yExtent={[0,2]}
            xAccessor={'px'}
            yAccessor={'py'}
            lineDataAccessor={'data'}
            lineStyle={d => ({
              stroke: d.color,
              strokeWidth: "30px",
              opacity: 0.2,
            })}
            size={[1000,200]}
            lines={timeRangeData}
            margin={{ left: 50, top: 20, bottom: 70, right: 50 }}
            axes={[
              {
                orient: "bottom",
                tickFormat: d => moment(d).week()
              }
            ]}
          />

How do I add the interactivity?

opened by jhvanderven 17

ReponsiveORFrame question

I am using [email protected] in combination with [email protected]. Obviously all my ORFrames are ResponsiveORFrames with both ResponseWidth and ResponseHeight set to true. The first type I made was a donut OR Frame and the second a horizontal bar chart. Nothing very special there.

I find that the two frames exhibit very different behaviour.

The donut seems to require the size property in order to grow beyond its initial size. If I give it maximum size on creation, then let react-grid-layout set the actual initial size all works as expected. If I do not give it a size, I think the default in semiotic [500, 500] will be the maximum size.

Because a donut is a circle, I kind of understand that it only responds to width changes...

The bar chart works the same with or without an initial size: it only resizes in the width direction. It will not change the height (because it's vertical) of its pieces to fit the allotted space. The width of the bar chart does grow beyond 500.

Here is the bar chart:

        <ResponsiveORFrame
          responsiveWidth={true}
          responsiveHeight={true}
          //size={[this.props.size[0], this.props.size[1]]} 
          data={this.state.data}
          projection={"horizontal"}
          type={"bar"}
          oLabel={true}
          oPadding={this.props.padding}
          oAccessor={"key"}
          rAccessor={d => d.count}
          style={d => {
            return { fill: this.props.fill, stroke: "black" };
          }}
        />

And here is the donut

          <ResponsiveORFrame
            responsiveWidth={true}
            responsiveHeight={true}
            size={[this.props.size[0], this.props.size[1]]}
            data={this.state.data}
            projection={"radial"}
            style={(d, i) => ({
              fill: this.props.colors[i],
              strokeWidth: 1
            })}
            type={{ type: "bar", innerRadius: this.innerRadius() }}
            dynamicColumnWidth={"count"}
            rAccessor={d => 1}
            oAccessor={"key"}
            margin={{ left: 20, top: 40, bottom: 40, right: 20 }}
          />

The frames have a default size on which they render nicely. That is what the addFrame function uses:

  addFrame(e){
    let size = this.getDefaultSize(frameType);
    this.setState({
      layout:this.state.layout.concat({
        i:this.state.count.toString(),
        x:4,
        y:Infinity,
        w:Math.ceil(size[0] * gridCols / gridWidth),
        h:Math.ceil(size[1]/gridHeight)
      }),
      frames: this.state.frames.concat({
        key:this.state.count.toString(),
        data:{
          type:frameType
        }
      }),
      count:this.state.count+1,
    });
  }

The above is the bookkeeping and initial sizing of the frames on the page. The actual creation is done here (adapted from the react-grid-layout example here):

  createElement(el){
    const i = el.add ? '+' : el.i;
    var item;
    var type = '';
    for (var frame of this.state.frames) {
      if(frame.key===el.i){
        type = frame.data.type;
        break;
      }
    }
    switch(type){
      case 'donut':
        // largest size of a rectangular frame here.
        item= <donut 
                size={[gridWidth, gridWidth]} 
              />
        break;
      case 'barchart':
        item=<barchart />
        break;
      default:
        console.error('Unknown frame');
    }
    return (
      <div id={type+i} key={i} data-grid={el}>
        {item}
      </div>
    );
  }

Two questions:

Do I need to set a size on responsive semiotic frames? Can they then grow to any size?
What should I do to make the frames respond in height?

opened by jhvanderven 15

ResponsiveFrame not receiving containerWidth property
When I try to use a ResponsiveXYFrame I get warnings from react-dimensions about the wrapper div having no dimensions:

Wrapper div has no height or width, try overriding style with `containerStyle` option

And an error from ResponsiveFrame at line 71:

Uncaught TypeError: Cannot set property '0' of undefined

As far as I can tell, because of how the responsive frames are created, there's no way to for me to pass in containerStyle to react-dimensions. I have however tried setting minimum widths and heights on the wrapper div in CSS and I still get this same error.
opened by darthmall 13
Multi accessor
Honors arrays of accessors in xAccessor, yAccessor, lineDataAccessor, areaDataAccessor, oAccessor, rAccessor to inflate the data in common use cases.
opened by emeeks 12
How to define how tickLines are rendered?

I've been searching all the documentation and issues and can't find anything that specifies how to customize tick lines, as opposed to tick values or scaling or labelling. The only solution I've come up with is to take the classNames you've given tick-line and specifying a style class for that. Is there any way to pass jsx or at the very least to pass your own class name to each tick line for each orientation?

opened by marcus-grant 12
Position by data not working with annotationCalloutRect
This could definitely be me doing something wrong, but I've been trying to make this work all day with no luck.

I want to position an annotationCalloutRect using the data and not raw x/y coordinates.

Using raw x/y coordinates

const mileAnnotations = [ { type: annotationCalloutRect, y: 10, x: 460, dx: -150, dy: 150, note: { label: "Great recession", align: "left", wrap: 100}, subject: { width: 10, height:165 } } ];

When I try to do the same thing with a data property, it breaks.

const mileAnnotations = [ { type: annotationCalloutRect, data: {x:2008,y:1500}, dx: -150, dy: 150, note: { label: "Great recession", align: "left", wrap: 100}, subject: { width: 10, height:165 } } ];

Other annotation types seem to be able to do this, but not annotationCalloutRect.
opened by bengarvey 12
"process" dependency in UMD bundle breaks usage in browsers.
The current UMD bundle has a dependency on the process module:

require("process")

Probably the code expects this to be Node’s process built-in, but on the web, this resolves to a browser shim:

https://www.npmjs.com/package/process

And this browser shim doesn’t support UMD, which breaks. We can workaround this issue by creating an empty object for process as follows using require.alias:

r = require.alias({ "process": {}, "react": "react@16/umd/react.production.min.js", "react-dom": "react-dom@16/umd/react-dom.production.min.js", "semiotic": "semiotic@1" })

But my guess is that process should be declared a global in your rollup.config to avoid the unnecessary require of an unintended module.
opened by mbostock 11
Improve Labeling and Annotation

Now that Semiotic has matured a bit and most of the bugs are ironed out I'm trying to think of ways to improve the library. Please thumbs up or thumbs down this if you think it would or wouldn't be useful. Also, if you have concerns or ideas, feel free to leave comments.

One of the things that really sets apart bespoke charts and one-off libraries dedicated to a specific chart (like a Sunburst chart) is their labeling. Weird charts like treemaps have often have their own custom rules to be labeled properly, there's been some cool work done by Noah Veltman on labeling stacked area charts and even bar charts have more options for labeling than you'd think. Add to this the problem of making sure annotations don't collide with labels and it's some serious work.

The benefits of a dedicated attempt to make labeling and annotations work really well aren't just clear labels, there's the possibility that the weird sunburst labeling is actually suitable for a pie chart, or the treemap labels could be used in any rectangular mark. On the other hand, labeling is super difficult, as evidenced by the minor amount of annotation handling options already implemented in Semiotic and their uneven performance.
enhancement question

opened by emeeks 10
Hard dep on json2csv 3.7 does not resolve

Doing a clean npm install on a new project results in a node_modules tree containing an error that [email protected] is unresolved. I can successfully pull in the latest ^3 version of that module which is 3.11.5 but for some reason 3.7.4 can't be pulled. I don't know if that's a transient problem or what, but I thought I would mention it.

There don't appear to be any breaking changes until version 4, so this might be fairly easy to fix... I might give it a try; I thought I'd let you know about it in any case.

opened by cvkline 9

Brush issues again

I am revisiting the code from this issue but now on a more recent version of semiotic (^1.7.13), d3-scale (^2.0.0) and react (^16.2.0). When I run the code as is, I get the following react error: "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops." The console adds: "The above error occurred in the component: in XYFrame (at TimeSelector.js:135)"

This is before any interaction has taken place. The page renders for a split second and then errors out. If I comment out: //xScaleType={scaleTime()} the page renders, but the brush does not work as expected: the handles stay where they are and the ticks get updated very fast (as compared to the brush movement).

I have commented out the setState calls in brushDuring and brushEnd, but that did not change the behavior.

For completeness sake, here is my component:

import React from "react";
import { XYFrame } from "semiotic";
import { scaleTime } from "d3-scale";
var data;

export default class TimeSelector extends React.Component {

constructor(props) {
  super(props);
  data = [
    {
      px:this.props.start,py:1
    },
    {
      px:this.props.stop,py:1
    }
  ];
    
  this.state = {
    start:data[0].px,
    stop:data[1].px,
    data:data,
    align:true
  }

  this.brushDuring = this.brushDuring.bind(this);
  this.brushEnd = this.brushEnd.bind(this);
}

brushDuring(e) {
  if(e!==null && e!==undefined){
   this.setState({start:e[0], stop:e[1]});
  }
}

brushEnd(e) {
  if(e!==null && e!==undefined){
    this.setState({start:e[0], stop:e[1]});
  }
}

render() {
  return (
    <div>
      <div>
        <XYFrame
          className='-ts'
          // leave some room (60 pixels) for the controls
          size={[this.props.width, this.props.height-30]}
          lines={[{coordinates:this.state.data}]}
          xAccessor="px"
          yAccessor="py"
          //xScaleType={scaleTime()}
          yExtent={[0,2]}
          xExtent={[this.state.start, this.state.stop]}
          lineStyle={d => ({
            stroke: "grey",
            strokeWidth: "10px",
            opacity: 0.4,
          })}
          axes={[
            {
              orient: "bottom",
              ticks: 10
            }
          ]}
          margin={{ left: 60, top: 55, bottom: 40, right: 40 }}
          interaction={{
            during: this.brushDuring,
            end: this.brushEnd,
            brush: "xBrush",
            extent: [this.state.start,this.state.stop],
          }}
        />
      </div>
    </div>
    );
  }
};

I can see that the brush example still works, which puzzles me.

Update: If I remove the callbacks from the interaction, then the behaviour is as expected, but the events do not fire, of course.

          interaction={{
            //during: this.brushDuring,
            //end: this.brushEnd,
            brush: "xBrush",
            extent: [this.state.start,this.state.stop],
          }}

Update 2: If I comment out the following lines: In the constructor:

//  this.brushDuring = this.brushDuring.bind(this);
//  this.brushEnd = this.brushEnd.bind(this);

In the render function: //xScaleType={scaleTime()} And redefine my event callbacks as arrow functions:

brushDuring = (e) => {
  if(e!==null && e!==undefined){
   this.setState({start:e[0], stop:e[1]});
  }
}

brushEnd = (e) => {
  if(e!==null && e!==undefined){
    this.setState({start:e[0], stop:e[1]});
  }
}

everything seems to work just fine.

opened by jhvanderven 9

Some of the website pages are fully blank

For example, https://semiotic.nteract.io/guides/axis is blank and the error: semiotic.module.js:7304 Uncaught TypeError: Cannot read properties of undefined (reading '0') is in the console.

opened by gwenfriedman 0
Ability to specify width in terms of percentage

https://codesandbox.io/s/semiotic-ordinalframe-workshop-example-forked-r6x0pq

The size parameter only takes in a number array. Is there a way to specify the size in terms of percentage and make it responsive I guess? I couldn't find anything in the documentation regarding this.

Like in the above codesandbox example, how do I make the OrdinalFrame take up the full space of its parent div, which is 70%?

opened by crajar 0
How to use with nteract?
Hi, I might be missing something obvious but I have trouble getting semiotic to work in nteract. I've tried installing it via npm (https://github.com/nteract/nteract/issues/1696) using the following package.json

{ "type": "module", "dependencies": { "semiotic": "^2.0.0-rc.20" } }

But when I run import { NetworkFrame } from "semiotic" in nteract, I get SyntaxError: Cannot use import statement outside a module. What's the recommended way of using semiotic in nteract?
opened by frthjf 0
More position options for the legend
At the moment we have two options to position the legend to the left or right of the chart area. There are plenty of times that I need the legend to be displayed (centered) above or below the chart too, such as when one of the data series labels is too long.

It would be nice to be able to do something like this (mockup):

While I think of it, adding the legend inside the chart area looks good too (obviously this depends on the number of series and the specific data):

Also, it would be very useful to have other settings to:

Control the gap between legend items. This should be applied vertically for the default legend, and horizontally when the legend orientation is set to horizontal.

Disable the legend title and the line drawn underneath (don't need it when displaying the legend above or below the chart).

Add a margin around the legend.

Wrap legend series nicely when displaying horizontally. If you have more than, say, 3 or 4 series then this may be needed.
opened by dgwyer 2
Transition tooltip position

At the moment the tooltip position 'snaps' between locations when points are hovered over.

I've been trying to get this to transition via CSS without any success. Is there an way we can get this to work?

opened by dgwyer 0

Releases(v1.20.5)

v1.20.5(Jan 21, 2020)
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!)

Source code(tar.gz)
Source code(zip)
1.20.4(Nov 15, 2019)
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

Source code(tar.gz)
Source code(zip)
2.0.0-beta.0(Oct 6, 2019)
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.
Source code(tar.gz)
Source code(zip)
v1.20.3(Sep 3, 2019)
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

Source code(tar.gz)
Source code(zip)
v1.20.0(Jul 29, 2019)
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).

Source code(tar.gz)
Source code(zip)
v1.19.11(Jun 24, 2019)
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.

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)

Source code(tar.gz)
Source code(zip)
v1.19.6(Apr 10, 2019)
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

* `baseline: "under"` support for drawing the neatline of an axis under the viz layer (by default it's drawn above it) * Documentation for cluster/grouped bar charts at https://semiotic.nteract.io/guides/bar-chart * `OrdinalFrame` pieces are now decorated with an `rName` prop that corresponds to the string name of an accessor sent to `rAccessors` and is useful in tandem with arrays of accessors. * The container div for frames in OrdinalFrame is now decorated with the value of `projection` as a className
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.

Source code(tar.gz)
Source code(zip)
v1.19.1(Mar 22, 2019)
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.

* XYFrame supports marginal summary graphics via a `marginalSummaryGraphics` prop of any passed axis. You can see the [documentation on how to use them here](https://semiotic.nteract.io/examples/marginal-graphics). Source code(tar.gz)
Source code(zip)
v1.18.0(Mar 4, 2019)

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.
Source code(tar.gz)
Source code(zip)
v1.17.0(Feb 28, 2019)
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

Source code(tar.gz)
Source code(zip)
v1.16.8(Feb 19, 2019)
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

Source code(tar.gz)
Source code(zip)
v1.16.7(Feb 19, 2019)
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.

Source code(tar.gz)
Source code(zip)
v1.16.6(Feb 19, 2019)
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.

Source code(tar.gz)
Source code(zip)
v1.16.5(Feb 19, 2019)
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

Source code(tar.gz)
Source code(zip)
v1.16.4(Jan 28, 2019)
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

Source code(tar.gz)
Source code(zip)
v1.16.3(Dec 24, 2018)
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.

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

Source code(tar.gz)
Source code(zip)
v1.16.1(Dec 17, 2018)
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

enclose-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 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

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

Source code(tar.gz)
Source code(zip)
v1.16.0(Nov 21, 2018)
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

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
Source code(tar.gz)
Source code(zip)
v1.15.10(Nov 18, 2018)
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

Source code(tar.gz)
Source code(zip)
v1.15.8(Nov 5, 2018)
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.

NetworkFrame has a new arc type that creates an arc diagram.

Source code(tar.gz)
Source code(zip)
v1.15.7(Oct 30, 2018)
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

Source code(tar.gz)
Source code(zip)
v1.15.6(Oct 23, 2018)
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

Source code(tar.gz)
Source code(zip)
v1.15.5(Oct 23, 2018)
Fixes

OrdinalFrame generates its foregroundGraphics slightly differently than the other two frames, so it wasn't honoring the new foregroundGraphics as a function thing

Source code(tar.gz)
Source code(zip)
v1.15.4(Oct 18, 2018)
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".

Source code(tar.gz)
Source code(zip)
v1.15.3(Oct 18, 2018)
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

Source code(tar.gz)
Source code(zip)
v1.15.2(Oct 15, 2018)
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)

Source code(tar.gz)
Source code(zip)
v1.15.1(Sep 26, 2018)
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.

Source code(tar.gz)
Source code(zip)
v1.15.0(Sep 26, 2018)
Features

In XYFrame if you render points or lines with canvas then the interaction layer will also be rendered with canvas, which means you won't choke your DOM with an interactive 50,000 point scatterplot like this one: https://emeeks.github.io/semiotic/#/semiotic/canvasinteraction

Fixes

Axis elements weren't calculating bounding boxes if they were using custom tickFormat that returned JSX

Source code(tar.gz)
Source code(zip)
v1.14.5(Sep 17, 2018)
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

Source code(tar.gz)
Source code(zip)
v1.14.2(Sep 4, 2018)
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).

Source code(tar.gz)
Source code(zip)