{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, 200]);
// Female Circle
svg
.append('circle')
.attr('cx', '33%')
.attr('cy', '50%')
.attr('r', 33)
.style("fill","none")
.style('stroke', 'lightgrey');
svg
.append('circle')
.attr('cx', '33%')
.attr('cy', '50%')
.attr('r', f_sizes.get(categories))
.attr('fill-opacity', 0.5)
.style('fill', 'pink');
//Male Circle
svg
.append('circle')
.attr('cx', '66%')
.attr('cy', '50%')
.attr('r', m_sizes.get(categories))
.attr('fill-opacity', 0.5)
.style('fill', 'blue');
svg
.append('circle')
.attr('cx', '66%')
.attr('cy', '50%')
.attr('r', 33)
.style("fill","none")
.style('stroke', 'lightgrey');
// Add a background label for the current year.
const categoryLabel = svg.append('text')
.attr('id', 'categoryLabel')
.attr('x', 40)
.attr('y', 180)
.attr('fill', '#ccc')
//.attr('font-family', 'Helvetica Neue, Arial')
.attr('font-weight', 500)
.attr('font-size', 30)
.text('HSPA Category: ' + categories);
return svg.node();
}
// b_circle_size corresponds to female data
viewof b_circle_size = Inputs.radio(new Map([["High", 45], ["Medium", 33], ["Low", 24]]), {value: 33, label: "HPSA Category"})
b_circle_size
d3 = require('d3')
viewof gender_category = Inputs.checkbox(["High", "Medium", "Low"], {label: "HPSA Category"})
viewof gender_c = Inputs.checkbox(new Map([["High", 8], ["Medium", 12], ["Low", 16]]), {value: [12],label: "HPSA Category"})
gender_c
import {Scrubber} from "@mbostock/scrubber"
viewof categories = Scrubber(["Low", "Medium", "High"], {delay: 1000})
f_sizes = new Map([
["High", 48],
["Medium", 30],
["Low", 22]
]);
m_sizes = new Map([
["High", 44],
["Medium", 36],
["Low", 20]
]);
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.
