Scratch work / Dan Kerrigan

Dan Kerrigan

Ph.D. student at Northeastern

Workspace

Public

Edited

May 31

d3.csvParse("foo,bar\n1,2\n3,\n4,5")

d3.nice(70, 210, 2)

Math.log(50) / Math.LN10

Math.pow(10, -Math.floor(Math.log10(0.5)))

function example(firstArg, secondArg, thirdArg) {

return `first: ${firstArg}, second: ${secondArg}, third: ${thirdArg}`;

}

example("A", "B", "C")

example(..."ABC")

example(...["A", "B", "C"])

grouped_ratings = [

{

key: '2011',

values: [

{ key: '1', value: 151 },

{ key: '2', value: 12 },

{ key: '3', value: 314 },

{ key: '4', value: 178 },

{ key: '5', value: 31 },

{ key: '6', value: 1 },

{ key: '7', value: 1 },

]

{

key: '2012',

values: [

{ key: '1', value: 203 },

{ key: '2', value: 4 },

{ key: '3', value: 41 },

{ key: '4', value: 87 },

{ key: '5', value: 13 },

{ key: '6', value: 10 },

{ key: '7', value: 100 },

]

d3.max(grouped_ratings, g => d3.max(g.values, v => v.value))

d3.max(grouped_ratings, function (g) {

return d3.max(g.values, function (v) {

return v.value;

});

d3.csvParse(`Name,Time,Value

X,t1,v1

X,t2,v2

X,t3,v3

Y,t1,V1

Y,t2,V2

Z,t1,V1

Z,t2,V2

Z,t3,V3

Z,t4,V4`)

d3.range(10 - 1, -1, -1)

+"100"

+"100,000"

{

const data = [

{ A: 1, B: 'Apple|Bear' },

{ A: 2, B: 'Apple|Car' },

{ A: 3, B: 'Dog|Cat|Emu' },

{ A: 4, B: 'Bear|Emu' },

];

// split each B attribute by the pipe

// flatten the 2D array into a 1D array

const values = data.map(d => d.B.split('|')).flat();

// count the number of times each value appears

const counts = d3.rollups(

values,

group => group.length,

d => d

)

// convert the array of arrays into an array of objects

.map(([B, Count]) => ({B, Count}))

return counts;

}

age = ({ joe: 12, sue: 30})

age.joe

d3.interpolateCividis

d3.schemeCividis

x = d3.scaleLinear()

.domain([0, 100000])

.range([20, 380])

{

const svg = d3.create('svg')

.attr('width', 400)

.attr('height', 50);

svg.append('g')

.call(d3.axisBottom(x).tickFormat(d => d / 100))

return svg.node();

}

a = [1, 2, 3]

b = [4, 5, 6]

[...a, ...b]

console.log(d3.csvParse(`Name,Sex,Age,Height,Weight

Alex,"M",41,74,170

Bert,"M",42,68,166

Carl,"M",32,70,155

Dave,"M",39,72,167

Elly,"F",30,66,124

Fran,"F",33,66,115

Gwen,"F",26,64,121

Hank,"M",30,71,158

Ivan,"M",53,72,175

Jake,"M",32,69,143

Kate,"F",47,69,139

Luke,"M",34,72,163

Myra,"F",23,62,98

Neil,"M",36,75,160

Omar,"M",38,70,145

Page,"F",31,67,135

Quin,"M",29,71,176

Ruth,"F",28,65,131`, d3.autoType))

people = [

{ Name: "Alex", Sex: "M", Age: 41, Height: 74, Weight: 170 },

{ Name: "Bert", Sex: "M", Age: 42, Height: 68, Weight: 166 },

{ Name: "Carl", Sex: "M", Age: 32, Height: 70, Weight: 155 },

{ Name: "Dave", Sex: "M", Age: 39, Height: 72, Weight: 167 },

{ Name: "Elly", Sex: "F", Age: 30, Height: 66, Weight: 124 },

{ Name: "Fran", Sex: "F", Age: 33, Height: 66, Weight: 115 },

{ Name: "Gwen", Sex: "F", Age: 26, Height: 64, Weight: 121 },

{ Name: "Hank", Sex: "M", Age: 30, Height: 71, Weight: 158 },

{ Name: "Ivan", Sex: "M", Age: 53, Height: 72, Weight: 175 },

{ Name: "Jake", Sex: "M", Age: 32, Height: 69, Weight: 143 },

{ Name: "Kate", Sex: "F", Age: 47, Height: 69, Weight: 139 },

{ Name: "Luke", Sex: "M", Age: 34, Height: 72, Weight: 163 },

{ Name: "Myra", Sex: "F", Age: 23, Height: 62, Weight: 98 },

{ Name: "Neil", Sex: "M", Age: 36, Height: 75, Weight: 160 },

{ Name: "Omar", Sex: "M", Age: 38, Height: 70, Weight: 145 },

{ Name: "Page", Sex: "F", Age: 31, Height: 67, Weight: 135 },

{ Name: "Quin", Sex: "M", Age: 29, Height: 71, Weight: 176 },

{ Name: "Ruth", Sex: "F", Age: 28, Height: 65, Weight: 131 }

]

grouped = d3.group(

people,

d => d.Age >= 31

)

hierarchy = d3.hierarchy({

// root node

children: [

// circle containing people over 31

{ children: grouped.get(true) },

// people younger than 31 are outside that circle

...grouped.get(false)

]

})

.sum(d => d.Age)

.sort((a, b) => b.value - a.value)

d3.pack()

.size([0, 1])

(hierarchy)

{

const container = d3.create('div')

.attr('class', 'container')

.style('width', '900px')

.style('height', size === 'half' ? '300px' : '600px');

container.selectAll('div')

.data(d3.range(count))

.join('div')

.attr('class', 'chart');

return container.node();

}

<style>

.chart {

background-color: rebeccapurple;

border: 1px solid orchid;

aspect-ratio: 16 / 9;

width: 100%;

}

.container {

background-color: lavender;

display: grid;

/* grid-auto-flow: row; */

/* grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)); */

/* grid-template-rows: repeat(auto-fill, 1fr); */

grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));

row-gap: 5px;

column-gap: 5px;

}

</style>

</div>

</div>

</div>

<style>

.cont {

margin: 0;

width: 200px;

height: 100px;

border: 1px solid blue;

display: flex;

box-sizing: border-box;

align-items: center;

column-gap: 5em;

}

.row {

display: flex;

align-items: center;

/* column-gap: 5em; */

}

.rul {

margin: 0;

padding: 0;

}

.inp {

min-width: 0;

margin: 0;

padding: 0;

}

.lbl {

flex: 1;

}

</style>

<label class="lbl" for="features-checkbox">Features</label>

</li>

</ul>

</div>

</svg>

</button>

nums = Array.from(({length: 100}), () => Math.floor(Math.random() * 10)).sort()

d3.group(nums, d => d)

</svg>

</a>

</div>

<div style="font-size: 30px; -webkit-text-stroke: 1px white; -webkit-text-fill-color: green;">Three</div>

</div>

<div style="font-size: 30px; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white">Three</div>

</div>

<div class="outline1" style="font-size: 30px">Three</div>

</div>

<style>

.outline1 {

text-shadow:

-.5px -.5px 0 white,

0 -.5px 0 white,

.5px -.5px 0 white,

.5px 0 0 white,

.5px .5px 0 white,

0 .5px 0 white,

-.5px .5px 0 white,

-.5px 0 0 white;

}

.outline2 {

text-shadow:

-5px -5px 0 white,

0 -5px 0 white,

5px -5px 0 white,

5px 0 0 white,

5px 5px 0 white,

0 5px 0 white,

-5px 5px 0 white,

-5px 0 0 white;

}

</style>

</svg>

d3.median(data, d => d.calories)

data

stack = d3.stack()

.keys(["H", "C"])

.value((d, key) => d.map.get(key) ?? 0)

rs = d3.rollup(

data,

group => group.length,

d => d.calories < 110,

d => d.type

)

ss1 = Array.from(rs, ([bin, map]) => ({ bin, map }))

stack(ss1)

c = [10, 20, 30, 40, 50]

[

d3.bisect(c, 0, 0, c.length - 1),

d3.bisect(c, 5, 0, c.length - 1),

d3.bisect(c, 10, 0, c.length - 1),

d3.bisect(c, 15, 0, c.length - 1),

d3.bisect(c, 20, 0, c.length - 1),

d3.bisect(c, 25, 0, c.length - 1),

d3.bisect(c, 30, 0, c.length - 1),

d3.bisect(c, 35, 0, c.length - 1),

d3.bisect(c, 40, 0, c.length - 1),

d3.bisect(c, 45, 0, c.length - 1),

d3.bisect(c, 50, 0, c.length - 1),

]

[

d3.bisectLeft(c, 10, 0, c.length),

d3.bisectLeft(c, 15, 0, c.length),

d3.bisectLeft(c, 20, 0, c.length),

d3.bisectLeft(c, 25, 0, c.length),

d3.bisectLeft(c, 30, 0, c.length),

d3.bisectLeft(c, 35, 0, c.length),

d3.bisectLeft(c, 40, 0, c.length),

d3.bisectLeft(c, 45, 0, c.length),

d3.bisectLeft(c, 50, 0, c.length),

]

f = (bins, x) => {

return d3.bisectRight(bins, x, 0, bins.length - 1) - 1;

}

test(f)

function test(f) {

const bins = [20, 40, 60, 80, 100];

return [

` 20: ${f(bins, 20)}, 0`,

` 25: ${f(bins, 25)}, 0`,

` 40: ${f(bins, 40)}, 1`,

` 45: ${f(bins, 45)}, 1`,

` 60: ${f(bins, 60)}, 2`,

` 65: ${f(bins, 65)}, 2`,

` 80: ${f(bins, 80)}, 3`,

` 85: ${f(bins, 85)}, 3`,

`100: ${f(bins, 100)}, 3`,

];

}

import {data} from '@nyuvis/data-transformation'

d3.pairs(([1, 2, 3, 4, 5], [1, 2, 3, 4, 5]))

nested = [[[[0,187],[0,318]],[[187,680],[318,320]]],[[[0,33],[0,22],[0,54],[0,31],[0,42],[0,30],[0,37],[0,37],[0,69],[0,64],[0,86]],[[33,92],[22,80],[54,89],[31,96],[42,98],[30,84],[37,112],[37,74],[69,88],[64,101],[86,86]]],[[[0,73],[0,57],[0,54],[0,62],[0,72],[0,11],[0,72],[0,33],[0,65],[0,2],[0,4]],[[73,154],[57,142],[54,103],[62,74],[72,154],[11,21],[72,142],[33,67],[65,137],[2,2],[4,4]]],[[[0,51],[0,314],[0,140]],[[51,75],[314,650],[140,275]]]]

d3.max(nested.flat(3))

linear = [

[0, 0],

[0.5, 0.5],

[1, 1],

[1.5, 1.5],

[2, 2],

[2.5, 2.5],

[3, 3],

[3.5, 3.5],

[4, 4],

[4.5, 4.5],

[5, 5],

]

linearTranslated = linear.map(([a, b]) => [a, b + 5])

linearScaled = linear.map(([a, b]) => [a, b * 2])

Plot.plot({

y: {

domain: [0, 10]

marks: [

Plot.line(linear),

Plot.line(linearTranslated),

]

})

Plot.plot({

y: {

domain: [0, 10]

marks: [

Plot.line(linear),

Plot.line(linearScaled),

]

})

curve = [

[0, 0],

[1, 1.6],

[2, 2.4],

[3, 2.8],

[4, 3.0],

[5, 3.1],

[6, 3.0],

[7, 2.8],

[8, 2.4],

[9, 1.6],

[10, 0],

]

curveScaled = curve.map(([a, b]) => [a, b * 2])

curveTranslated = curve.map(([a, b]) => [a, b + 3])

d3.variance(linear, d => d[1])

d3.variance(curve, d => d[1])

Plot.plot({

y: {

domain: [0, 6]

marks: [

Plot.line(curve),

Plot.line(curveTranslated),

]

})

Plot.plot({

y: {

domain: [0, 6]

marks: [

Plot.line(curve),

Plot.line(curveScaled),

]

})

Plot.plot({

marks: [

Plot.line([...sine, ...cosine], {

x: "x",

y: "y",

stroke: "z"

})

]

})

Plot.plot({

marks: [

Plot.line([...sine, ...sineOffset], {

x: "x",

y: "y",

stroke: "z"

})

]

})

sine = d3.range(0, 4 * Math.PI, 0.1).map((x) => ({

y: Math.sin(x),

z: "a"

}))

cosine = d3.range(0, 4 * Math.PI, 0.1).map((x) => ({

y: Math.cos(x),

z: "b"

}))

sineOffset = d3.range(0, 4 * Math.PI, 0.1).map((x) => ({

y: Math.sin(x + Math.PI),

z: "b"

}))

tanh = d3.range(-4 * Math.PI, 4 * Math.PI, 0.1).map((x) => ({

y: Math.tanh(x),

z: "a"

}))

tanhs = d3.range(-10, 10, 4).map(o => d3.range(-4 * Math.PI, 4 * Math.PI, 0.1).map((x) => ({

y: Math.tanh(x + o),

z: o,

})))

sigmoids = d3.range(-1.5, 1.5, 0.75).map(o => d3.range(-6, 6, 0.1).map((x) => ({

y: Math.exp(x + o) / (Math.exp(x + o) + 1),

z: o,

})))

peaks = d3.range(1, 11, 0.75).map(o => d3.range(1, 11, 0.1).map((x) => ({

y: 1 / ((x + o) ** 2),

z: o,

})))

Plot.plot({

marks: [

Plot.line(tanhs.flat(), {

x: "x",

y: "y",

z: "z"

})

]

})

Plot.plot({

marks: [

Plot.line(sigmoids.flat(), {

x: "x",

y: "y",

z: "z"

})

]

})

Plot.plot({

marks: [

Plot.line(peaks.flat(), {

x: "x",

y: "y",

z: "z"

})

]

})

mat = [

[1, 2, 3, 4, 5],

[6, 7, 8, 9, 10],

[21, 22, 23, 24, 25]

]

d3.transpose(mat).map(d => d3.mean(d))

values = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,22,24,24,26,29,29,31,31,32,32,32,32,33,34,35,36,38,38,41,48]

values2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,9,12,13,13,14,14,15,15,16,16,16,16,16,16,17,17,17,17,17,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,25,25,25,25,25,25,25,25,25,25,25,25,26,26,26,26,26,26,26,26,26,26,26,27,27,27,27,27,27,28,28,28,28,28,28,28,28,28,28,28,29,29,29,29,29,29,29,29,29,29,29,29,29,29,30,30,30,30,30,30,30,30,30,30,31,31,31,31,31,31,31,31,31,31,32,32,32,32,32,32,32,32,32,32,32,32,33,33,33,33,33,33,33,33,33,33,33,33,33,33,34,34,34,35,35,35,35,35,35,35,35,35,36,36,36,36,36,36,36,37,37,37,37,37,37,37,37,38,38,38,38,38,38,38,38,38,38,39,39,39,39,39,39,39,39,40,40,40,40,40,40,41,41,41,41,41,41,42,42,42,42,42,43,43,43,44,45,45,45,46,47,47]

function nrd(x) {

let s = ss.standardDeviation(x);

const iqr = ss.interquartileRange(x);

if (typeof iqr === "number" && iqr > 0) {

s = Math.min(s, iqr / 1.34);

}

return 1.06 * s * Math.pow(x.length, -0.2);

}

nrd(values)

ss.standardDeviation(values)

kdss = ss.kernelDensityEstimation(values, 'gaussian')

density1d = kde.density1d(values)

kdss(34)

kde = require('fast-kde')

ss = require("simple-statistics")

d3.format(".3~f")(0.5)

d3.mean(Array.from({length: 500}), (d) => timelist())

d3.mean(Array.from({length: 500}), (d) => timeset())

function timelist() {

const allnums = d3.range(1000);

const nums = d3.shuffle(allnums).filter((d, i) => i % 2 === 0);

const start = performance.now();

let count = 0;

allnums.forEach(p => {

if (nums.includes(p)) {

count++;

}

});

const end = performance.now();

return (end - start);

}

function timeset() {

const allnums = d3.range(1000);

const nums = new Set(d3.shuffle(allnums).filter((d, i) => i % 2 === 0));

const start = performance.now();

let count = 0;

allnums.forEach(p => {

if (nums.has(p)) {

count++;

}

});

const end = performance.now();

return (end - start);

}

<style>

.container {

width: 100%;

height: 100%;

background: cadetblue;

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: sans-serif;

font-size: 16px;

}

.container * {

box-sizing: border-box;

margin: 0;

padding: 0;

}

.container button {

color: black;

background-color: white;

border: 1px solid black;

border-radius: 0.25em;

text-align: center;

cursor: pointer;

font-size: 1em;

line-height: 1em;

padding: 0.0625em 0.0625em;

font-family: inherit;

}

.buttons-row {

background: bisque;

display: grid;

grid-auto-columns: minmax(0, 1fr);

grid-auto-flow: column;

}

.button-container {

width: 100%;

height: 100%;

}

</style>

</div>

<button>BBBBBB</button>

</div>

</div>

Type Table, then Shift-Enter. Ctrl-space for more options.

Plot.plot({

marginLeft: 50,

marginBottom: 75,

width: 600,

height: 600,

marks: [

Plot.axisX({tickRotate: -90}),

Plot.tickY(ameshousing, {

x: "Neighborhood",

y: "Sale Price",

strokeWidth: 0.5,

strokeOpacity: 0.5,

sort: {

x: "y",

reduce: "count",

reverse: true

}

})

]

})

d3.deviation([101, 102, 103, 104, 105])

d3.deviation([1, 2, 3, 4, 5])

5 / 0

<path

d="M224.18213209109638,141.30595051550452A265,265,0,0,1,197.3819293665413,176.8201740739492Q0,0,93.47696144998253,237.24893609472412L76.10256629189578,253.83734832326707L52.4676093371988,249.54388385700636Q0,0,224.18213209109638,141.30595051550452Z"

fill="#d62728"

opacity="0.75"

</g>

</svg>

<path

d="M224,141A265,265,0,0,1,197,176Q0,0,93,237L76,253L52,249Q0,0,224,141Z"

fill="#d62728"

opacity="0.75"

</g>

</svg>

<path

d="M224,141A265,265,0,0,1,197,176Q0,0,93,237L76,253L52,249Q0,0,224,141Z"

fill="#d62728"

</g>

</svg>

<path

d="M224,141A265,265,0,0,1,197,176Q0,0,93,237L76,253L52,249Q0,0,224,141Z"

opacity="0.75"

</g>

</svg>

d3.scaleLinear().ticks(undefined)

canvas = {

const ctx = DOM.context2d(width, 200);

ctx.fillStyle = "hsl(216deg 100% 13%)";

ctx.fillRect(0, 0, width, 200);

ctx.fillStyle = "white";

ctx.strokeStyle = "white";

ctx.font = "10px sans-serif";

ctx.textBaseline = "middle";

ctx.textAlign = "middle";

ctx.beginPath();

ctx.moveTo(0, 100);

ctx.lineTo(width, 100);

ctx.stroke();

ctx.fillText("0", width / 2, 100);

return ctx.canvas;

}

<text text-anchor="middle" x="100" y="50">Middle</text>

<text text-anchor="center" x="100" y="100">Center</text>

</svg>

[

d3.scaleRadial().domain([0, 1]).range([1, 10])(0.7),

d3.scaleSqrt().domain([0, 1]).range([1, 10])(0.7),

]

"2023-03-08 16:59:53"

d3.timeFormat("%Y-%m-%d %H:%M:%S")(Date.now())

d3.timeDay.range(new Date(2015, 0, 1), new Date(2015, 0, 7), 2)

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