d3.js:データセット

CSS

code:d3script.css

svg{

font: 12px sans-serif;

background-color: #eee;

text-align: right;

padding: 3px;

margin: 1px;

color: #333;

}

text{

font-weight: bolder;

font-size: 20px;

fill:#009900; /* テキストの色 */

stroke: #007700; /* 枠線の色 */

stroke-width: 1px; /* 枠線の太さ */

}

code:d3script.js

// データをもとにcircle描画する

// <circle>の大きさをdatasetの個々のデータに対応させ, 一列に並べる

//var container = d3.select('body')

//var svg = container.append('svg')

var svg = d3.select('body').append('svg')

.attr('width', 600)

.attr('height', 500)

svg.selectAll("circle")

.data(dataset) // データを渡す

.enter()

.append('circle')

.attr('cx', function(data, i) { return i*80} ) // dataに個々のデータ(10,70,80,40,20,50,30)、iにはデータの番号(0〜6)が渡される

.attr('cy', 100 ) // y座標は全部のcircleで同じ100px

.attr('r', function(data){ return data }) // 半径の大きさは個々データの値にする10, 70, 80, 40, 20, 50, 30

.style('opacity', 0.3) //透明度

d3-script-button.icon （実行ボタンd3-script-button）

https://img.shields.io/badge/D3.js-データセット-F9A03C.svg?logo=D3.js&style=for-the-badge