Bar Chart / Clara Everett

data = [

{ name: 'Louisiana', average: 20.7, label:'HPSA Score: 17' },

{ name: 'New Mexico', average: 25.48, label:'HPSA Score: 19' },

{ name: 'South Dakota', average: 14.01,label:'HPSA Score: 18' },

{ name: 'Vemont', average: 22.805,label:'HPSA Score: 18' },

{ name: 'Oklahoma', average: 19.29,label:'HPSA Score: 18' },

{ name: 'All States', average: 20.807,label:'Average HPSA Score: 16' },

];

chart = {

const baseColor = "#CA8DFD"

const hoverColor = "#B042FF"

const svg = d3.create("svg")

.attr('viewBox', [0, 0, svgWidth, svgHeight])

.attr('height', svgHeight)

.attr('width', svgWidth);

const graph = svg

.append('g')

.attr('height', graphHeight)

.attr('width', graphWidth)

.attr(

'transform',

`translate(${(svgWidth - graphWidth) / 2}, ${

(svgHeight - graphHeight) / 2

})`,

);

graph

.selectAll('rect')

.data(data)

.join('rect')

.attr('width', x.bandwidth)

.attr('height', (d) => graphHeight - y(d.average))

.attr('x', (d) => x(d.name))

.attr('y', (d) => y(d.average))

.attr('fill', baseColor)

.on('mouseover', function (e, d, i) {

tooltip

.html(

`<div>${d.label}</div>`)

.style('visibility', 'visible');

d3.select(this).attr('fill', hoverColor);

})

.on('mousemove', function (e) {

tooltip

.style('top', e.pageY + 10 + 'px')

.style('left', e.pageX + 10 + 'px');

})

.on('mouseout', function () {

tooltip.html(``).style('visibility', 'hidden');

d3.select(this).transition().attr('fill', baseColor);

});

svg

.append('g')

.attr(

'transform',

`translate(${graphMarginLeft}, ${graphMarginTop})`,

)

.call(yAxis);

svg

.append('g')

.attr(

'transform',

`translate(${graphMarginLeft}, ${

svgHeight - graphMarginTop

})`,

)

.call(xAxis);

svg.append("text")

.attr("x", (graphWidth / 2)+(svgWidth - graphWidth) / 2)

.attr("y", svgHeight - 5)

.attr("text-anchor", "middle")

.attr("font-size", "14px")

.text("State");

svg.append("text")

.attr("x", -(10 + svgHeight / 2))

.attr("y", 15)

.attr("transform", "rotate(-90)") // rotate it by -90 degrees

.attr("text-anchor", "middle")

.attr("font-size", "14px")

.text("Average Telemedecine Score");

return svg.node();

}

tooltip = d3

.select('body')

.append('div')

.style('position', 'absolute')

.style('z-index', '10')

.style('visibility', 'hidden')

.style('padding', '10px')

.style('background', 'rgba(0,0,0,0.6)')

.style('border-radius', '4px')

.style('color', '#fff');

x = d3

.scaleBand()

.domain(data.map((it) => it.name))

.range([0, graphWidth])

.paddingInner(0.2)

.paddingOuter(0.2);

y = d3

.scaleLinear()

.domain([0, maxAverage])

.range([graphHeight, 0]);

maxAverage = d3.max(data, (d) => d.average);

xAxis = d3.axisBottom(x);

yAxis = d3.axisLeft(y);

svgWidth = 600;

graphHeight = 500;

graphWidth=500

graphMarginLeft = 50;

svgHeight = 600;

graphMarginTop = (svgWidth - graphWidth) / 2

d3 = require("d3@^6.2")

Purpose-built for displays of data