Public
Edited
Insert cell
Insert cell
d3.nice(70, 210, 2)
Insert cell
Math.log(50) / Math.LN10
Insert cell
Math.pow(10, -Math.floor(Math.log10(0.5)))
Insert cell
function example(firstArg, secondArg, thirdArg) {
return `first: ${firstArg}, second: ${secondArg}, third: ${thirdArg}`;
}
Insert cell
example("A", "B", "C")
Insert cell
example(..."ABC")
Insert cell
example(...["A", "B", "C"])
Insert cell
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 },
]
},
]
Insert cell
d3.max(grouped_ratings, g => d3.max(g.values, v => v.value))
Insert cell
d3.max(grouped_ratings, function (g) {
return d3.max(g.values, function (v) {
return v.value;
});
});
Insert cell
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`)
Insert cell
+"100"
Insert cell
+"100,000"
Insert cell
{
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;
}
Insert cell
age = ({ joe: 12, sue: 30})
Insert cell
age.joe
Insert cell
d3.interpolateCividis
Insert cell
d3.schemeCividis
Insert cell
Insert cell
x = d3.scaleLinear()
.domain([0, 100000])
.range([20, 380])
Insert cell
{
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();
}
Insert cell
a = [1, 2, 3]
Insert cell
b = [4, 5, 6]
Insert cell
[...a, ...b]
Insert cell
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))
Insert cell
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 }
]
Insert cell
grouped = d3.group(
people,
d => d.Age >= 31
)
Insert cell
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)
Insert cell
d3.pack()
.size([0, 1])
(hierarchy)
Insert cell
Insert cell
Insert cell
Insert cell
{
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();
}
Insert cell
<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>
Insert cell
Insert cell
<div style="height: 50px; width: 100%; background-color: aquamarine; display: flex; align-items: stretch">
<div style="display: flex; gap: 0.25em; align-items: center;">
<div>One</div>
<div>Two</div>
</div>
</div>
Insert cell
<div style="height: 50px; width: 100%; background-color: aquamarine; display: flex; align-items: center">
<div style="display: flex; gap: 0.25em; align-items: end">
<div>One</div>
<div>Two</div>
</div>
</div>
Insert cell
<div class="cont">
<div class="sq"></div>
<div class="sq"></div>
<div class="sq"></div>
</div>
Insert cell
<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>
Insert cell
<div class="cont">
<ul style="list-style: none;" class="rul">
<li class="row">
<input class="inp" id="features-checkbox" type="checkbox"/>
<label class="lbl" for="features-checkbox">Features</label>
</li>
</ul>
</div>
Insert cell
<button style="border: 1px solid black; background: white; padding: 3; font-size: 1em;">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" style="display: block;" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="red" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
Insert cell
Insert cell
nums = Array.from(({length: 100}), () => Math.floor(Math.random() * 10)).sort()
Insert cell
d3.group(nums, d => d)
Insert cell
<div style="border: 1px solid green;">
<a href="#" style="border: 1px solid red; display: inline-block; padding: 0; margin: 0; line-height: 1;">
<svg width="30px" height="30px" style="display: block; padding: 0; margin: 0;">
<rect width="30" height="30" fill="steelblue" />
</svg>
</a>
</div>
Insert cell
<div style="background-color: red; display: flex; justify-content: center; font-family: sans-serif">
<div style="font-size: 10px; -webkit-text-stroke: 0.5px white; -webkit-text-fill-color: black;">One</div>
<div style="font-size: 20px; -webkit-text-stroke: 1px white; -webkit-text-fill-color: green;">Two</div>
<div style="font-size: 30px; -webkit-text-stroke: 1px white; -webkit-text-fill-color: green;">Three</div>
<div style="font-size: 40px; -webkit-text-stroke: 1px white; -webkit-text-fill-color: green;">Four</div>
</div>
Insert cell
<div style="background-color: red; display: flex; justify-content: center; font-family: sans-serif">
<div style="font-size: 10px; text-shadow: -0.5px -0.5px 0 white, 0.5px -0.5px 0 white, -0.5px 0.5px 0 white, 0.5px 0.5px 0 white">One</div>
<div style="font-size: 20px; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white">Two</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 style="font-size: 40px; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white">Four</div>
</div>
Insert cell
<div style="background-color: red; display: flex; justify-content: center; font-family: sans-serif">
<div class="outline1" style="font-size: 10px">One</div>
<div class="outline1" style="font-size: 20px">Two</div>
<div class="outline1" style="font-size: 30px">Three</div>
<div class="outline1" style="font-size: 40px">Four</div>
</div>
Insert cell
<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>
Insert cell
<svg width={100} height={100}>
<path d="M 45 50 h 10" stroke="steelblue" fill="none" />
<path d="M 50 50 v 10" stroke="steelblue" fill="none" />
</svg>
Insert cell
d3.median(data, d => d.calories)
Insert cell
data
Insert cell
stack = d3.stack()
.keys(["H", "C"])
.value((d, key) => d.map.get(key) ?? 0)
Insert cell
rs = d3.rollup(
data,
group => group.length,
d => d.calories < 110,
d => d.type
)
Insert cell
ss1 = Array.from(rs, ([bin, map]) => ({ bin, map }))
Insert cell
stack(ss1)
Insert cell
c = [10, 20, 30, 40, 50]
Insert cell
[
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),
]
Insert cell
[
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),
]
Insert cell
f = (bins, x) => {
return d3.bisectRight(bins, x, 0, bins.length - 1) - 1;
}
Insert cell
test(f)
Insert cell
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`,
];
}
Insert cell
import {data} from '@nyuvis/data-transformation'
Insert cell
d3.pairs(([1, 2, 3, 4, 5], [1, 2, 3, 4, 5]))
Insert cell
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]]]]
Insert cell
d3.max(nested.flat(3))
Insert cell
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],
]
Insert cell
linearTranslated = linear.map(([a, b]) => [a, b + 5])
Insert cell
linearScaled = linear.map(([a, b]) => [a, b * 2])
Insert cell
Plot.plot({
y: {
domain: [0, 10]
},
marks: [
Plot.line(linear),
Plot.line(linearTranslated),
]
})
Insert cell
Plot.plot({
y: {
domain: [0, 10]
},
marks: [
Plot.line(linear),
Plot.line(linearScaled),
]
})
Insert cell
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],
]
Insert cell
curveScaled = curve.map(([a, b]) => [a, b * 2])
Insert cell
curveTranslated = curve.map(([a, b]) => [a, b + 3])
Insert cell
d3.variance(linear, d => d[1])
Insert cell
d3.variance(curve, d => d[1])
Insert cell
Plot.plot({
y: {
domain: [0, 6]
},
marks: [
Plot.line(curve),
Plot.line(curveTranslated),
]
})
Insert cell
Plot.plot({
y: {
domain: [0, 6]
},
marks: [
Plot.line(curve),
Plot.line(curveScaled),
]
})
Insert cell
Plot.plot({
marks: [
Plot.line([...sine, ...cosine], {
x: "x",
y: "y",
stroke: "z"
})
]
})
Insert cell
Plot.plot({
marks: [
Plot.line([...sine, ...sineOffset], {
x: "x",
y: "y",
stroke: "z"
})
]
})
Insert cell
sine = d3.range(0, 4 * Math.PI, 0.1).map((x) => ({
x,
y: Math.sin(x),
z: "a"
}))
Insert cell
cosine = d3.range(0, 4 * Math.PI, 0.1).map((x) => ({
x,
y: Math.cos(x),
z: "b"
}))
Insert cell
sineOffset = d3.range(0, 4 * Math.PI, 0.1).map((x) => ({
x,
y: Math.sin(x + Math.PI),
z: "b"
}))
Insert cell
tanh = d3.range(-4 * Math.PI, 4 * Math.PI, 0.1).map((x) => ({
x,
y: Math.tanh(x),
z: "a"
}))
Insert cell
tanhs = d3.range(-10, 10, 4).map(o => d3.range(-4 * Math.PI, 4 * Math.PI, 0.1).map((x) => ({
x,
y: Math.tanh(x + o),
z: o,
})))
Insert cell
sigmoids = d3.range(-1.5, 1.5, 0.75).map(o => d3.range(-6, 6, 0.1).map((x) => ({
x,
y: Math.exp(x + o) / (Math.exp(x + o) + 1),
z: o,
})))
Insert cell
peaks = d3.range(1, 11, 0.75).map(o => d3.range(1, 11, 0.1).map((x) => ({
x,
y: 1 / ((x + o) ** 2),
z: o,
})))
Insert cell
Plot.plot({
marks: [
Plot.line(tanhs.flat(), {
x: "x",
y: "y",
z: "z"
})
]
})
Insert cell
Plot.plot({
marks: [
Plot.line(sigmoids.flat(), {
x: "x",
y: "y",
z: "z"
})
]
})
Insert cell
Plot.plot({
marks: [
Plot.line(peaks.flat(), {
x: "x",
y: "y",
z: "z"
})
]
})
Insert cell
mat = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[21, 22, 23, 24, 25]
]
Insert cell
d3.transpose(mat).map(d => d3.mean(d))
Insert cell
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]
Insert cell
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]
Insert cell
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);
}
Insert cell
nrd(values)
Insert cell
ss.standardDeviation(values)
Insert cell
kdss = ss.kernelDensityEstimation(values, 'gaussian')
Insert cell
density1d = kde.density1d(values)
Insert cell
kdss(34)
Insert cell
kde = require('fast-kde')
Insert cell
ss = require("simple-statistics")
Insert cell
d3.format(".3~f")(0.5)
Insert cell
d3.mean(Array.from({length: 500}), (d) => timelist())
Insert cell
d3.mean(Array.from({length: 500}), (d) => timeset())
Insert cell
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);
}
Insert cell
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);
}
Insert cell
Insert cell
<div style="width: 500px; height: 500px;">
<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 class="container">
<div class="buttons-row">
<div class="button-container">
<button>AAA</button>
</div>
<div class="button-container">
<button>BBBBBB</button>
</div>
<div class="button-container">
<button>D</button>
</div>
</div>
</div>
</div>
Insert cell
AmesHousingOriginalTrain.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
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
}
})
]
})
Insert cell
d3.deviation([101, 102, 103, 104, 105])
Insert cell
d3.deviation([1, 2, 3, 4, 5])
Insert cell
5 / 0
Insert cell
<svg width="675" height="600">
<g transform="translate(325, 300)">
<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>
Insert cell
<svg width="675" height="600">
<g transform="translate(325, 300)">
<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>
Insert cell
<svg width="675" height="600">
<g transform="translate(325, 300)">
<path
d="M224,141A265,265,0,0,1,197,176Q0,0,93,237L76,253L52,249Q0,0,224,141Z"
fill="#d62728"
/>
</g>
</svg>
Insert cell
<svg width="675" height="600">
<g transform="translate(325, 300)">
<path
d="M224,141A265,265,0,0,1,197,176Q0,0,93,237L76,253L52,249Q0,0,224,141Z"
opacity="0.75"
/>
</g>
</svg>
Insert cell
Insert cell
d3.scaleLinear().ticks(undefined)
Insert cell
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;
}
Insert cell
Insert cell
[
d3.scaleRadial().domain([0, 1]).range([1, 10])(0.7),
d3.scaleSqrt().domain([0, 1]).range([1, 10])(0.7),
]
Insert cell
"2023-03-08 16:59:53"
Insert cell
d3.timeFormat("%Y-%m-%d %H:%M:%S")(Date.now())
Insert cell
d3.timeDay.range(new Date(2015, 0, 1), new Date(2015, 0, 7), 2)
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more