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 LabelD3.js Diverging ScaleD3.js Sequential ScaleD3.js Log ScaleD3.js Power ScaleD3.js Linear Scale
D3.js Basic Pie Chart
// D3.js 読み込み
d3 = require('d3@5')
// JSONをD3.jsが読み込める形に変換
keyValueArray = d3.entries(testdata)
pieGenerator = d3.pie().value(d => d.value)
// 円弧の開始角度と終了角度を計算
pieArray = pieGenerator(keyValueArray)
// 塗りつぶし用の色スケール
colorSeq = d3
.scaleSequential() // 単純な順序スケール
.domain([0, keyValueArray.length]) // テストデータの個数分のドメインを用意
.interpolator(d3.interpolateGreens)
// 描画領域
svg = d3
.create('svg')
.attr('viewBox', [0, 0, width, height])
.attr('width', width)
.attr('height', height)
// グラフを真ん中にするためのエレメント
chart = svg
.append('g')
.attr("transform", `translate(${width / 2}, ${height / 2})`) // 真ん中へ移動
arc = d3
.arc()
.innerRadius(0)
.outerRadius(radius)
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")
svg.node();
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.