The avatar for @sugi2000
SUGIMOTO Tatsuo
Designer, Artist, Researcher, Educator @sugi2000lab . co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Published
Edited
Nov 6, 2020
Insert cell
md`# My First D3
はじめてのD3
`
Insert cell
((10 + 15) * 34) / 5.5
Insert cell
html`<h2>見出し</h2>
<p>パラグラフ</p>
<p><a href="https://google.com/">Link to Google</a></p>
<ul>
<li>その1</li>
<li>その2</li>
<li>その3</li>
</ul>`
Insert cell
md`## 見出し

<small>小さい文字</small>
パラグラフ

[Link to Google](https://google.com/)

* その1
* その2
* その3
`
Insert cell
doubleScore = score * 2
Insert cell
score = 8
Insert cell
someArray = [0, 4, 8, 12, 16]
Insert cell
someArray[4]
Insert cell
{
const first = 1;
const second = first + 1;

return [first, second];
}
Insert cell
someFunc = (arg1, arg2) => {
const result = arg1 * 10 + arg2;
return result;
}
Insert cell
someFunc(10, 5)
Insert cell
simpleFunc = d => d * d
Insert cell
simpleFunc(16)
Insert cell
sampleObj = ({
key1: 5,
key2: 10
})
Insert cell
sampleObj.key1 + sampleObj.key2
Insert cell
{
const dataset = [5, 25, 45, 65, 85];

const div = d3.create("div");

div
.selectAll("p")
.data(dataset)
.join("p")
.text((d, i) => `${i}人目は、${d}点！`);

return div.node();
}
Insert cell
d3 = require("d3@6")
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