コンテナの作成
マージンを指定する
d3.create("svg")でコンテナの枠を作成する
js
const width = 600
const height = 400
const margin = {top: 20, bottom: 20, left: 50, right: 50}
// コンテナの作成
const svg = d3
.create("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000")
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
g.append("rect")
.attr("width", width)
.attr("height", height)
return svg.node()
// Write JS here
myLinearScale = d3.scaleLinear().domain([0,1]).range([0,100])
myLinearScale(0.5)
myValues = iris.map(d => d.sepalLength)
minValue = d3.min(myValues)
maxValue = d3.max(myValues)
d3.scaleLinear().domain([minValue, maxValue]).range([0,1])(5)
// minとmaxをまとめて出力のが`extent()`
extentValues = d3.extent(myValues)
// mapを必ずしも使う必要ない
extentValues1 = d3.extent(iris, d => d.sepalLength)
// すべてをまとめて書く
// d3
// .scaleLinear()
// .domain(d3.extent(iris.map(d => d.sepalLength)))
// .range([0,1])(5)
d3
.scaleLinear()
.domain(d3.extent(iris, d => d.sepalLength))
.range([0,1])(5)
myOrdinalScale = d3
.scaleOrdinal()
.domain(["apple", "orange", "banana"])
.range(["red", "orange", "yellow"])
myOrdinalScale("apple")
htl.html`<div style='background-color: ${myOrdinalScale("orange")}'>
${"orange"}
</div>
`
myDataOrdinalScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(iris.map(d => d.species))))
.range(["red", "orange", "yellow"])
myDataOrdinalScale("setosa")
iris
// カテゴリー変数にはextent()は使えないので、Setを使う
new Set(iris.map(d => d.species))
// Setから配列に変換するには
Array.from(new Set(iris.map(d => d.species)))
{
// マージンを指定する
const width = 600
const height = 400
const margin = {top: 20, bottom: 20, left: 50, right: 50}
// コンテナの作成
const svg = d3
.create("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000")
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
g.append("rect")
.attr("width", width)
.attr("height", height)
return svg.node()
}
描画する際にデータの数と要素の数を比較する
Enter : データはあるが要素がない場合(-> 新しい要素を作成)
Update : データと要素がマッチしてる場合
Exit : データはないが要素がある場合(-> 要素を消去する)
まず要素を探し(selectAll())、データを取得し(data())、データ数と要素数の違いをハンドリングする(join())。
(古いd3のバージョンではenterしappendする必要があった)
js
// add a layer of dots
g.append("g")
.selectAll("circle") // 要素を探す
.data(cars) // データを取り出す
.join("circle") // マッチングをする
.attr("cx", d => x(d.mpg))
.attr("cy", d => y(d.mpg))
.attr("r", 3)
{
// マージンを指定する
const width = 600
const height = 400
const margin = {top: 20, bottom: 20, left: 50, right: 50}
// コンテナの作成
const svg = d3
.create("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000")
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
const x = d3
.scaleLinear()
.domain(d3.extent(iris, d => d["sepalLength"]))
.range([0, width])
const y = d3
.scaleLinear()
.domain(d3.extent(iris, d => d["sepalWidth"]))
.range([height, 0])
const colorScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(iris.map(d => d.species))))
.range(["red", "orange", "yellow"])
g.append("g")
.selectAll("circle")
.data(iris)
.join("circle")
.attr("r", 3)
.attr("cx", d => x(d.sepalLength))
.attr("cy", d => y(d.sepalWidth))
.style("fill", d => colorScale(d.species))
return svg.node()
}
// ObservableでD3を利用するテンプレ
{
const svg = d3.create("svg")
return svg.node()
}
iris.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
