Using a brush to select a time range. about semiotic

[emeeks]

I have an example using the ORFrame brush but no minimal example for the XYFrame brush. I'll put one together because that's something everyone needs.

[emeeks]

Just posted a minimal example, let me know if you need any more explanation:
https://emeeks.github.io/semiotic/#/semiotic/linebrush

[jhvanderven]

Thanks for the quick reply. Unfortunately your example is not working at my end. If I comment out brush: "xBrush", the page renders the XYFrame. If I comment it in, I get an error, with the following stack trace:

Uncaught TypeError: Cannot read property 'selection' of null
    at SVGGElement.<anonymous> (InteractionLayer.js:149)
    at Dispatch.apply (dispatch.js:61)
    at customEvent (on.js:103)
    at Emitter.emit (brush.js:286)
    at Emitter.start (brush.js:274)
    at SVGGElement.<anonymous> (brush.js:222)
    at Selection../node_modules/semiotic/node_modules/d3-selection/src/selection/each.js.__webpack_exports__.a [as each] (each.js:5)
    at brush.move (brush.js:212)
    at Selection../node_modules/semiotic/node_modules/d3-selection/src/selection/call.js.__webpack_exports__.a [as call] (call.js:4)
    at Brush.createBrush (Brush.js:53)
    at Brush.componentDidMount (Brush.js:44)
    at ReactCompositeComponent.js:265
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponent.js:264
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
    at ReactReconcileTransaction.closeAll (Transaction.js:206)
    at ReactReconcileTransaction.perform (Transaction.js:153)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at Object._renderNewRootComponent (ReactMount.js:320)
    at Object._renderSubtreeIntoContainer (ReactMount.js:401)
    at Object.render (ReactMount.js:422)
    at Object../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap c2061b57f03955bc38b1:669)
    at fn (bootstrap c2061b57f03955bc38b1:87)
    at Object.0 (registerServiceWorker.js:108)
    at __webpack_require__ (bootstrap c2061b57f03955bc38b1:669)
    at bootstrap c2061b57f03955bc38b1:715
    at bundle.js:719

Does the example require any props? I just add it to the page as

<LineBrush />

I have 1.1.4 of semiotic, react is still at 15.4.2

Here is my stripped version of your component:

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

const chartScale = scaleTime();
const lineStyle = {
  fill: "#007190",
  stroke: "#007190",
  strokeWidth: 1
};

var data = [
  {
    date: "1/2/2003",
    close: 14.8
  },
  {
    date: "12/30/1998",
    close: 14.07
  }
];

data.forEach(d => {
  d.date = new Date(d.date);
});

export default class LineBrush extends React.Component {
  constructor(props) {
    super(props);
    this.brushEnd = this.brushEnd.bind(this);
  }

  brushEnd(e) {
    console.log(e);
  }

  render() {
    return <XYFrame
        size={[700, 200]}
        lines={[{ label: "Apple Stock", coordinates: data }]}
        xAccessor={d => d.date}
        yAccessor="close"
        xScaleType={chartScale}
        lineStyle={lineStyle}
        axes={[
          {
            orient: "bottom",
            ticks: 6,
            tickFormat: d => d.getFullYear()
          }
        ]}
        margin={{ left: 40, top: 0, bottom: 50, right: 20 }}
        interaction={{
          end: this.brushEnd,
          brush: "xBrush",
          extent: [new Date("1/2/1997"), new Date("1/2/2003")]
        }}
      />
   };
}

[emeeks]

Here's that code in semiotic-examples and it seems to be working fine:
https://github.com/emeeks/semiotic-examples/blob/master/src/LineBrush.js

I think the error you're experiencing is in d3-brush. I believe the event in D3 has issues in some build environments:

d3/d3#2733

As I understand Mike's position is that this is a failure in the toolchain and not an issue of D3 and I believe his response is that you should use a better build environment. If you or anyone else knows of or can find a workaround, I would be happy to implement it in Semiotic.

[jhvanderven]

This is not something I know enough off.
What kind of environment are you using?
I tried to find a create-react-app thingy using rollup, but what I found is not good enough.

Update: I switched to nwb and it just works. I would appreciate an explanation.

[emeeks]

I'm sorry I know and share your frustration, we had to scrap a brush implementation in one of our older dashboards because of this bug. At some point I will either implement a native react brush or write my own because of this.

[jhvanderven]

I am very happy with your library and even with the brush as it is now. Just one more question: can I set the selected extent to something else than the whole extent when the state changes?

[emeeks]

You can initialize the brush with a set extent by sending an extent array to interaction (as is done with the LineBrush example above) but there is no way to procedurally update the extent currently. I'll file a feature request for that, since it's an important feature.

[brianretford]

I believe this is related to having a separate copy of d3 inside the node modules of semiotic itself, as well as having them included in node-package. If I rm -rf node_modules/semiotic/node_modules the problem does away

[emeeks]

You're saying you see d3 installed in the node_modules of semiotic or a different d3-* version than what you've got in your main project?

[brianretford]

Yes, #1, and also in my main project, at least using create-react-app

…

On Mon, Apr 16, 2018, 6:44 PM Elijah Meeks ***@***.***> wrote: You're saying you see d3 installed in the node_modules of semiotic or a different d3-* version than what you've got in your main project? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://github.com/emeeks/semiotic/issues/55#issuecomment-381803032>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARnZ6ecdKqzXYlfrM0pGD7N-0-jgJ_dWks5tpUkEgaJpZM4PrMUe> .

[emeeks]

Could you share with me the repo somehow (privately or with the identifying bits obscured). That shouldn't be happening, there shouldn't be any dependencies anywhere to d3 itself.

[brianretford]

It's pretty 'easy' to reproduce, though I think I have the reason it occurs wrong. Steps:

• Create a component that uses MinimapXYFrame
• Use npx create-react-app broken, and then add your custom component to it after doing yarn add semiotic -- broken
• Use nwb init react-app working, add your component, npm install --save semiotic and everything works
• If you delete the nested node_modules in broken, everything magically works.

Comparing the lock files, it appears that the yarn-lock file has multiple version of some d3 components in it:

d3-collection@1, d3-collection@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"

[email protected]:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.1.tgz#5b5c5626f731122b600b107d71a08833fec049ad"

Things like this seem to be caused by yarn recording transitive dependencies and npm not, it's way past my ken to understand these things though.

yarn culprit:

[email protected]:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.0.2.tgz#92dbedeacf9a2d3f6686450c8d6375f3c363af66"
  dependencies:
    d3-collection "1"
    d3-dispatch "1"
    d3-quadtree "1"
    d3-timer "1"

You can see that it depends on generic version 1 of a lot of components, which then result in yarn having a version war as seen above. Wish I could say how to fix it.

[brianretford]

One possible solution might be to remove the very specific dependencies in semiotic, maybe only depend on 1.0, or maybe even just 1

from yarn.lock:

[email protected]:
  version "0.2.5"
  resolved "https://registry.yarnpkg.com/semiotic-mark/-/semiotic-mark-0.2.5.tgz#4b7bed8fc0c2788fe7b31a2ffbe9366c811140df"
  dependencies:
    d3-interpolate "1.1.5"
    d3-scale "1.0.3"
    d3-selection "1.1.0"
    d3-shape "1.0.3"
    d3-transition "1.0.3"
    prop-types "15.6.0"
    roughjs "github:emeeks/rough"

semiotic@^1.9.4:
  version "1.9.4"
  resolved "https://registry.yarnpkg.com/semiotic/-/semiotic-1.9.4.tgz#93d7bc95d4e6e0fce7d5ca7f5909533ef1f0d95c"
  dependencies:
    "@mapbox/polylabel" "1.0.2"
    babel-plugin-external-helpers "^6.22.0"
    babel-runtime "6.26.0"
    d3-array "1.2.0"
    d3-bboxCollide "1.0.3"
    d3-brush "1.0.4"
    d3-chord "1.0.4"
    d3-collection "1.0.1"
    d3-contour "1.1.1"
    d3-force "1.0.2"
    d3-glyphedge "1.2.0"
    d3-hierarchy "1.1.3"
    d3-interpolate "1.1.5"
    d3-sankey-circular "0.23.0"
    d3-scale "1.0.3"
    d3-selection "1.1.0"
    d3-shape "1.0.4"
    d3-voronoi "1.0.2"
    element-resize-event "github:emeeks/element-resize-event"
    json2csv "3.11.5"
    labella "1.1.4"
    prop-types "15.6.0"
    react-annotation "1.1.1"
    roughjs "github:emeeks/rough"
    semiotic-mark "0.2.5"
    svg-path-bounding-box "1.0.4"

from packages-lock.json:

"semiotic": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/semiotic/-/semiotic-1.9.3.tgz",
      "integrity": "sha512-qfFIW/nVrEkisZwxxX+na0+r6jgrC+cw1j/xNIzsHdPgbX5isk7ZUB0/AATdcJLf1oyuw5El9IkS564Bcpvjyg==",
      "dependencies": {
        "prop-types": {
          "version": "15.6.0",
          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
          "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY="
        }
      }
    },
    "semiotic-mark": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/semiotic-mark/-/semiotic-mark-0.1.2.tgz",
      "integrity": "sha1-Df03WwAf25Oexh0gsAFuZxX4fhA=",
      "dependencies": {
        "d3-shape": {
          "version": "1.0.3",
          "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.0.3.tgz",
          "integrity": "sha1-v2hdz8GS7R01o5/2mCakCak4UDQ="
        },
        "d3-transition": {
          "version": "1.0.3",
          "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.0.3.tgz",
          "integrity": "sha1-kdyYa92zCXNjkyCoXbcs5KsaJ7s="
        },
        "prop-types": {
          "version": "15.6.0",
          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
          "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY="
        }
      }
    },

[emeeks]

Yes you're right, I'll clean up dependencies on my next version. I know these exact version dependencies have caused some hassle with other libs.

[brianretford]

Cool, let me know if I can help. I tried 4 different d3 vis frameworks and this one came out on top, especially for large datasets. As a maintainer of https://github.com/plaidml/plaidml I totally understand how complicated this stuff can get. Really appreciate semiotic!

…

On Tue, Apr 17, 2018, 10:01 AM Elijah Meeks ***@***.***> wrote: Yes you're right, I'll clean up dependencies on my next version. I know these exact version dependencies have caused some hassle with other libs. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://github.com/emeeks/semiotic/issues/55#issuecomment-382067978>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARnZ6Qe7bUH95xiUxYEmupIQmECCOF1Uks5tph__gaJpZM4PrMUe> .

[emeeks]

I just published 1.9.6 that unfixes all the D3 deps, which also references a new version of semiotic-mark that does the same. Let me know if that helps or causes other issues.