d3.js:barchart
code:d3script.css
div.bar {
display: inline-block;
width: 40px;
height: 75px;
/* background-color: teal; */
background-color: blue;
}
code:d3script.css
.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 5px;
font: 12px;
background: white;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
visibility: hidden;
}
.bar:hover {
fill: Brown;
}
code:d3scriptxx.js
// データセット
const dataset = [
{ "name": "A", "value": 5 },
{ "name": "B", "value": 6 },
{ "name": "C", "value": 8 },
{ "name": "D", "value": 1 },
{ "name": "E", "value": 2 },
{ "name": "F", "value": 6 },
{ "name": "G", "value": 8 },
{ "name": "H", "value": 6 },
{ "name": "I", "value": 10 },
{ "name": "J", "value": 12 }
]
code:d3script.js
// データセット
const dataset = [
{ "name": "北海道", "value": 9 },
{ "name": "岩手", "value": 1 },
{ "name": "宮城", "value": 5 },
{ "name": "東京", "value": 367 },
{ "name": "神奈川", "value": 76 },
{ "name": "埼玉", "value": 57 },
{ "name": "千葉", "value": 49 },
{ "name": "茨城", "value": 12 },
{ "name": "栃木", "value": 6 },
{ "name": "群馬", "value": 4 },
{ "name": "D", "value": 1 },
{ "name": "沖縄", "value": 49 }
]
code:d3script.js
const width = 600 // グラフの幅
const height = 600 // グラフの高さ
const padding = 30 // スケール表示用マージン
// SVG領域の設定
const svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
code:d3script.js
// tooltip用div要素追加
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
code:d3script.js
// 軸スケールの設定
const xScale =
.domain(dataset.map((d) => d.name ))
const yScale = d3.scaleLinear()
code:d3script.js
// 軸の表示
const axisx = d3.axisBottom(xScale)
const axisy = d3.axisLeft(yScale)
svg.append("g")
.attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
.call(axisx)
svg.append("g")
.attr("transform", "translate(" + padding + "," + 0 + ")")
.call(axisy)
code:d3script.js
// バーの表示
svg.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d) => xScale(d.name))
.attr("y", (d) => yScale(d.value))
.attr("width", xScale.bandwidth())
.attr("height", (d) => height - padding - yScale(d.value) )
.attr("fill", "steelblue")
.attr("class", "bar")
code:d3script.js
// マウス&タッチイベント設定
.on("mouseover", (d) => {
tooltip
.style("visibility", "visible")
.html("name : " + d.name + "<br>value : " + d.value)
})
.on("mousemove", (d) => {
tooltip
.style("top", (d3.event.pageY - 20) + "px")
.style("left", (d3.event.pageX + 10) + "px")
})
.on("mouseout", (d) => { tooltip.style("visibility", "hidden")})
(タッチイベントは取れないもよう)
https://img.shields.io/badge/D3.js-barchart-F9A03C.svg?logo=D3.js&style=for-the-badge