chart(dataToUse)
function chart(chartData) {
let xAxis = g => g
.attr("text-anchor", "middle")
.call(g => g.selectAll("g")
.data(chartData)
.join("g")
.attr("transform", d => `
rotate(${((xScale(d.Quarter) + xScale.bandwidth() / 2) * 180 / Math.PI - 90)})
translate(${innerRadius},${0})
`)
.call(g => g.append("text")
.attr("transform", d => `rotate(90)translate(0,${innerRadius-yScale(d.Revenue)+20})`)
.text(d => d.Revenue)
.attr('font-size', '15px')
.attr('fill', d => d.threshhold === 'above' ? 'white' : 'black')
)
.call(g => g.append("text")
.attr("transform", d => (xScale(d.Quarter) + xScale.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI
? `rotate(180)translate(${-yScale(d.Revenue)+innerRadius-10},0)`
: `rotate(0)translate(${yScale(d.Revenue)-innerRadius+10},0)`)
.text(d => d.label)
.attr('font-size', '15px')
.attr('text-anchor', d => (xScale(d.Quarter) + xScale.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI
? 'end'
: 'start')
)
)
let xScale = d3.scaleBand()
.domain(chartData.map(d => d.Quarter))
.range([0, 2 * Math.PI])
let yScale = d3.scaleRadial()
.domain([0, d3.max(chartData, d => d.Revenue)])
.range([innerRadius, outerRadius])
let arcRevenue = d3.arc()
.innerRadius(innerRadius)
.outerRadius(d => yScale(d.Revenue))
.startAngle(d => xScale(d.Quarter))
.endAngle(d => xScale(d.Quarter) + xScale.bandwidth())
.padAngle(0.09)
.padRadius(innerRadius)
const svg = d3.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("width", "100%")
.style("height", "auto")
.style("font", "10px sans-serif");
svg.append("g")
.attr("class", "revenue-group")
.selectAll("path")
.data(chartData)
.join(
enter => enter.append("path")
.transition()
.duration(1000)
// how do we make the bars grow/shrink
.attrTween('d', function(d) {
return d3.arc(d)
/*
.innerRadius(innerRadius)
.outerRadius(d => yScale(d.Revenue))
.startAngle(d => xScale(d.Quarter))
.endAngle(d => xScale(d.Quarter) + xScale.bandwidth())
.padAngle(0.09)
.padRadius(innerRadius)
*/
}
)
.attr("fill", d => colors(d.group))
.attr("stroke", "1px")
.attr("d", arcRevenue)
.attr('fill-opacity', d => d.threshhold === 'above' ? 1 : 0.2)
.attr('stroke-opacity', 1)
// where do i need to put this now?
//.on('mousemove', nodeMouseOver)
//.on('mouseout', nodeMouseOut )
)
svg.append("g")
.call(xAxis);
return svg.node();
}
function createChartGroup(svg) {
svg.append("g")
.attr("class", "chart-group")
.attr("transform", `translate(${width/2}, ${height/2})`);
}
colors = d3.scaleOrdinal()
.domain(['yellow', 'green', 'blue', 'orange'])
.range(['#FF9F2C', '#49B5AD', '#36B4FF', '#FF5E2B']);
chartData = [
{Quarter: 0, Revenue: 52, label: 'Growth Mindset', group: 'yellow', threshhold: 'above'},
{Quarter: 1, Revenue: 47, label: 'Locus of Control', group: 'yellow', threshhold: 'below'},
{Quarter: 2, Revenue: 48, label: 'Optimism', group: 'yellow', threshhold: 'below'},
{Quarter: 3, Revenue: 59, label: 'Slf-Awareness', group: 'yellow', threshhold: 'above'},
{Quarter: 4, Revenue: 52, label: 'Self-Efficacy', group: 'yellow', threshhold: 'above'},
{Quarter: 5, Revenue: 51, label: 'Cognitive Agility', group: 'green', threshhold: 'above'},
{Quarter: 6, Revenue: 44, label: 'Focus', group: 'green', threshhold: 'below'},
{Quarter: 7, Revenue: 53, label: 'Strategic Planning', group: 'green', threshhold: 'above'},
{Quarter: 8, Revenue: 53, label: 'Emotional Regulation', group: 'green', threshhold: 'above'},
{Quarter: 9, Revenue: 62, label: 'Self-Compassion', group: 'green', threshhold: 'above'},
{Quarter: 10, Revenue: 53, label: 'Nutrition', group: 'green', threshhold: 'above'},
{Quarter: 11, Revenue: 53, label: 'Physical Activity', group: 'green', threshhold: 'above'},
{Quarter: 12, Revenue: 47, label: 'Rest', group: 'green', threshhold: 'below'},
{Quarter: 13, Revenue: 53, label: 'Authenticity', group: 'green', threshhold: 'above'},
{Quarter: 14, Revenue: 50, label: 'Empathy', group: 'green', threshhold: 'above'},
{Quarter: 15, Revenue: 50, label: 'Social Connection', group: 'green', threshhold: 'below'},
{Quarter: 16, Revenue: 55, label: 'Alignment', group: 'blue', threshhold: 'above'},
{Quarter: 17, Revenue: 51, label: 'Coaching', group: 'blue', threshhold: 'above'},
{Quarter: 18, Revenue: 59, label: 'Problem Solving', group: 'blue', threshhold: 'above'},
{Quarter: 19, Revenue: 56, label: 'Encouraching Partcipation', group: 'blue', threshhold: 'above'},
{Quarter: 20, Revenue: 52, label: 'Relationship Building', group: 'blue', threshhold: 'above'},
{Quarter: 21, Revenue: 56, label: 'Empowerment', group: 'blue', threshhold: 'above'},
{Quarter: 22, Revenue: 55, label: 'Recognition', group: 'blue', threshhold: 'above'},
{Quarter: 23, Revenue: 50, label: 'Engagement', group: 'orange', threshhold: 'below'},
{Quarter: 24, Revenue: 40, label: 'Goal Attainment', group: 'orange', threshhold: 'below'},
{Quarter: 25, Revenue: 52, label: 'Purpose and Meaning', group: 'orange', threshhold: 'above'},
{Quarter: 26, Revenue: 51, label: 'Resilience', group: 'orange', threshhold: 'above'},
{Quarter: 27, Revenue: 47, label: 'Stress Management', group: 'orange', threshhold: 'below'},
{Quarter: 28, Revenue: 56, label: 'Work Life Balance', group: 'orange', threshhold: 'below'}
]
chartData2 = [
{Quarter: 0, Revenue: 53, label: 'Growth Mindset', group: 'yellow', threshhold: 'above'},
{Quarter: 1, Revenue: 20, label: 'Locus of Control', group: 'yellow', threshhold: 'below'},
{Quarter: 2, Revenue: 38, label: 'Optimism', group: 'yellow', threshhold: 'below'},
{Quarter: 3, Revenue: 32, label: 'Slf-Awareness', group: 'yellow', threshhold: 'above'},
{Quarter: 4, Revenue: 42, label: 'Self-Efficacy', group: 'yellow', threshhold: 'above'},
{Quarter: 5, Revenue: 40, label: 'Cognitive Agility', group: 'green', threshhold: 'above'},
{Quarter: 6, Revenue: 55, label: 'Focus', group: 'green', threshhold: 'below'},
{Quarter: 7, Revenue: 56, label: 'Strategic Planning', group: 'green', threshhold: 'above'},
{Quarter: 8, Revenue: 23, label: 'Emotional Regulation', group: 'green', threshhold: 'above'},
{Quarter: 9, Revenue: 56, label: 'Self-Compassion', group: 'green', threshhold: 'above'},
{Quarter: 10, Revenue: 40, label: 'Nutrition', group: 'green', threshhold: 'above'},
{Quarter: 11, Revenue: 60, label: 'Physical Activity', group: 'green', threshhold: 'above'},
{Quarter: 12, Revenue: 42, label: 'Rest', group: 'green', threshhold: 'below'},
{Quarter: 13, Revenue: 39, label: 'Authenticity', group: 'green', threshhold: 'above'},
{Quarter: 14, Revenue: 52, label: 'Empathy', group: 'green', threshhold: 'above'},
{Quarter: 15, Revenue: 69, label: 'Social Connection', group: 'green', threshhold: 'below'},
{Quarter: 16, Revenue: 43, label: 'Alignment', group: 'blue', threshhold: 'above'},
{Quarter: 17, Revenue: 40, label: 'Coaching', group: 'blue', threshhold: 'above'},
{Quarter: 18, Revenue: 41, label: 'Problem Solving', group: 'blue', threshhold: 'above'},
{Quarter: 19, Revenue: 54, label: 'Encouraching Partcipation', group: 'blue', threshhold: 'above'},
{Quarter: 20, Revenue: 59, label: 'Relationship Building', group: 'blue', threshhold: 'above'},
{Quarter: 21, Revenue: 50, label: 'Empowerment', group: 'blue', threshhold: 'above'},
{Quarter: 22, Revenue: 29, label: 'Recognition', group: 'blue', threshhold: 'above'},
{Quarter: 23, Revenue: 49, label: 'Engagement', group: 'orange', threshhold: 'below'},
{Quarter: 24, Revenue: 39, label: 'Goal Attainment', group: 'orange', threshhold: 'below'},
{Quarter: 25, Revenue: 88, label: 'Purpose and Meaning', group: 'orange', threshhold: 'above'},
{Quarter: 26, Revenue: 72, label: 'Resilience', group: 'orange', threshhold: 'above'},
{Quarter: 27, Revenue: 63, label: 'Stress Management', group: 'orange', threshhold: 'below'},
{Quarter: 28, Revenue: 43, label: 'Work Life Balance', group: 'orange', threshhold: 'below'}
]
toolTip = d3.select("body").append("div").attr("class", "toolTip")
html`
<style>
.toolTip {
position: absolute;
display: none;
min-width: 30px;
max-width: 240px;
border-radius: 4px;
height: auto;
background: rgba(250,250,250, 0.9);
border: 1px solid #DDD;
padding: 4px 8px;
font-size: .85rem;
text-align: left;
z-index: 1000;
}
</style>
`
nodeMouseOut = (event, d) => {
// Hide tooltip on mouse out
toolTip.style("display", "none"); // Hide toolTip
// Optional cursor change removed
d3.select(event.target).style("cursor", "default");
// Optional highlight removed
d3.select(event.target)
.transition()
.attr('stroke', '#fff')
.attr('stroke-width', 0);
}
nodeMouseOver = (event, d) => {
// Get the toolTip, update the position, and append the inner html depending on your content
// I tend to use template literal to more easily output variables.
toolTip.style("left", event.pageX + 18 + "px")
.style("top", event.pageY + 18 + "px")
.style("display", "block")
.html(
`Tooltip for <strong>${d.label}</strong>
`
);
// Optional cursor change on target
d3.select(event.target).style("cursor", "pointer");
// Optional highlight effects on target
d3.select(event.target)
.transition()
.attr('stroke', 'black')
.attr('stroke-width', 3);
}
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.
