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
@drscotthawley the final "output" that idyll creates is always a static webpage, its just during development that you are working with nodejs
the reason for this is that there is essentially a compile step, where we bundle up any javascript dependencies you are using, convert the markdown to html, etc
Scott H. Hawley
@drscotthawley
@mathisonian Ok thanks!
Abednego Mwanza
@AbednegoTM
Screen Shot 2020-12-21 at 9.54.41 AM.png

Screen Shot 2020-12-21 at 9.54.41 AM.png

Is there workaaround to this. I want the counting to continue on a separate idyll rendered page. I created some sort of slides each slide is an idyll renderer, e.g slide 1 has a numbered list 1-5 and slide 2 should have for example 6-10

Mary McGrath
@mcmcgrath13
Hello! I'm a Research Software Engineer at Brown University and am exploring using Idyll for an upcoming web project which includes some model/math explanation as part of a bigger app. I have gotten idyll working as a React component within a Vue app, but when using a scroller, it doesn't scroll back up nicely (just the text then finally the graphic) - any theories on this? I tried using the editor, but that doesn't show the scroller at all.
image.png
# Hello, World

[var name:"scrollerIndex" value:0 /]
[var name:"scrollerChartData" value:`[0.5, 0.3, 1.2, 0.4, 5, 4, 2, 0.4]` /]

[Scroller currentStep:scrollerIndex]
  [Graphic style:`{padding: 50}`]
      [Chart type:`"line"` data:`scrollerChartData.slice(0, scrollerIndex + 2)` animate:`{ duration: 500 }` domain:`[-1, scrollerIndex+1]` range:`[-1, Math.max(...scrollerChartData.slice(0, scrollerIndex + 2))]`/]
      [Display value:scrollerIndex /]
  [/Graphic]


  [Step]## Hey, neat, here's some data![/Step]
  [Step]## ...   [/Step]
  [Step]## ...  What's that more data?![/Step]
  [Step]## Hmm...[/Step]
  [Step]## Too much data.[/Step]
  [Step]## Stop.[/Step]
  [Step]## that.[/Step]
  [Step]## data[/Step]

[/Scroller]

## End
Birgit Pauli-Haack
@bph_twitter
Screen Shot 2021-01-12 at 2.33.43 PM.png
Hi everyone... I am my first baby steps and want to start easy with a pie chart, like this.
Screen Shot 2021-01-12 at 4.20.28 PM.png
I have data in the table I am puzzled what would be the values for the domain attribute and the range attribute to show a successful pie chart?
[data name:'byCause' source:'byCause-data.csv' /]
[Table data:byCause /]
[Chart type:"pie" title: Giving by cause data:byCause domain: [2, 7] range:[0] theme:material /]
Birgit Pauli-Haack
@bph_twitter
Documentation is pretty slim picking for this or I am not smart enough to use this....
Matthew Conlen
@mathisonian
hi @bph_twitter i'm taking a look
@mcmcgrath13 are you able to share a demo with how it is breaking?
its possible its missing some CSS if you are using it outside of the idyll command line tool
Matthew Conlen
@mathisonian
okay @bph_twitter it looks like you may need to slightly reformat your data to make it work with the current pie chart component
Screen Shot 2021-01-12 at 3.31.47 PM.png
it wants the columns to be named x and y
(not ideal... i'm looking into why the data accessors aren't doing this automatically)
but if you format the data like that it should work
Screen Shot 2021-01-12 at 3.32.52 PM.png
then you actually don't need to add domain or range, it should be fine without
but you can define the color scale there
Matthew Conlen
@mathisonian
fwiw in the future we're going to switch over to vega lite as the default chart solution rather than the current one which has all these weird quirks
Mary McGrath
@mcmcgrath13
@mathisonian here's a screen capture of what's happening. I think I grabbed a full set of css from the idyll-themes and idyll-layouts. Is there other css I missed?
Mary McGrath
@mcmcgrath13
added a gif to the readme: https://github.com/mcmcgrath13/idyll-vue
Birgit Pauli-Haack
@bph_twitter
Thanks so much @mathisonian for taking the time. I'll take another shot at it tomorrow! 👏👍
Matthew Conlen
@mathisonian
that should be it @mcmcgrath13. thanks for uploading the example, i will take a closer look tomorrow
sounds good @bph_twitter let me know if you are still running into trouble
Birgit Pauli-Haack
@bph_twitter
Screen Shot 2021-01-13 at 4.48.22 PM.png
@mathisonian - I am almost there... however the legend are cut off on the fringes and the colorScale doesn't take colors in with hex-values? Are there style props that could be added?
moving to vega lite would be a great move.
I wished I could help.... :-)
Matthew Conlen
@mathisonian
@bph_twitter try adding svg { overflow: visible } to the CSS to deal with the labels being chopped off
you can use vega lite now but have to install it on your own (relatively painless) https://github.com/idyll-lang/idyll-vega-lite
hrmm the colorScale should accept hex.... does it work if you use just normal color names (like 'blue', 'red', etc)
Birgit Pauli-Haack
@bph_twitter
Oh, I place the backticks inside the brackets - duh... the colors work. CSS addition to for svg didn't take, though.
Matthew Conlen
@mathisonian
oh the CSS is a specificity issue i think
try
.VictoryContainer svg {
  overflow: visible;
}

or

svg {
  overflow: visible !important; 
}

both should work

Birgit Pauli-Haack
@bph_twitter
That works, too. Thank you so much! Can the Victory piechart take on different forms, too like the vega lite? Where could I find out?
Matthew Conlen
@mathisonian
there are some options to play with though it isn't as flexible in vega lite
Birgit Pauli-Haack
@bph_twitter
Understood. So glad, I have it all wired up I can do some experiments. Thank you so much for your help!
Matthew Conlen
@mathisonian
np! glad its working
Birgit Pauli-Haack
@bph_twitter
:smile:
xyquadrat
@xyquadrat:kde.org
[m]
Hello people, just started diving into Idyll - really nice so far. I'm planning to use Idyll to make explorable models of climate policy in Switzerland. The necessary things generally seem to be in place, but for one problem I haven't been able to discern how to solve it: Localization. Is it possible to localize date formats, the "By" tag etc. without having to change Idyll source code directly?
I haven't found anything related to this, though maybe I also just used the wrong search terms ;)