Reproduction of a real asset allocation glide path chart using D3 and D3FC.
It shows the investment fund moving towards safer assets as the target date nears.
Uses ES6 features, so you need a modern browser.
Reproduction of a real asset allocation glide path chart using D3 and D3FC.
It shows the investment fund moving towards safer assets as the target date nears.
Uses ES6 features, so you need a modern browser.
Displays investment compound annual growth rates over all time frames. Rows represent start years from 1986, columns represent number of years the investment was held for.
Inspired by the Portfolio Charts website's heat map - calculator, explanation.
FTSE All-Share Index yearly return data from http://www.swanlowpark.co.uk/ftseannual.jsp
References for CAGR calculation in code comments.
Displays investment compound annual growth rates over all time frames. Rows represent start years from 1986, columns represent number of years the investment was held for.
Dynamic scale using ckmeans data clustering algorithm. This assigns the colours to groups with minimal differences in their values. A dynamic scale makes the visualisation usable on a wide variety of data, but makes it difficult to compare different sets of data (the scales would be different). In this implementation, it also results in a non-nice scale.
Inspired by the Portfolio Charts website's heat map - calculator, explanation.
FTSE All-Share Index yearly return data from http://www.swanlowpark.co.uk/ftseannual.jsp
References for CAGR calculation in code comments.
# put in ~/.bashrc | |
alias git='gitwrapper' | |
gitwrapper () { | |
if [ "$1" == 'reset' ] && [ "$2" == '--hard' ]; then | |
\git status --short | |
read -n 1 -p 'Continue with hard reset (y/n)? ' answer | |
if [ "$answer" == 'y' ]; then |
Companion gist for blog post: Mapping currency strength changes with D3
Displays currency strengthening or weakening against other world currencies, between a reference date in the past and today.
Try it out - click to change the base country, use the picker to change the reference date. Data is available from the start of 2000.
Uses ES6 features, so you need a modern browser.
World map: https://github.com/topojson/world-atlas
Companion gist for blog post: Mapping currency strength changes with D3
Displays currency strengthening or weakening against other world currencies, between a reference date in the past and today.
Try it out - click to change the base country, use the picker to change the reference date. Data is available from the start of 2000.
Uses ES6 features, so you need a modern browser.
import * as d3 from 'd3'; | |
import PropTypes from 'prop-types'; | |
import React, { PureComponent } from 'react'; | |
/** | |
* Adapter for using D3 components in React. | |
* | |
* To be compatible, D3 components must follow the reusable component convention | |
* as proposed by Mike Bostock: https://bost.ocks.org/mike/chart/ | |
* |
const dependencyCssRule = { | |
}; | |
function sassRule(options) { | |
return { | |
test: 1, | |
use: [ | |
// use options.prod to turn off sourcemaps | |
// use options.prod to set sass outputStyle compressed/not |