View basic_lifecycle.js
export default function addAnimation(animateIn, animateOut) {
return function wrapComponent(WrappedComponent) {
return class AnimationHOC extends Component {
state = { animatingOut: false }
componentDidMount() {
if (this.props.isVisible) animateIn(this.child)
}
View FLIP_animation_function.js
export function animateGroups (ListComponent) {
const items = [...ListComponent.querySelectorAll('.item')]
const oldPositionDict = items.reduce((acc, item) => {
acc[item.dataset.id] = item.getBoundingClientRect()
return acc
}, {})
return function initiateAnimation () {
const transformPositionDict = {}
// Make sure to get the new array of item elements --
// React might have destroyed and created new DOM nodes
View deduped.json
[
{
"id": "599c0898836966aa1f000126",
"learner_name": "Elke",
"learner_email": "elke.blinick@gmail.com",
"submit_date": "2017-08-22T06:34:00-04:00",
"content_item_id": "a031e4700a8ba8ccd5a86e8be990e6f6",
"program_id": "2c28fb69a68f1e84ac42d565a2c9b254",
"repo_url": "https://github.com/eblinick/prj-rev-bwfs-dasmoto",
"reviewed_at": null,
View .script-compiled.js
// load the data, find the svg container in the dom,
// and call createMap
d3.json('map-data.json', function(error, data){
var svg = d3.select('svg')
createMap(svg, data)
})
// put all logic in a nice reusable function
function createMap(svg, data) {
View .script-compiled.js
d3.json('./stock-data.json', function(error, data){
createChart(document.querySelector('svg'), data)
})
// ========================================================
// I like to encapsulate d3 logic in a createChart function that returns an update
// function -- this makes it easy to re-use the logic e.g. with React
// ========================================================
function createChart (svg, data, options) {
View .script-compiled.js
/*eslint no-undef: 0*/
function createChart (svg, data) {
// //normalize data
// Object.keys(data).forEach((d)=>{
// ["0", "1", "2", "3", "4", "5", "6"].forEach(k=>{
// if (d[k] === undefined) d[k] =
// })
// })
View .script-compiled.js
var svg = d3.select('svg')
var margin = {top: 40, right: 40, bottom: 40, left: 40}
var width = svg.attr('width') - margin.left - margin.right
var height = svg.attr('height') - margin.top - margin.bottom
var g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
var data = d3.range(100000).map(function (n){
if (n % 1000 === 0){
return { x : n, y : n}
}
View sample_snippets.cson
".source.js":
"Mocha it()":
"prefix": "it("
"body": "it('$1', () => {$2})"
"functional component":
"prefix": "functional component"
"body": """
import React, {PropTypes} from 'react'