Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Oct 26 2017 18:46
    @mathisonian banned @krpx_division_twitter
  • Sep 22 2017 18:27
    @rreusser banned @krpx_group_twitter
Matthew Conlen
@mathisonian
i see an error in the js console in IE11 but it seems different from what you're seeing
Matthew Conlen
@mathisonian
@fabmeyer can you explain the expected outcome a little more -- TextInput is wired to push updates to idyll variables, but in this case its not clear what the value should be bound to
in React if the value of an input widget doesn't change, it will be stuck in that state in the Ui. to get updates to work you always have to provide an explicit update handler
i usually end up writing things this when passing properties down to nested components, the wrapping component can always inject additional properties on
[MyComponent]
  [TextInput value:someVar /]
[/MyComponent]
Fabian Meyer
@fabmeyer
@mathisonian Hmm, I expected the TextInput component to work out of the box (interacting with the component writes the value back into the prop) when I'm importing it like a react-component. If I'm using TextInput as a child and get it from the array (React.Children.toArray(this.props.children)) it works fine but the first approach would be cleaner I think?
Nat Steinsultz
@nsteins
Is there a way to get vega-lite components to auto-scale to the column width? When I set width: "container", the x-axis collapses to 0
Nat Steinsultz
@nsteins
Sorry for another question: Is there a way to make a js function accessible in Idyll? I'd like to be able to transform data using the derived variable syntax, but be able to write the transforming function in a different file for syntax help and legibilitiy
Matthew Conlen
@mathisonian
@nsteins you can inject functions in by using a custom context
see the "runtime context" documentation here
essentially you'll want to write your function, then add it to the context during the onInitialize event
once you've done that it should be available to be used inside any idyll expression
re: the vega-lite question.... i'm not sure, but i sit by some people who are more expert at VL than me, will ask this week
Nat Steinsultz
@nsteins
Thank you!
pravikaj
@pravikaj
I have embedded an apparatus component into my idyll page. Essentially I would like to animate my graphic by incrementing my transformationStep variable from 0 to 1 in steps of 0.01 while I am scrolling. Is there a way to increment a numeric variable in idyll?
Screen Shot 2019-12-01 at 8.38.20 PM.png
Alan Tan
@tanalan
Hi @pravikaj ! Yes, we can update variables by inserting them into a javascript expression.
I'm not too particular sure how to increment it for this use case though, since the scrolling as 3 steps (as opposed to 100 steps via 1/0.01)
This animation example may be a good starting point, but its variable updating is binded to an onClick function.
Alan Tan
@tanalan

I could see how we increment transformationStep in increments of 0.33 though (since there are 3 steps), with basing off the transformation prop of IdyllApparatusComponent via the scrollerIndex variable, since it'll be 1, 2, and 3, respectively:

[IdyllAppratusComponent
    ...other props
    transformation: `scrollerIndex / 3.0`
/]

But again, I'm unsure exactly how to get the 100 steps in here... I'll update if I think of something that could work

pravikaj
@pravikaj
thank you for your help!
Thomas Ansart
@TomBor
Hi, @pravikaj demand seem very similar to mine some weeks ago and @mathisonian create an issue for it: idyll-lang/idyll#589
avarobinson
@avarobinson
In my project, we have several button elements, and we would like to style them in multiple different ways. We originally adding styling to them in the style.css file by adding css to the .button tag. The problem with this is now we would like to add more buttons, but with different styles. Since we added the styling to ".button" they all end up looking the same. Is there any way to add classes or ids to built-in idyll components? Thanks!
Megan Vo
@megan-vo
@avarobinson I believe you can add the className property to a button like [button className:”newName”]...[/button]
And similarly to other built-in components as well!
avarobinson
@avarobinson
@megan-vo Thank you!!
Patrice Power
@plpower
I'm trying to make a button that will change its text value and variable value on click, but when I use this code I found in the documentation (https://idyll-lang.org/docs/components/default/conditional), my terminal tells me there is no 'Conditional' component. I've tried it with 'Case' similarly with no luck. Is there a way to download or access these components or a different way to write conditionals in Idyll?
Megan Vo
@megan-vo
Hmm do you know what current idyll version you are using? @plpower
You can find all the current default components here: https://github.com/idyll-lang/idyll/tree/master/packages/idyll-components/src . The most up-to-date version of idyll should be able to recognize Conditional I believe, but a quick fix should be to download the Conditional component file and put it in your components directory
Patrice Power
@plpower
thanks!
Also is there somewhere I can read or see an example of tooltips working in Idyll on a elements of a d3 component?
Thomas Ansart
@TomBor
Hi, I'm trying to use vega-tooltip in the vega-lite component of idyll. So far I made a yarn add vega-tooltip inside my idyll project and then reproduced this example unsuccessfully.
Am I missing something?
Matthew Conlen
@mathisonian
@TomBor @pravikaj yes thanks for pointing that out, that's the issue we have open for continuous variables on the scroller components. i would love to get that added (one of the earliest version of idyll had a similar feature that we ended up ripping out for performance issues and lack of usage, but browser have improved enough and our architecture is considerably better, so i think now's the time). I attempted to add the scrollama option that is supposed to give that value in a callback, however it didn't appear to work when I tried a couple of weeks ago. Possibly I was doing something wrong, or just an error in that library. If anyone has a little time to look more into that it would be :pray: :pray: :pray: :pray: . happy to guide to the parts of the codebase that would need to be adjusted
Matthew Conlen
@mathisonian
@TomBor I just tried to reproduce and got the same issue. seems like an issue somewhere in the react-vega-lite or react-tooltip lib. i made an issue for it (idyll-lang/idyll-vega-lite#1). it isn't clear to me exactly what's going wrong as I followed all the steps that were listed on the vega side, however this should definitely be fixed
@plpower if you're using D3 directly you have to bring your own tooltips (that's not something built in). the good news though is that they are relatively straightforward to add. here's a very bare-bones example, and you can add your own custom styles etc from there: http://bl.ocks.org/biovisualize/1016860
were you able to get the conditional problem figured out?
Matthew Conlen
@mathisonian
@TomBor after poking around with it for a bit i got tooltips working locally
tooltips-basic.gif
i'll push a new release of idyll-vega-lite that has the fixes and tooltips enabled by default so you don't have to install the extra package
Thomas Ansart
@TomBor
Thanks! Great news, I will test it as soon as the release will be published.
Thomas Ansart
@TomBor
error-idyll-vega-lite.png
@mathisonian With the release publish, I tried to make it worked in an existing project without success. I updated to last version of idyll and idyll-vega-lite and got this error :
ReferenceError: window is not defined
    at /Users/80526/www/LF-anthropocene/node_modules/vega-embed/build/src/embed.js:17:11
    at /Users/80526/www/LF-anthropocene/node_modules/vega-embed/build/vega-embed.js:2:85
    at Object.<anonymous> (/Users/80526/www/LF-anthropocene/node_modules/vega-embed/build/vega-embed.js:5:2)
Matthew Conlen
@mathisonian
hey @TomBor what happens if you run idyll --ssr=false
i think the problem is that the tooltip library assumes its being run in a browser and not as a server side render. thanks for the heads up - i'll push a patch for this but i think in the meantime the above command should fix your issue
Thomas Ansart
@TomBor
Yes ! It's working with your command. Thanks !
Thomas Ansart
@TomBor

I saw that scroll progress have been implemented! I will add it to an article I wrote with a colleague on deforestation in Amazonia.
Article (in french): https://ateliercartographie.github.io/BR163/
Source code: https://github.com/AtelierCartographie/BR163
If it deserves to appear in the gallery of idyll, we would be delighted.

And thanks for this great tool!

Matthew Conlen
@mathisonian
that looks great @TomBor! super cool, would be happy to add it to the gallery
i haven't published the latest version with scroll progress included, going to get through the backlog of PRs and push a new release this week
Matthew Conlen
@mathisonian
just pushed a release (changelog here: https://github.com/idyll-lang/idyll/blob/master/CHANGELOG.md)
Thomas Ansart
@TomBor
Great!!!
I take time today to add scroll progress to the article. It's ready and online!