The avatar for @sengokyu
sengokyu
Published
D3.js
Edited
May 5, 2020
Fork of D3.js Sequential Scale
•
1 fork
D3.js
D3.js Basic Pie Chart with LegendD3.js Study of Pre-defined Color InterpolatorD3.js Study of Force layout (3) - forceManyBody/ forceX / forceYD3.js Basic Pie Chart with clear positioning LabelD3.js Study of Force layout (2) - forceY / forceCollideD3.js Study of Force layout (1) - forceManyBody / forceCenter / forceCollideD3.js Basic Pie Chart with Label
D3.js Basic Pie Chart
D3.js Diverging ScaleD3.js Sequential ScaleD3.js Log ScaleD3.js Power ScaleD3.js Linear Scale
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// D3.js 読み込み
d3 = require('d3@5')
Insert cell
Insert cell
// JSONをD3.jsが読み込める形に変換
keyValueArray = d3.entries(testdata)
Insert cell
Insert cell
Insert cell
Insert cell
pieGenerator = d3.pie().value(d => d.value)
Insert cell
Insert cell
Insert cell
// 円弧の開始角度と終了角度を計算
pieArray = pieGenerator(keyValueArray)
Insert cell
Insert cell
Insert cell
Insert cell
// 塗りつぶし用の色スケール
colorSeq = d3
.scaleSequential() // 単純な順序スケール
.domain([0, keyValueArray.length]) // テストデータの個数分のドメインを用意
.interpolator(d3.interpolateGreens)
Insert cell
Insert cell
Insert cell
Insert cell
// 描画領域
svg = d3
.create('svg')
.attr('viewBox', [0, 0, width, height])
.attr('width', width)
.attr('height', height)
Insert cell
Insert cell
// グラフを真ん中にするためのエレメント
chart = svg
.append('g')
.attr("transform", `translate(${width / 2}, ${height / 2})`) // 真ん中へ移動
Insert cell
Insert cell
arc = d3
.arc()
.innerRadius(0)
.outerRadius(radius)
Insert cell
Insert cell
chart
.selectAll(null) // 空のSelection
.data(pieArray) // データがバインドされたSelection
.enter() // 新たなHTMLノードを置くところ
.append('path')
.attr('d', datum => arc(datum)) // 円弧を描画する
.attr('fill', datum => colorSeq(datum.index)) // 塗りつぶし
.attr("stroke", "black") // 枠線
.style("stroke-width", "1px")
Insert cell
svg.node();
Insert cell
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