semiotic

A data visualization framework combining React & D3

OTHER License

Downloads
7K
Stars
2.4K
Committers
29

Bot releases are visible (Hide)

semiotic - Support negative values in stacked area and stacked percent charts

Published by emeeks almost 7 years ago

Negative values in stackedarea and stackedpercent line types wouldn't work. Now they follow the pattern that negative values are "stacked" negatively. I'll probably do the same thing for bump area charts but that will take a little more work.

semiotic - Remove Format, Improve Annotations

Published by emeeks almost 7 years ago

This is a minor bump because it breaks format in Axis. We use numeral a lot at Netflix and format was a convenient way to just use numeral style formatting but it required numeral be a dependency for that one tiny feature. moment was removed for the same reason.

The other breaking change is that previously pieceHoverAnnotation would enable hover on individual pieces or on parts of a summary graphical object. This has been replaced with ORFrame having a summaryHoverAnnotation to explicitly turn on one mode or the other.

This also adds some new built-in annotation types to XYFrame, vertical-points and horizontal-points which draw circles on all the points at the same (graphical) vertical or horizontal position. This was part of a larger modification of the annotation handling to move away from a simple hoverAnnotation={true} to a system that lets you declare the kinds of annotations instantiated on hover rather than just the default frame-hover and column-hover. So now you can send objects that are basic annotation types or functions that return such objects or arrays of them, like this:

          hoverAnnotation={[
            { type: "y", disable: ["connector", "note"] },
            { type: "x", disable: ["connector", "note"] },
            d => ({ type: "xy", label: d.name }),
            { type: "frame-hover" },
            {
              type: "vertical-points",
              threshold: 5,
              r: (d, i) => i + 5
            },
            {
              type: "horizontal-points",
              threshold: 5,
              r: (d, i) => i + 5
            }
          ]}

Which will result in all sorts of annotations being called on hover and look something like this:

untitled

semiotic - ISOTYPE, Better Responsive Frames

Published by emeeks almost 7 years ago

  • Responsive Frames use a new resize listener which seems to work better than the earlier two models
  • ORFrame oLabel can take an object with an { orient, label } where label is the same as what was sent to oLabel (a boolean or a function that returns JSX SVG) and orient allows you to place labels on the "right" with horizontal projection or "top" with vertical projection.
  • ORFrame type object can now take an icon and and iconPadding setting that will cause rendered bar or clusterbar to be drawn with icons (spaced away from each other by the pixel value of iconPadding or 1 if nothing is sent).
semiotic -

Published by emeeks about 7 years ago

fix: This introduces a simple randomized key for components to ensure that they update. This is a stop-gap solution until react-annotation gets updated.
examples: Realtime ORFrame and XYFrame examples, How to Create a Line Chart

semiotic -

Published by emeeks about 7 years ago

Fixes a few ORFrame pie chart related bugs, mostly, that popped up while writing the intro to pie charts.

Features

  • Default size for frames of [500,500]

Fixes

  • Radial axis labels obey margins properly
  • Radial tooltips obey margins properly
  • Labeled radial ORFrame doesn't adjust margins
  • rAccessor defaults to "value" if "value" exists otherwise 1 (so you can leave off defining rAccessor for pie charts)
semiotic -

Published by emeeks about 7 years ago

The major change is a switch from d3-svg-annotation to react-annotation. With this change comes a breaking change in the names of annotation elements, as the new react-annotation uses capitalized component names and that could cause problems.

Fixes:

  • rExtent in ORFrame should work in all cases with the pattern of using undefined in the array if you only want to set the top or bottom
  • rBaseline is deprecated
  • Visualization layer elements are now wrapped in an absolute positioned which fixes an annoying CSS isse
  • Titles weren't being properly honored in ORFrame
  • Remove clip paths from rectangular and circular sketchy Marks, since this runs into an SVG bug in Chrome

Changes:

  • Annotations now use react-annotation instead of d3-svg-annotation. Better performance and composable annotations.
  • Bucketized ORFrame summaries (histogram, heatmap, joy, violin) now have shared scales instead of column-dependent scales.

Features:

  • Histogram summaryType in ORFrame now accepts an axis property so you can make bunches of axes
  • You can move summary visualizations using summaryPosition
semiotic - Radial ORFrame Annotations

Published by emeeks about 7 years ago

fix: Annotations work in radial ORFrame
fix: pieceHoverAnnotation works in radial ORFrame
fix: Radial bar width accounts for padding properly
fix: Radial charts use margins properly