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")
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 /]
View spec.json
{
"schema": {
"language": "vega",
"version": "3.0"
},
"width": 500,
"height": 200,
"padding": 5,
"data": [
{
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');
View .gitignore
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
View test.js
var Lightning = require('lightning.js');
var lightning = new Lightning();
lightning.lineStreaming([1,1,2,3,5,8,13,21])
.then(function(viz) {
viz.open()
setInterval(function() {
viz.appendData([Math.random()]); // appends to existing data