授業でD3.jsでグラフの作成方法を習ったので復習した📊
さいしょに
今回は以前 D3.js の基礎としてグラフの作成を授業で学んだので復習をしていこうと思います。
D3.jsでグラフを作成してみる
D3.jsの基礎としてグラフの作成の方法を学びました。
<body>
<div id="chart"></div>
<!-- D3.js -->
<script>
<!-- 可視化するデータ -->
const dataset = [
{ label:"A" , color:"#f00" , value:"40" } ,
{ label:"B" , color:"#0f0" , value:"85" } ,
{ label:"C" , color:"#00f" , value:"60" } ,
{ label:"D" , color:"#ff0" , value:"25" }
];
<!-- 動的にSVGを追加する -->
const svg = d3.select("#chart")
.append("svg")
.attr("viewBox" , "0 0 500 300");
<!-- svgにデータ分の矩形を追加 -->
svg.selectAll('rect')
.data(dataset)
.join('rect')
.attr('x' , (d , i) => i * 40)
.attr('y' , (d) => 300 - d.value)
.attr('width' , 30)
.attr('height' , (d) => d.value)
.attr('fill' , (d) => d.color);
<!-- svgにテキストを追加 -->
svg.selectAll('text')
.data(dataset)
.join('text')
.attr('x' , (d , i) => i * 40)
.attr('y' , (d) => 300 - d.value)
.text((d) => d.value);
</script>
番外編
番外編としてD3.jsを使用して横方向に伸びるグラフを作成してみました。
<body>
<div id="chart"></div>
<!-- D3.js -->
<script>
<!-- 可視化するデータ -->
const dataset = [
{ label:"A" , color:"#f00" , value:"40" } ,
{ label:"B" , color:"#0f0" , value:"85" } ,
{ label:"C" , color:"#00f" , value:"60" } ,
{ label:"D" , color:"#ff0" , value:"25" }
];
<!-- 動的にSVGを追加する -->
const svg = d3.select("#chart")
.append("svg")
.attr("viewBox" , "0 0 500 300");
<!-- svgにデータ分の矩形を追加 -->
svg.selectAll('rect')
.data(dataset)
.join('rect')
.attr('x', 0)
.attr('y', (d , i) => i * 40 + 10)
.attr('width', (d) => d.value)
.attr('height', 30)
.attr('fill', (d) => d.color);
<!-- svgにテキストを追加 -->
svg.selectAll('text')
.data(dataset)
.join('text')
.attr('x' , (d) => d.value)
.attr('y' , (d , i) => i * 40 + 30)
.text((d) => d.value);
</script>
さいごに
今回は授業で習ったD3.jsを使用してグラフの作成を復習してまとめました。授業を通して色々なJavaScriptのライブラリを使用して作品を作ることができ嬉しいです。
これからも色々なライブラリを学んでいこうと思います。
また、もうすぐクリスマスなので風邪をひかないようにしっかり手洗い・うがいをして対策していこうと思います。
