Public
Edited
Feb 23, 2023
MentalHealthHPSA.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
attachment = FileAttachment("MentalHealthHPSA.csv").csv()
mentalHealth = attachment.map((res) => {
console.log(res)
return {id: res["HPSA ID"],
score:res["HPSA Score"],
state:res["Common State Name"],
status:res["HPSA Status"],
shortage:parseInt(res["HPSA Shortage"]),
provider_type:res["Provider Type"],
served_pop: parseInt(res["HPSA Estimated Served Population"]),
underserved_pop: parseInt(res["HPSA Estimated Underserved Population"]),
population: res["HPSA Designation Population"]
}});
groupedByState = d3.groups(mentalHealth, d => d.state /* specifies what key to use to group the entries */)
.map(([state, values]) => { /* this step is not necessary, but makes the data more readable */
return {state: state, values: values}
});
shortageByState= d3.groups(mentalHealth, d => d.state /* specifies what key to use to group the entries */)
.map(([state, values]) => { /* this step is not necessary, but makes the data more readable */
return {state: state, values: values.filter(d => d.underserved_pop !== NaN)[0].underserved_pop}
}).filter(d=> d.values);
chartDimensions = {
let dimensions = {
svgWidth: 600,
svgHeight: 400,
margin: {top: 30, left: 40, bottom: 40, right: 100}
};
dimensions.width = dimensions.svgWidth - dimensions.margin.left - dimensions.margin.right;
dimensions.height = dimensions.svgHeight - dimensions.margin.top - dimensions.margin.bottom;
return dimensions;
}
xScale = d3.scaleBand()
.domain(shortageByState.map(d => d.state))
.range([0, 100])
yScale = d3.scaleLinear()
.domain([0, 260840])
.range([chartDimensions.height, 0]);
{
let barChart = d3.create("svg")
.attr("id", "bar-chart-8")
.attr("width", chartDimensions.svgWidth)
.attr("height", chartDimensions.svgHeight);
let lineGroup = barChart.append("g")
.attr("transform", `translate(${chartDimensions.margin.left}, ${chartDimensions.margin.top})`); // shift all bars by the margin offset
var bars = barChart.selectAll(".bar").data(shortageByState);
bars = bars.enter().append('rect');
bars
.classed('bar', true)
.attr('width', 20)
.attr('height', 300)
.attr('y', function(d){return yScale(d.value)})
.attr('x', function(d,i){return xScale(i)});
bars.exit().remove();
return barChart.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
