Mouse over a node to view the ensuing flow to the right of the diagram.
This diagram combines svg gradients and svg path animation to visualize flow through a sankey diagram.
View the original d3 sankey example.
gistup |
// 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) { |
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) { |
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 |
{ | |
"compilerOptions": { | |
"baseUrl": ".", | |
"paths": { | |
"*": [ | |
"*", | |
"components/*", | |
"portal/*", | |
"platform/*" | |
] |
// a handler object specifies which methods to proxy | |
// this one will simply override JavaScript’s default object get method | |
const loggingHandler = { | |
get(target, property) { | |
const val = target[property] | |
console.log(`Property "${property}" returned "${JSON.stringify(val)}"!`) | |
return val | |
} | |
} |
Mouse over a node to view the ensuing flow to the right of the diagram.
This diagram combines svg gradients and svg path animation to visualize flow through a sankey diagram.
View the original d3 sankey example.
{ | |
"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" | |
}, |
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) | |
} |
import React, { Component } from "react"; | |
import ReactDOM from "react-dom"; | |
import { Flipper, Flipped } from "react-flip-toolkit"; | |
import "./styles.css"; | |
const listData = [0, 1, 2, 3, 4, 5, 6, 7]; | |
const colors = ["#6da5ff", "#7971ea", "#5900d8"]; | |
// we'll iterate over this array to create groups of 3 components | |
const baseArray = [...Array(3).keys()]; |