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
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
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) {
super(props);
this.state = {
mounted: false
}
@mathisonian
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 = d3.select(node).append("canvas")
@mathisonian
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 this.props.children.map((c) => {
if (c => c.type.name && c.type.name.toLowerCase() === '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') {
View index.md

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
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": [
{
@mathisonian
mathisonian / index.js
Last active Sep 9, 2016
requirebin sketch
View index.js
document.body.style.margin = 0;
document.body.style.padding = 0;
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.body.appendChild(document.createElement('canvas'))
const fit = require('canvas-fit');
const bezier = require('bezier');
View index.js
document.body.style.margin = 0;
document.body.style.padding = 0;
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.body.appendChild(document.createElement('canvas'))
const fit = require('canvas-fit');
const bezier = require('bezier');
You can’t perform that action at this time.