d3 = require('d3')
chroma = require('d3-scale-chromatic')
pie = d3.pie()
.startAngle(Math.PI)
.endAngle(3 * Math.PI)
.sort(/*(a, b) => fill.domain().indexOf(a.type) - fill.domain().indexOf(b.type)*/null)
.value(d => d.n)
data_adobe=FileAttachment("adobe.csv").csv({typed:"True"})
data_adobe.map(d=>{
let index=Math.floor(Math.random() * 2);
let arr=["Yes", "No"]
d["Ethnically Diverse"]=arr[index]
})
gender_data=
tidy(
data_adobe,
count('gender'),
rename({ "gender": 'type'})
)
ethnic_data=
tidy(
data_adobe,
count("Ethnically Diverse"),
rename({ "Ethnically Diverse": 'type'})
)
import {
tidy,
groupBy,
summarize,
sum,
filter,
count,
complete,
distinct,
rename
} from '@pbeshai/tidyjs'
chart = (dataset,company_selected,color_scheme,type_select)=>{
const svg = d3.select(DOM.svg(size.width, size.height));
const g = svg.append('g')
.datum(dataset)
.style('font-family', 'sans-serif')
.attr('transform', `translate(${size.width / 2}, ${size.height / 2})`);
const duration = 250;
const arc = g.selectAll('.arc')
.data(d => pie(d))
.enter()
.append('g')
.attr('class', '.arc')
// .style('cursor', 'pointer')
arc.append('path')
.attr('d', path)
.attr("id",v=>v.data.type)
.attr('fill', v => color_scheme(v.data.type))
.attr('stroke', 'white');
if (type_select){
let selected_elm="path#"+type_select
arc.select(selected_elm)
.transition()
.duration(duration)
.attr('transform', v=>{
console.log(v)
return calcTranslate(v, 6)})
.attr("fill","#ECB22E")
.transition()
.duration(duration)
.attr('stroke', 'rgba(100, 100, 100, 0.2)')
.attr('stroke-width', 4);
}
const labels = arc.append('g')
.attr('transform', v => `translate(${label.centroid(v)})`)
.attr('text-anchor', 'middle')
.style('fill', 'white')
.style('font-size', '75%')
.style('display', v => v.endAngle - v.startAngle > textThreshold ? 'inline' : 'none');
labels.append('text').text(v => v.data.type);
labels.append('text')
.attr('dy', '1.2em')
.style('font-size', '90%')
.text(v => `${v.data.n} (${d3.format(".0%")(v.data.n/d3.sum(dataset.map(x=>x.n)))})`);
const card = g.append('g').attr('text-anchor', 'middle')
const cardFront = card.append('g').attr('class', 'card-front');
cardFront.append('text').text(company_selected).style('font-size', '90%');
cardFront.append('text')
.attr('dy', '1.8rem')
.style('font-size', '90%')
.text(d=>{let diverse= dataset.filter(v=>(v.type=="Female")|(v.type=="Yes"))
if (diverse.length>0){return `Candidates: ${diverse[0]['n']}`}
else {return `Candidates: 0`}}
);
return svg.node();
}
color_scheme
chart (gender_data,"aba",color_gender,"Female")
color_ethnic=d3.scaleOrdinal().domain(["Yes","No"]).range(["blue","red"])
chart(ethnic_data,"cbc",color_ethnic,"Yes")
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.
