Skip to content

Instantly share code, notes, and snippets.

View mathisonian's full-sized avatar

Matthew Conlen mathisonian

View GitHub Profile
@mathisonian
mathisonian / d3-component.js
Last active December 4, 2017 23:06
Example stepper / play / pause
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
const size = 600;
class CustomD3Component extends D3Component {
initialize(node, props) {
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 November 27, 2017 21:08
injecting props in Idyll component
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;
var svg = d3.select('#example-2')
.append('svg')
.attr('width', '100%')
.attr('viewBox', '0 0 202 202');
var data = d3.range(10).map(function (d, i) {
return i;
});
@mathisonian
mathisonian / slideshow.js
Created August 14, 2017 18:02
slideshow
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') {
@mathisonian
mathisonian / index.md
Last active August 13, 2017 08:18
idyll vars

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 / requirify-browser.js
Created August 21, 2014 02:14
requirify-browser
!function e(r,o,t){function n(a,s){if(!o[a]){if(!r[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(i)return i(a,!0);throw new Error("Cannot find module '"+a+"'")}var d=o[a]={exports:{}};r[a][0].call(d.exports,function(e){var o=r[a][1][e];return n(o?o:e)},d,d.exports,e,r,o,t)}return o[a].exports}for(var i="function"==typeof require&&require,a=0;a<t.length;a++)n(t[a]);return n}({1:[function(e,r){function o(e,r){if("function"!=typeof r)throw new Error("Bad callback given: "+r);if(!e)throw new Error("No options given");var a=e.onResponse;if(e="string"==typeof e?{uri:e}:JSON.parse(JSON.stringify(e)),e.onResponse=a,e.verbose&&(o.log=i()),e.url&&(e.uri=e.url,delete e.url),!e.uri&&""!==e.uri)throw new Error("options.uri is a required argument");if("string"!=typeof e.uri)throw new Error("options.uri must be a string");for(var s=["proxy","_redirectsFollowed","maxRedirects","followRedirect"],d=0;d<s.length;d++)if(e[s[d]])throw new Error("options."+s[d]+" is not supported");if(e.callback=r,e.meth
@mathisonian
mathisonian / spec.json
Created January 19, 2017 00:06
An example vega spec
{
"schema": {
"language": "vega",
"version": "3.0"
},
"width": 500,
"height": 200,
"padding": 5,
"data": [
{
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');
@mathisonian
mathisonian / index.js
Last active September 9, 2016 01:28
requirebin sketch
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');