d3.js:csv-barchart
うまくいかない
表を棒グラフに変換する
table:cat
cat val
Phillip 10
Rita 12
Tom 20
Oscar 19
Lulu 8
Keko 14
Lena 9
code:test.css
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
}
code:testx.js
.then((data)=>{
console.log(data)
})
code:test.js
//------------------------SVG PREPARATION------------------------//
const width = 960;
const height = 500;
const margin = 5;
const padding = 30;
const adj = 20;
// we are appending SVG first
const svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "-" + adj + " -"+ adj + " " + (width + adj) + " " + (height + adj*2))
.style("padding", padding)
.style("margin", margin)
//.classed("svg-content", true);
code:test.js
//-----------------------DATA PREPARATION------------------------//
async function load() {
return res
}
const dataset = load()
dataset.then((data)=> {
data.map((d)=> {
d.val = +d.val
return d
})
})
code:test.js
dataset.then((data)=> {
//-----------------------SCALES PREPARATION----------------------//
const xScale = d3.scaleBand()
.padding(0.1)
.domain(data.map((d)=> d.cat))
const yScale = d3.scaleLinear()
console.log(dataset)
//-----------------------------AXES------------------------------//
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + "," + 0 + ")")
.call(d3.axisLeft(yScale));
//---------------------------BAR CHART---------------------------//
dataset.then((data)=> {
svg.append("g")
.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", (d)=> xScale(d.cat))
.attr("y", (d)=> yScale(d.val))
.attr("width", xScale.bandwidth())
.attr("height", (d)=> height - padding - yScale(d.val))
.attr("fill", "steelblue")
})
})
https://img.shields.io/badge/D3.js-csv--barchart-F9A03C.svg?logo=D3.js&style=for-the-badge