Observable Playground / animaltechno

animaltechno

Workspace

Public

Edited

Sep 28, 2023

svgで描画するのは大変なので、d3を利用する。

`d3.line()`はpathを作成する関数、

```js

const line = d3.line()

.x(d => x(d.xValue))

.y(d => y(d.yValue))

```

`data()`と`datum()`の違い　: データが複数の場合には`datum`を使う。

デベロッパーツールで特定のpathを指定して`$0.__data__`をコンソールにタイプするとバインドされているデータが表示される。

myData = [0, 10, 5, 20]

// 簡単なラインチャートの作成

{

const width = 500

const height = 100

const margin = {

top: 10,

bottom: 30,

left: 10,

right: 10

}

const svg = d3.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.height + margin.bottom)

const g = svg.append("g")

.attr("transform", `translate(${margin.left}, ${margin.right})`)

// スケール

const x = d3.scaleLinear().domain([0,3]).range([0,width])

const y = d3.scaleLinear().domain(d3.extent(myData)).range([height, 0])

// ライン

const line = d3.line().x((d, i) => x(i)).y(d => y(d))

// データの描画(datumを利用する場合)

// (svg -> g -> path)

g.append("path")

.datum(myData) // データが複数の場合にはdatumを使う

.attr("d", line)

.style("stroke", "#000")

.style("fill", "none")

return svg.node()

}

// 簡単なラインチャートの作成

{

const width = 500

const height = 100

const margin = {

top: 10,

bottom: 30,

left: 10,

right: 10

}

const svg = d3.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.height + margin.bottom)

const g = svg.append("g")

.attr("transform", `translate(${margin.left}, ${margin.right})`)

// スケール

const x = d3.scaleLinear().domain([0,3]).range([0,width])

const y = d3.scaleLinear().domain(d3.extent(myData)).range([height, 0])

// ライン

const line = d3.line().x((d, i) => x(i)).y(d => y(d))

// データの描画(dataを利用する場合)

g.selectAll("path")

.data([myData]) // バインドされているデータが単数（単一）なので更に配列にする(線を描画にするには２つのデータが必要)

.join("path")

.attr("d", line)

.style("stroke", "#000")

.style("fill", "none")

return svg.node()

}

{

const width = 900

const height = 300

const margin = { top: 25, bottom: 35, right: 20, left: 40}

const x = d3.scaleUtc()

.domain(d3.extent(appleStockData, d => d.Date))

.nice()

.range([0, width])

const y = d3.scaleLinear()

.domain(d3.extent(appleStockData, d => d.Close))

.nice()

.range([0, height])

const svg = d3.create("svg")

.attr("width", width + margin.left, + margin.right)

.attr("height", width + margin.height, + margin.bottom)

const g = svg.appned("g")

.attr("transform", `translate(${margin.left}, ${margin.right})`)

const line = d3.line().x(d => d.Date).y(d => d.Close)

// x目盛り

g.append("g")

.attr("transform", `translate(0,${height})`)

.call(d3.axisBottom(x).ticks(width/80))

// y目盛り

g.append("g").call(d3.axisLeft(y))

// Data(点)

g.append("g")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("fill", "none")

.seletAll("circle")

.data(appleStockData)

.join("circle")

.attr("cx", d => x(d.Date))

.attr("cy", d => y(d.Close))

.attr("r", 2)

// Data(線)

g.append("g")

.append("path")

.datum(appleStockData)

.attr("d", line)

.style("fill", "none")

.style("stroke", "#000")

.style("stroke-width", 3)

}

</rect>

</svg>

{

const width = 900

const height = 300

const margin = { top: 25, bottom: 35, right: 20, left: 40}

const x = d3.scaleUtc()

.domain(d3.extent(appleStockData, d => d.Date))

.nice()

.range([0, width])

const　bandScale = d3.scaleBnad()

.domain(Array.from(new Set(appleStockData.map(d => d.Date))))

.nice()

.range([0, width])

const y = d3.scaleLinear()

.domain(d3.extent(appleStockData, d => d.Close))

.nice()

.range([0, height])

const svg = d3.create("svg")

.attr("width", width + margin.left, + margin.right)

.attr("height", width + margin.height, + margin.bottom)

const g = svg.appned("g")

.attr("transform", `translate(${margin.left}, ${margin.right})`)

const line = d3.line().x(d => d.Date).y(d => d.Close)

// x目盛り

g.append("g")

.attr("transform", `translate(0,${height})`)

.call(d3.axisBottom(x).ticks(width/80))

// y目盛り

g.append("g").call(d3.axisLeft(y))

// Data(長方形)

g.append("g")

.attr("fill", "none")

.seletAll("rect")

.data(appleStockData)

.join("rect")

.attr("x", d => x(d.Date))

.attr("y", d => y(d.Close))

.attr("width", 2)

// .attr("width", bandScale.bandWidrh())

.attr("height", d => height - y(d.Close)) // y軸の描写

g.append("g")

.append("path")

.datum(appleStockData)

.attr("d", line)

.style("fill", "none")

.style("stroke", "#000")

.style("stroke-width", 3)

}

// テンプレート

{

const width = 500

const height = 100

const margin = {

top: 10,

bottom: 30,

left: 10,

right: 10

}

const svg = d3.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.height + margin.bottom)

const g = svg.append("g")

.attr("transform", `translate(${margin.left}, ${margin.right})`)

return svg.node()

}

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