aholachek

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch current file",
      "type": "node",
      "request": "launch",
      "program": "${file}",
      "runtimeExecutable": "${env:HOME}/.nvm/versions/node/v8.4.0/bin/node"
    },

aholachek

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)
      }

aholachek

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

aholachek

// 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) {

aholachek

gistup

aholachek

gistup

aholachek

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) {

aholachek

/*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] =
  //   })
  // })

aholachek

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}
  }

aholachek

  ".source.js":
    "Mocha it()":
      "prefix": "it("
      "body": "it('$1', () => {$2})"

    "functional component":
      "prefix": "functional component"
      "body": """
        import React, {PropTypes} from 'react'