https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248
<html> <div id=“my-chart”><div>
<script src=“https://d3js.org/d3.v4.min.js”></script>
<script>
let margin = { top: 20, right: 42, bottom: 30, left: 42 }
let width = 450 - margin.left - margin.right
let height = 400 - margin.top - margin.bottom
//let dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]
//let dataset = [1, 2, 3, 4, 5]
let data = [
{ label: "n1", value: 80 },
{ label: "n2", value: 100 },
{ label: "n3", value: 56 },
{ label: "n4", value: 120 },
{ label: "n5", value: 180 },
{ label: "n6", value: 30 },
{ label: "n7", value: 40 },
{ label: "n8", value: 120 },
{ label: "n9", value: 160 }
]
let svg = d3
.select("#my-chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
//let xScale = d3
// .scaleLinear()
// .domain([1, dataset.length + 1])
// .range([0, width])
// https://observablehq.com/@d3/d3-scaleband
let xScale = d3
.scaleBand()
.domain(data.map((s) => s.label ))
.range([0, width])
//.padding(2)
//.paddingInner(1.2)
//.paddingOuter(1.2)
//.align(1)
let yScale = d3
.scaleLinear()
.domain([0, 200 /* d3.max(dataset) */])
.range([height, 0])
let barPadding = 5
let barWidth = (width / data.length)
let xAxis = d3.axisBottom(xScale)
let yAxis = d3.axisLeft(yScale)
.tickSize(-width)
.tickFormat(null)
svg
.append('g')
.call(yAxis)
svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("y", (d) => {
return yScale(d.value)
})
.attr("height", (d) => {
return height - yScale(d.value)
})
.attr("width", barWidth - barPadding * 2)
.attr("transform", (d, i) => {
let translate = [barWidth * i + barPadding, 0]
return "translate("+ translate +")"
})
//.attr("fill", "#fe7a42")
//.transition()
//.duration(5000)
.attr("fill", "#007000")
.on("mouseover",function () {
d3.select(this)
.transition()
.duration(500)
.attr("fill", "#fe7a42")
})
.on("mouseout",function () {
d3.select(this)
.transition()
.duration(500)
.attr("fill", "#007000")
})
svg
.selectAll("text")
.data(data)
.enter()
.append("text")
.text((d) => {
return d.value
})
.attr("y", (d, i) => {
return yScale(d.value)
})
.attr("x", (d, i) => {
return barWidth * i + barPadding
})
.attr("fill", "#0a0a0a")
.attr("dy", "-.25em")
.attr("dx", ".25em")
svg
.append('g')
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
//.selectAll("text")
//.style("text-anchor", "end")
//.attr("dx", "-.8em")
//.attr("dy", "-.55em")
//.attr("transform", "rotate(-48)" )
svg.append('text')
.attr('x', 1)
.attr('y', 1)
.attr('transform', 'rotate(-90)')
//.attr('text-anchor', 'middle')
//.attr('text-anchor', 'end')
.attr("dy", "-1em")
.attr("dx", "-5em")
.text('Level, m')
</script>
</html>
- d3s.js
let margin = { top: 20, right: 42, bottom: 30, left: 42 } let width = 450 - margin.left - margin.right let height = 400 - margin.top - margin.bottom //let dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160] //let dataset = [1, 2, 3, 4, 5] let data = [ { label: "n1", value: 80 }, { label: "n2", value: 100 }, { label: "n3", value: 56 }, { label: "n4", value: 120 }, { label: "n5", value: 180 }, { label: "n6", value: 30 }, { label: "n7", value: 40 }, { label: "n8", value: 120 }, { label: "n9", value: 160 } ] let svg = d3 .select("#my-chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") //let xScale = d3 // .scaleLinear() // .domain([1, dataset.length + 1]) // .range([0, width]) // https://observablehq.com/@d3/d3-scaleband let xScale = d3 .scaleBand() .domain(data.map((s) => s.label )) .range([0, width]) //.padding(2) //.paddingInner(1.2) //.paddingOuter(1.2) //.align(1) let yScale = d3 .scaleLinear() .domain([0, 200 /* d3.max(dataset) */]) .range([height, 0]) let barPadding = 5 let barWidth = (width / data.length) let xAxis = d3.axisBottom(xScale) let yAxis = d3.axisLeft(yScale) .tickSize(-width) .tickFormat(null) svg .append('g') .call(yAxis) svg .selectAll("rect") .data(data) .enter() .append("rect") .attr("y", (d) => { return yScale(d.value) }) .attr("height", (d) => { return height - yScale(d.value) }) .attr("width", barWidth - barPadding * 2) .attr("transform", (d, i) => { let translate = [barWidth * i + barPadding, 0] return "translate("+ translate +")" }) //.attr("fill", "#fe7a42") //.transition() //.duration(5000) .attr("fill", "#007000") .on("mouseover",function () { d3.select(this) .transition() .duration(500) .attr("fill", "#fe7a42") }) .on("mouseout",function () { d3.select(this) .transition() .duration(500) .attr("fill", "#007000") }) svg .selectAll("text") .data(data) .enter() .append("text") .text((d) => { return d.value }) .attr("y", (d, i) => { return yScale(d.value) }) .attr("x", (d, i) => { return barWidth * i + barPadding }) .attr("fill", "#0a0a0a") .attr("dy", "-.25em") .attr("dx", ".25em") svg .append('g') .attr("transform", "translate(0," + height + ")") .call(xAxis) //.selectAll("text") //.style("text-anchor", "end") //.attr("dx", "-.8em") //.attr("dy", "-.55em") //.attr("transform", "rotate(-48)" ) svg.append('text') .attr('x', 1) .attr('y', 1) .attr('transform', 'rotate(-90)') //.attr('text-anchor', 'middle') //.attr('text-anchor', 'end') .attr("dy", "-1em") .attr("dx", "-5em") .text('Level, m')