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
Ricky Reusser
@rreusser
a plugin could download the notebook and write the loader script
long story short, if modules are tolerable, this approach allows regular idyll + observable notebooks via modules
Ricky Reusser
@rreusser
to be honest though, I can't remember what problem I was trying to solve by switching to js modules, and I'm considering just taking my mechanism for maintaining a global cache of notebooks so you can include cells one at a time and applying it to the existing plugin :/
Ricky Reusser
@rreusser
This message was deleted
ReferenceError: regeneratorRuntime is not defined hmm… that was one issue at least…
Matthew Conlen
@mathisonian
@rreusser sorry i haven't had a chance to look through this yet
is this loading the code at runtime from observable's api?
or still needs to download the notebook
Ricky Reusser
@rreusser
all good. it still needs to download the notebook
but the difference is:
it downloads the new module version, which maybe doesn't have the same regeneratorRuntime issues and doesn't actually need to be compiled into the app
it's just static assets
and it adds a script tag to load the notebook outside of the idyll/react context and communicates back to idyll/react via window
Matthew Conlen
@mathisonian
ahhh okay
Ricky Reusser
@rreusser
I think I maybe liked not actually building the notebook into the JS and just loading it as static assets
the only caveat:
for reasons I don't understand, module type scripts can't introspect their own script element as a means of passing data, and it can't resolve imports if the script was created via a data URL, so the only remaining option is to generate a small loader script to get the right static asset paths in place
other than that the react element doesn't need to change though, which I think is a plus (doesn't need to fail on the first time since the only generated content is loaded at runtime via a script tag)
I finally got the idyll on my site fully updated and working, so I was hoping to finally clear a nice pathway for importing notebook content into it
Ricky Reusser
@rreusser
I think the main concern is just: are module scripts acceptable
if so, I think this is a good strategy. if not, then the other approach seems necessary.
Matthew Conlen
@mathisonian
I would think they're acceptable. the main downside would be SSR and old browser compatibility?
i don't think the other approach solves the SSR problem anyways
Ricky Reusser
@rreusser
yeah. didn't want to get too fancy before it works, but was thinking could just have a static image fallback until it loads and for SSR
Geoffrey Litt
@geoffreylitt

I'm trying to get idyll-vega-lite working -- first got { Error: Cannot find module 'core-js/modules/es.array.concat', so i did npm install core-js and that fixed it.

but now i'm getting this error when i include the VL component:

SyntaxError: Unexpected token (1258:10) while parsing file: /Users/geoffreylitt/dev/carbon-majors/node_modules/vega-parser/build/vega-parser.js

anyone familiar with this error?

Matthew Conlen
@mathisonian
ugh this vega lite component is causing so many headaches
@geoffreylitt what OS are you on?
i would try to run idyll with the --no-minify flag, that error looks to me like it may be coming from our JS minifier
Geoffrey Litt
@geoffreylitt

@mathisonian thanks -- I'm on OS X Mojave.

I tried --no-minify but still getting the same error. The stack trace points to acorn, a JS parser:

SyntaxError: Unexpected token (1258:10) while parsing file: /Users/geoffreylitt/dev/carbon-majors/node_modules/vega-parser/build/vega-parser.js
    at Parser.pp$4.raise (/Users/geoffreylitt/dev/carbon-majors/node_modules/acorn/dist/acorn.js:2840:15)
    at Parser.pp.unexpected (/Users/geoffreylitt/dev/carbon-majors/node_modules/acorn/dist/acorn.js:689:10)
for now i think i'm gonna try d3 instead and avoid vega-lite
Jonne Arjoranta
@jaranta
Hey everyone! I'm trying to figure out idyll (https://github.com/jaranta/gendered-computing-idyll), but I'm not so familiar with these things. Could anyone help me figure out what "The time type is a line chart that expects the x values in the data to be in the temporal domain." means in the Chart documentation?
Matthew Conlen
@mathisonian
hey @jaranta that just means that it wants JavaScript date objects
that sentence is way too academic
so the data could be something like [{x: new Date(), y: 1 }]
Jonne Arjoranta
@jaranta
@mathisonian oh, right. Thanks for the clarification!
Jonne Arjoranta
@jaranta

It seems that whatever Date object I give to the Chart, I get a bunch of syntax errors. The minimal example would be:

[var name:"computerScienceDegrees" value:`[
  {year: New Date(), percent: 12},
]` /]
[Chart type:"time" data:computerScienceDegrees domain:`[1968, 2006]` range:`[0, 50]` x:"year" y:"percent" /]

The page is built, but not before I get an Unexpect token error. Am I misusing the Chart somehow?

Matthew Conlen
@mathisonian
@jaranta i think that syntax error is because New is capitalized
[var name:"computerScienceDegrees" value:`[
  {year: new Date(2019, 0, 1), percent: 12},
  {year: new Date(2019, 1, 2), percent: 13},
  {year: new Date(2019, 2, 3), percent: 14},
]` /]
[Chart type:"time" data:computerScienceDegrees domain:`null` range:`[0, 50]` x:"year" y:"percent" /]
this is working for me though the x-axis labels are a little wonky. i'm passing in null to the domain so that it is computed automatically from the data
Jonne Arjoranta
@jaranta
@mathisonian you're right! That fixed the syntax error, but I can't seem to get the x-axis labels to work, which is what I was originally struggling with. I'd like a nice date chart, but for some reason I get numbers starting from 2 million instead of dates.
Matthew Conlen
@mathisonian
yeah, i'm seeing that too
i'm working on a patch to the vega-lite chart component right now, which is honestly a more solid option and will probably be the default going forward in the next version bump
if you can wait a couple of days for that to land i'd recommend switching over and not fighting the chart component on the labels
Jonne Arjoranta
@jaranta
Okay, I'll do that! Thanks.
Kitt
@gerudo7
Hi, I am using Idyll to make some worksheets for a class and wanted to create multiple choice questions using radio buttons
which give some kind of text feedback to students after a submit button is pressed. What is the best way to go about doing this in Idyll/are there special Idyll functions for this sort of thing?
Kitt
@gerudo7

Update: we have figured out how to set up the multiple choice with a display and it is working nicely. Another thing we are interested in doing is requiring students to get an answer right before they move on.
Is there an elegant way to go about doing this? (All I can think of is to hide everything in a conditional which is probably
not a good idea.)

This is how we have set up the template quiz so far, if you have any suggestions they are appreciated :)

[var name:"radioVal" value:"test1" /]
[var name:"showAnswer" value:false /]
[Radio value:radioVal options:`["test1", "test2"]` onClick:`showAnswer = false` /]

[Button onClick:`showAnswer = true`]
  Submit
[/Button]

[Conditional if:`showAnswer && radioVal === "test1"`]
  You answered [Display value:`radioVal`/]. This is correct!
[/Conditional]
[Conditional if:`showAnswer && radioVal === "test2"`]
  You answered [Display value:`radioVal`/]. Please consider x. This is incorrect.
[/Conditional]
Matthew Conlen
@mathisonian
hey @gerudo7 i think your instinct is right that using a conditional would be the most straightforward way of building that functionality, although it may not be the prettiest markup
I think you could also abstract this logic into a component, for example make a "question" component that takes as input a list of options, as well as any other questions that have to be answered before it appears on the page
[var name:"q1Correct" value:false /]
[var name:"q2Correct" value:false /]

[Question options:`["test1", "test2"]` correct:q1Correct  /]

[Question options:`["test1", "test2"]` showAfter:q1Correct correct:q2Correct  /]
e.g. an api kind of like that
Matthew Conlen
@mathisonian