Skip to content

Instantly share code, notes, and snippets.

Matthew Conlen mathisonian

Block or report user

Report or block mathisonian

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
mathisonian / example.idyll
Last active Mar 30, 2020
Example question component that is only shown after a previous question is answered correctly. I haven't tested this but it should provide the basic structure.
View example.idyll
How to use:
[var name:"q1Correct" value:false /]
[Question options:`["test1", "test2"]` trueAnswer:"test1" correct:q1Correct /]
[var name:"q2Correct" value:false /]
[Question options:`["test1", "test2"]` trueAnswer:"test2" correct:q2Correct showAfter:q1Correct /]
mathisonian /
Last active Feb 11, 2020
Loading data with Parcel

This is a quick guide to loading static files with Parcel. There are two ways to load data in JavaScript:

  • including the data in the JavaScript bundle itself
  • fetching the data as an external resource

Including data directly in the JavaScript bundle

This is the preferred way of doing things if your data payload is relatively small (<1 MB) as it will lead to fewer network requests (which often gives better perfromance).

mathisonian / nav.js
Last active Jul 11, 2019
Nav Component
View nav.js
const React = require('react');
class CustomComponent extends React.Component {
render() {
const { hasError, idyll, updateProps, ...props } = this.props;
return (
<div style={{position: 'fixed', top: 0, left: 0, right: 0, display: 'flex', padding: '1em', background: '#000', justifyContent: 'space-between'}}>
<div style={{fontWeight: 'bold', fontSize: '2em', color: '#fff'}}>MY BLOG</div>
<div style={{display: 'flex'}}>
<div style={{fontSize: '1.5em', color: '#fff', marginRight: '1em'}}>A Link</div>
mathisonian / youtube.js
Last active Aug 23, 2018
Idyll Youtube Component
View youtube.js
import React from 'react';
let YouTube;
class YoutubeComponent extends React.Component {
constructor(props) {
this.state = {
mounted: false
mathisonian / d3-component.js
Last active Dec 4, 2017
Example stepper / play / pause
View d3-component.js
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
const size = 600;
class CustomD3Component extends D3Component {
initialize(node, props) {
View filter.js
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
class FilterComponent extends D3Component {
initialize(node, props) {
// instead of adding an svg, add a canvas
var canvas ="canvas")
mathisonian / mycomponent.js
Created Nov 27, 2017
injecting props in Idyll component
View mycomponent.js
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.PureComponent {
unwrapChildren() {
return => {
if (c => && === 'wrapper') {
return c.props.children[0];
return c;
View slideshow.js
const React = require('react');
const IdyllComponent = require('idyll-component');
const Slide = require('./slide');
class Slideshow extends IdyllComponent {
getChildren(children) {
let processedChildren = [];
React.Children.forEach(children, (child) => {
if (typeof child === 'string') {

Setting value on a variable just defines its initial value, if you want a variable that updates derived variables are available:

[var name:"x" value:1 /]
[derived name:"dataToBeCharted" value:`[ {x: 0, y: 0.5}, {x: 3.5, y: 0.5}, {x: 4, y: x}, {x: 4.5, y: 2}, {x: 5, y: 0.5}, {x: 8, y: 0.5} ]` /]

[Range value:x min:0 max:100 step:5/]
[Display value:x /]
mathisonian / spec.json
Created Jan 19, 2017
An example vega spec
View spec.json
"schema": {
"language": "vega",
"version": "3.0"
"width": 500,
"height": 200,
"padding": 5,
"data": [
You can’t perform that action at this time.