nteract / semiotic Goto Github PK

summaryType "boxplot" should take an additional property that styles the individual pieces. Separately.
Boxplot should also split out the "above" and "below" quartile ranges into two separate pieces.

Hey great work on the lib, it looks really promising.

I tried to go through the example which i found here.

Which was working fine when using the dataset without any dates, but when I switched over to using the dataset with dates I received the error below which I found hard to trace.

This is the snippet I was using

// data for the graph
const data = [
    { id: 'linedata-1', color: '#00a2ce',
       data: [
            { sales: 500, timestamp: Date(2017, 7, 1) },
            { sales: 700, timestamp: Date(2017, 7, 2) },
            { sales: 0, timestamp: Date(2017, 7, 3) },
            { sales: 0, timestamp: Date(2017, 7, 4) },
            { sales: 200, timestamp: Date(2017, 7, 5) },
            { sales: 300, timestamp: Date(2017, 7, 6) },
            { sales: 500, timestamp: Date(2017, 7, 7) }
           ]
    },
]
//graph div
<XYFrame
    size={[500, 700]}
    lines={data}
    xAccessor="timestamp"
    yAccessor="sales"
    xScaleType={scaleTime()}
    lineDataAccessor="data"
    lineStyle={d => ({ stroke: d.color, fill: d.color })} />

The download feature in the XYFrame doesn't receive x/yAccessors.

Looks like they aren't being passed to xyDownloadMapping as expected
https://github.com/emeeks/semiotic/blob/master/src/components/downloadDataMapping.js#L10

Example:

<XYFrame
          {...sharedProps}
          className="line-xy"
          lineStyle={(d) => {return {stroke:d.color, strokeWidth: '2.5px'}}}
          lines={this.formatData(this.props.data)
            .filter((d)=>{return this.state.filterIndex.indexOf(d.id) === -1})}
          axes={axes}
          lineDataAccessor={(d)=> d.data}
          xAccessor={(d) => d.date}
          yAccessor={(d) => d.count}
          //lineRenderMode={"sketchy"}
          hoverAnnotation={true}
          download={true}
          //defined={(d) => d !== null}
          tooltipContent={(d) => {
            return this.fetchTooltipContent(d);
          }}
/>

I suspect this is an issue in the OR frame as well.

Similarly, is there a way to pass a data accessor tonetworkNodeDownloadMapping / networkEdgeDownloadMapping?

I think this is actually a UI bug, as opposed to something I'm misunderstanding.

When I use a legend of type 'line' with ORFrame of type 'point', the transform applied to the legend-item group is translate(0,45). The legend divider touches the first diagonal legend line in the legend.

You can see this in the first svg linked below. If I change the transform to translate(0,55), then you get the second svg linked below, which looks OK to me.

https://repl.it/KGGu/6

Let me know if you want me to put together a minimal working example.

In XYFrame, axis can get class="axis undefined" when not sent a className.

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

Mostly just an FYI.

I saw your talk where you presented this and then went to the website to try the examples you presented. So I assumed I should click "API Docs" or "Tutorials" but they both take you to the github wiki. Because I specifically remember examples on the website, I then recalled there being a menu on the left, so I only then started to look around and noticed the hamburger menu icon.

Maybe most will notice it..just an FYI that I only went looking for it because I knew those examples were somewhere, but others may only look at the API Docs and Tutorials since those buttons are prominent.

Simple solution would be to always show the side menu and maybe move the API Docs and Tutorials buttons into there too. Or you can ignore me hehe. 🤡

For the green and red lines in this chart, I don't have data prior to 1982, so those values are null in my dataset. Semiotic still plots them at the bottom of the y axis. I tried making the line formatting conditional to hide them, but that didn't seem to work.

Is this considered a bug or is there a way around it?

Talking with @emeeks, it would be great to expose an axis helper for all summary types in OR frame. One current use case is a simple histogram. An exposed axis helper is necessary to create a y-axis for the counts of the histogram.

When you try navigating to https://emeeks.github.io/semiotic/#/semiotic/violin you get redirected to main page. There's no errors in console.

Tooltip content should take a string and just wrap it.

Add support for "line" you have y1, an accessor function that lets you draw the bottom/top of a line so that a user can send something like:

{ type: "line", y1: () => 0 } to create zero-bottom lines or:
{ type: "line", y1: d => d.value + 5 } to create ribbon-like lines.

It would be helpful for the points option on download to be able to accept a function to format the exported data
ex:

<XYFrame>
   {...someProps}
   download={{
      type : 'points', 
      mapper : (d)=> { 
         d.x = new Date(d.x).toString() 
         d.y = someOtherFormatter(d.y)
         return d
      }
   }}
</XYFrame>

https://github.com/emeeks/semiotic/blob/master/src/components/XYFrame.js#L69

Rather than supporting a "dendrogram" or "tree" or "cluster" NetworkType, expose functionality in NetworkFrame to accept pre-calculated positions and demonstrate functionality by passing data processed by D3 hierarchical layout functions to build equivalent dendrograms.

If I set rExtent={[0,1]}, then the domain reverts to the min and max of the dataset (my data in this example are between 0 and 1).

If I set rExtent={[0]} (or rExtent={[0, undefined]}), then the domain extent correctly sets to 0 and the max of the dataset.

This occurs when I set type: "point". If I set type: "bar", then rExtent={[0,1]} works fine, ie domain extent sets to 0 to 1.

Icon-based stackable bar charts should be an available type in ORFrame.

Here is the code snippet I tried to create a chart similar to bullet chart, I tried to pass a legend object into the ORFrame like this:

return <ORFrame
        size={[ 500,100 ]}
        data={data}
        axis={axis}
        projection={'horizontal'}
        type={'bar'}
        rExtent={[0,1000]}
        style={d => {return {fill: d.colour}}}
        oLabel={d => <text transform="translate(-75,28)">your {d}</text>}
        oPadding={20}
        oAccessor={d => d.name}
        rAccessor={'value'}
        margin={{ left: 85, top: 100, bottom: 50, right: 30 }}
        hoverAnnotation={true}
        annotations={exampleAnnotations}
        legend={{ styleFn: d => ({ fill: d.color, stroke: "black" }), items: [
          { label: "Area 1", color: "red" },
          { label: "Area 2", color: "blue" }
          ]
       }}
    />

but got this error:

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Legend.render (eval at <anonymous> (bundle.js:3793), <anonymous>:86:19)
    at eval (eval at <anonymous> (bundle.js:1795), <anonymous>:795:21)
    at measureLifeCyclePerf (eval at <anonymous> (bundle.js:1795), <anonymous>:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (bundle.js:1795), <anonymous>:794:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (bundle.js:1795), <anonymous>:821:32)
    at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (bundle.js:1795), <anonymous>:361:30)
    at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (bundle.js:1795), <anonymous>:257:21)
    at Object.mountComponent (eval at <anonymous> (bundle.js:1429), <anonymous>:45:35)
    at ReactDOMComponent.mountChildren (eval at <anonymous> (bundle.js:1765), <anonymous>:236:44)
    at ReactDOMComponent._createInitialChildren (eval at <anonymous> (bundle.js:1633), <anonymous>:703:32)

The whole code snippet is like below:

import React, { Component } from 'react';
import { ORFrame, Legend } from 'semiotic';

export default class App extends Component {
  render() {
    const axis = {
      orient: "bottom",
      tickFormat: d => d,
      tickValues: [0, 500, 1000],
      padding: -10
    };

    const data = [
      {
        "colour":"lightblue",
        "name":"score",
        "value":800,
      },
      {
        "colour":"lightgrey",
        "name":"score",
        "value":1000-800,
      }
      ]

      const exampleAnnotations = [
        {"offset":40,"dy": -20,"dx":10,"value":430,"type":"r","label":"average score 430"},
        {"offset":40,"dy": -20,"dx":10,"value":800,"type":"r","label":"your score 800"}
      ]

    return <ORFrame
        size={[ 500,100 ]}
        data={data}
        axis={axis}
        projection={'horizontal'}
        type={'bar'}
        rExtent={[0,1000]}
        style={d => {return {fill: d.colour}}}
        oLabel={d => <text transform="translate(-75,28)">your {d}</text>}
        oPadding={20}
        oAccessor={d => d.name}
        rAccessor={'value'}
        margin={{ left: 85, top: 100, bottom: 50, right: 30 }}
        hoverAnnotation={true}

        annotations={exampleAnnotations}

        legend={{ styleFn: d => ({ fill: d.color, stroke: "black" }), items: [
          { label: "Area 1", color: "red" },
          { label: "Area 2", color: "blue" }
          ]
       }}
    />
  }
}

npm notice created a lockfile as package-lock.json. You should commit this file.

I'm generating annotations dynamically to reflect the values of the slider below each of these linked charts. The x-position of the annotation is updating, but the label is not.

You can see that even though the annotation moves, the label still says "2".

Frame props should have some defaults, especially size, which could have a simple [500,500] default.

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.

On Windows 10, I did:

npm i -g react-create-app
react-create-app myapp
cd myapp
npm i -S semiotic

Then I created the DivergingStackedBar component, modified App.js into:

import React, { Component } from 'react';
import DivergingStackedBar from './DivergingStackedBar';

import './App.css';

class App extends Component {
  render() {
    return (
      <DivergingStackedBar />
    );
  }
}

export default App;

And got errors on _react.PropTypes being undefined.
This seems to have changed since react v15.5.
To get the example working I had to:

npm remove react
npm i -SE [email protected]
npm remove react-dom
npm i -SE [email protected]
npm start

Would be helpful to know OR meant Ordinal x Range. Had to click through to the API docs to find out.

https://emeeks.github.io/semiotic/#/semiotic/orframe

HI I just installed semiotic as I wanted to evaluate how I could create simple visualizations using Semiotic framework.

Here's the code I created for a simple AreaChart:

import React from 'react'
import { XYFrame } from 'semiotic'

console.log( 'XYFrame', XYFrame)

const AreaChart = (
  colors = [],
  data = [],
  height = 400,
  marginTop = 60,
  marginRight = 20,
  marginBottom = 60,
  marginLeft = 60,
  width = 700,
  xAccessor = 'x',
  yAccessor = 'y'
) =>
  <XYFrame
    size={[ width, height ]}
    lines={ data }
    lineStyle={ d => ({ fill: d.color, fillOpacity: 0.5, stroke: d.color, strokeWidth: '3px' }) }
    xAccessor={ xAccessor }
    yAccessor={ yAccessor }
    margin={{
      top: marginTop,
      right: marginRight,
      bottom: marginBottom,
      left: marginLeft
    }}
    axes={[
      { orient: 'left', tickFormat: d => d },
      { orient: 'bottom', tickFormat: d => d }
    ]} />

export default AreaChart

console.log line returns undefined so I'm wondering if npm package is actually exporting modules properly. Am I doing something wrong?

I am using the latest version of semiotic (1.1.3) React 16.0, Webpack 3 with NodeJS v.8.6.0. I am using other 3rd-party npm packages with this setup, but I only see this error with semiotic, so I suspect that import { XYFrame } from 'semiotic' even though it seems right and documentation shows that this is how modules should be imported from semiotic is problematic as it stands.

Not sure if this is a philosophical issue or not. Is there a way to use two axes in the same XYFrame for two lines?

eg.
Scale one line 0-100 and another 0-1 but overlay them on top of each other. I can obviously do this with separate frames, but it seems like it should be possible with one frame.

Doesn't have the correct transform value.

Like BarLineChart, which should have lineRenderMode as the displayed code.

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?

The array has too many brackets

I'm seeing this in NMDash in the summaryLine annotations if you need an example.

Only a dev dependency

I created an ORFrame with following prop:

title={'ORFrame'}

This is the relevant part of the resulting SVG:

<g><!-- react-text: 206 -->ORFrame<!-- /react-text -->
<g transform="translate(0,415)">
<g transform="translate(95,0)"><text transform="rotate(90) translate(0,0)">08/28</text></g><g transform="translate(185,0)"><text transform="rotate(90) translate(0,0)">08/29</text></g><g transform="translate(275,0)"><text transform="rotate(90) translate(0,0)">08/30</text></g><g transform="translate(365,0)"><text transform="rotate(90) translate(0,0)">08/31</text></g><g transform="translate(455,0)"><text transform="rotate(90) translate(0,0)">09/04</text></g><g transform="translate(545,0)"><text transform="rotate(90) translate(0,0)">09/05</text></g><g transform="translate(635,0)"><text transform="rotate(90) translate(0,0)">09/06</text></g><g transform="translate(725,0)"><text transform="rotate(90) translate(0,0)">09/07</text></g><g transform="translate(815,0)"><text transform="rotate(90) translate(0,0)">09/10</text></g><g transform="translate(905,0)"><text transform="rotate(90) translate(0,0)">09/11</text></g>
</g>
</g>

Hello,

I would like to thank you first for the awesome visualization library. My question is how do I show the tooltip of a value in the heatmap. Tried setting the tooltipContent on ORFrame, however no tooltip is shown.

It would be great if you show some examples on how do we add the tooltip.

Check to make sure areaRenderMode is rendering sketchy properly.

rExtent seems to fail in ORFrame with point and bar types

Semiotic uses array position as the default render key, which is fine for basic charts, but there needs to be some examples showing how to define renderKey so that animated examples properly link to each other.

In the XYFrame wiki docs, the axes link should link to #axes-array instead of #axes---
https://github.com/emeeks/semiotic/wiki/XYFrame

Too bad you can't submit PRs against the wiki. I'd love to help with this if I can get access.

Can I adjust the stroke width from here?

<ORFrame
   connectorType={d => d.type}
   connectorStyle={d => ({ fill: d.source.color, strokeWidth: 10 })}
/>

strokeWidth: '10' doesn't appear to do much either.

Some of the examples show thick line connecting the points. I'd like to replicate that.

Talking with @emeeks, there is code for zooming in on data in an XY Frame, but an example and documentation needs to be built.

It would be great to have a simple, minimal example of a minimap for an XY Frame.

The first piece position should always start at 12 o'clock and shouldn't move based on margin, seriously wtf?

Support enclosure signaling for hierarchical data in NetworkFrame, either through networkType support of "circlePack" and "treeMap" or more integrated support that allows for enclosure signals mixed with connection signals.

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.

All the sankey settings need to be available in the sankey networkType.

Provide an option to set a true north for radial bar charts that are wind roses.

Check point and swarm in radial to make sure the values are being drawn from 0/360 degrees for first value.

Hi the website hangs(seems an infinite loop) at the XYFrame example page https://emeeks.github.io/semiotic/#/semiotic/xyframe when I try to change the fixed extent param .
Seems affected by only with the line data type