Published
Edited
Apr 30, 2019
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
$("#restartButton").wrap('<div class="flex-container"></div>');
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height = width*0.55
Insert cell
Insert cell
brandData = d3.csvParse(csvTotalFunding, d => {
return {
year: new Date(d.launch_year, 1, 1, 0, 0, 0, 0).getFullYear(),
name: d.main_category,
value: +d.usd_pledged_real,
lastValue: +d.last_usd_pledged_real,
rank: `${d.rank}`,
colour: `hsl(0,0.75,0.75)`
}
})
Insert cell
// brandData = d3.csv('https://gist.githubusercontent.com/johnburnmurdoch/2e5712cce1e2a9407bf081a952b85bac/raw/08cf82f5e03c619f7da2700d1777da0b5247df18/INTERBRAND_brand_values_2000_2018_decimalised.csv')
Insert cell
// https://awik.io/determine-color-bright-dark-using-javascript/

function lightOrDark(color) {

// Variables for red, green, blue values
var r, g, b, hsp;
// Check the format of the color, HEX or RGB?
if (color.match(/^rgb/)) {

// If HEX --> store the red, green, blue values in separate variables
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
r = color[1];
g = color[2];
b = color[3];
}
else {
// If RGB --> Convert it to HEX: http://gist.github.com/983661
color = +("0x" + color.slice(1).replace(
color.length < 5 && /./g, '$&$&'));

r = color >> 16;
g = color >> 8 & 255;
b = color & 255;
}
// HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
hsp = Math.sqrt(
0.299 * (r * r) +
0.587 * (g * g) +
0.114 * (b * b)
);

// Using the HSP value, determine whether the color is light or dark
// default: hsp>127.5
if (hsp>160) {

return 'light';
}
else {

return 'dark';
}
}
Insert cell
// This is a lightly modified version of Mike Bostock’s text halo function from @d3/connected-scatterplot
halo = function(text, strokeWidth) {
text.select(function() { return this.parentNode.insertBefore(this.cloneNode(true), this); })
.style("fill", '#ffffff')
.style("stroke", '#ffffff')
.style('stroke-width', strokeWidth)
.style('stroke-linejoin', 'round')
.style("opacity", 1)
.style("fill", '#ffffff')
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<style>
.flex-container {
margin: 0;
display: flex;
justify-content: center;
height: 4rem;
}
#restartButton {
transition: background-color 0.2s;
font-size: 1rem;
width: 8rem;
height: 2.2rem;
text-decoration: none;
border-radius: 0.5rem;
outline: none;
cursor: pointer;
border: none;
background-color: #eee;
margin-top: 1.5rem;
}
#restartButton:hover {
background-color: #ddd;
}
#restartButton:active {
background-color: #ccc;
}

text{
font-size: 16px;
font-family: Open Sans, sans-serif;
}
text.title{
font-size: 24px;
font-weight: 500;
}
text.subTitle{
font-weight: 500;
fill: #777777;
}
text.caption{
font-weight: 400;
font-size: 14px;
fill: #777777;
}
text.label{
font-weight: 600;
}
text.yearText{
font-size: 64px;
font-weight: 700;
opacity: 0.25;
}
.tick text {
fill: #777777;
}
.xAxis .tick:nth-child(2) text {
text-anchor: start;
}
.tick line {
shape-rendering: CrispEdges;
stroke: #dddddd;
}
.tick line.origin{
stroke: #aaaaaa;
}
path.domain{
display: none;
}
</style>`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more