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
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
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.
# 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
Hi everyone... I am my first baby steps and want to start easy with a pie chart, like this.
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:
[Table data:byCause /]
[Chart type:"pie" title:
Giving by cause data:byCause domain: [2, 7] range:[0] theme:material /]
@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
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
then you actually don't need to add domain or range, it should be fine without
but you can define the color scale there
sounds good @bph_twitter let me know if you are still running into trouble
@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.... :-)
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)
try
.VictoryContainer svg {
overflow: visible;
}or
svg {
overflow: visible !important;
}both should work
there are some options to play with though it isn't as flexible in vega lite
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 ;)