Public
Edited
Sep 28, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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__`をコンソールにタイプするとバインドされているデータが表示される。
Insert cell
Insert cell
myData = [0, 10, 5, 20]
Insert cell
Insert cell
// 簡単なラインチャートの作成
{
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()
}


Insert cell
Insert cell
// 簡単なラインチャートの作成
{
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]) // バインドされているデータが単数(単一)なので更に配列にする(線を描画にするには2つのデータが必要)
.join("path")
.attr("d", line)
.style("stroke", "#000")
.style("fill", "none")
return svg.node()
}


Insert cell
Insert cell
Insert cell
{
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)
}
Insert cell
Insert cell
Insert cell
<svg widht=300 height=200 style="border: solid 1px #ccc">
<rect x=100 y=100 width=100 height=100>
</rect>
</svg>
Insert cell
Insert cell
{
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)
}
Insert cell
Insert cell
// テンプレート
{
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()
}


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