Widget Menagerie

Widget Menagerie.carbide.md

Widget Menagerie

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/72b590da30a9d3144d86fb58c5371bf4).

cell0.js

///SelectorWidget
var x = ['horse', 'staple', 'amnesia']
console.log(x[1])

cell1.js

///SliderWidget
var f = 45,
    c = (f - 32) / 1.8
f - c

cell10.js

/// GridArrayWidget
[
  {"sepalLength": 5.1, "sepalWidth": 3.5, "petalLength": 1.4, "petalWidth": 0.2, "species": "setosa"},
  {"sepalLength": 5.0, "sepalWidth": 3.3, "petalLength": 1.4, "petalWidth": 0.2, "species": "setosa"},
  {"sepalLength": 6.2, "sepalWidth": 2.9, "petalLength": 4.3, "petalWidth": 1.3, "species": "versicolor"},
  {"sepalLength": 5.1, "sepalWidth": 2.5, "petalLength": 3.0, "petalWidth": 1.1, "species": "versicolor"},
  {"sepalLength": 5.7, "sepalWidth": 2.8, "petalLength": 4.1, "petalWidth": 1.3, "species": "versicolor"},
  {"sepalLength": 6.3, "sepalWidth": 3.3, "petalLength": 6.0, "petalWidth": 2.5, "species": "virginica"},
  {"sepalLength": 6.2, "sepalWidth": 3.4, "petalLength": 5.4, "petalWidth": 2.3, "species": "virginica"},
  {"sepalLength": 5.9, "sepalWidth": 3.0, "petalLength": 5.1, "petalWidth": 1.8, "species": "virginica"}
]

cell11.js

/// FormObjectWidget
var x = {"sepalLength": 5.9, "sepalWidth": 3.0, "petalLength": 5.1, "petalWidth": 1.8, "species": "virginica"}

cell12.js

/// ObjectInspector
var object = {Hello: 'doge', what: ['is', 'up']}

cell13.js

/// JSONDiffWidget
import _ from 'lodash'
_.isEqual({Hello: "doge", what: ['is', 'up']},
          {hello: 'hal', what: ['is', 'love']})

cell14.js

/// StringDiffWidget
"StringDiffWidget" === "stringbean"

cell15.js

/// SimpleMapWidget
var places = [{"lat":42.293564192170095,"lon":-69.9609375},{"lat":25.48295117535531,"lon":-44.29687499999999},{"lat":10,"lon":-69},{"lat":42,"lon":-90},{"lat":12,"lon":-1}]

cell16.js

/// SinglePointMapWidget
var MIT = {lat: 42.3601, lon:-71.0942}

cell17.js

/// JSONWidget
var record = {"record":{"probably":{"conforms":["to","some","special","schema"]}}}

record.record.probably.conforms[1]

cell18.js

/// Chart1DWidget

var points = []
for(var i = -50; i < 50; i++){
    points.push(Math.sin(i/25))
}
points

cell2.js

///ColorPickerWidget
"red"

cell3.js

///TextWidget
var x = "dlroW olleh"
x.split('').reverse().join('').toUpperCase()

cell4.js

///MatrixWidget
[[1,2,3], [4,5,6]]

cell5.js

/// BufferWidget
var res = await fetch('https://i.imgur.com/S2AinSB.jpg')
var arrBuf = await res.arrayBuffer()
new Buffer(arrBuf)

cell6.js

/// HTMLElementWidget
var img = document.createElement('img')
img.style.width ='100%'
img.src = 'https://i.imgur.com/S2AinSB.jpg'

cell7.js

/// ReactRenderWidget
import React from 'react'
import Spinner from 'react-spinner';
<div style={{padding: 200}}>
	<Spinner/>
</div>

cell8.js

/// RandExpWidget
/([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})/g

cell9.js

/// DateTimeWidget
new Date("2016-08-10T10:08:50.200Z")