async function drawChart() { const height = width*.57 const paddedWidth = width - (padding * 2) const paddedHeight = height - (padding * 2) const chartWidth = paddedWidth/2 - padding * 1.5 const chartHeight = chartWidth/2 const textHeight = 20 const svg = d3 .select("#mainChart") .append("svg") .attr("width", width) .attr("height", height); const chartContainer = svg.append('g') .attr("id", "chartContainer") .attr("width", paddedWidth) .attr("height", chartHeight) .attr("transform","translate("+(padding)+" "+(padding + paddedHeight - chartHeight)+")") chartContainer.append('g') .attr("transform","translate(0 0)") .call( d3ParliamentChart.parliamentChart() .width(paddedWidth/2) .aggregatedData(seatsDataLower) .sections(1) .sectionGap(0) .seatRadius(5) .rowHeight(15) ); chartContainer.append('g') .attr("transform","translate("+(paddedWidth/2 + padding)+" 0)") .call( d3ParliamentChart.parliamentChart() .width(paddedWidth/2) .aggregatedData(seatsDataUpper) .sections(1) .sectionGap(0) .seatRadius(8) .rowHeight(17) ); // Add Text Labels for Parties const rotatationCalculator = (seats,totalSeats) => { return (seats/totalSeats*180)/2 } const lowerHouseLabels = chartContainer.append('g'); const upperHouseLabels = chartContainer.append('g'); const labelMaker = (party,angle,tally,shiftX,shiftY,anchor,container) => { container.append('g') .attr("transform","translate("+(chartWidth/2+padding*.7+shiftX)+" "+(chartHeight+padding/2+shiftY)+")") .attr("width", 100) .attr("height", textHeight) .append("text") .attr("transform","rotate("+(tally+angle)+") translate(0 "+(-chartHeight-padding*.8)+")") .attr("text-anchor",anchor) .style("font-size","0.8em") .text(party.party) } let lowerHouseAngleTally = -90 for (let i = 0; i < seatsDataLower.length; i++) { // console.log(party.party) let party = seatsDataLower[i] let angle = rotatationCalculator(party.seats,440) labelMaker(party,angle,lowerHouseAngleTally,0,0,"middle",lowerHouseLabels) lowerHouseAngleTally += angle*2 } let upperHouseAngleTally = -90 for (let i = 0; i < seatsDataUpper.length; i++) { // console.log(party.party) let party = seatsDataUpper[i] let angle = rotatationCalculator(party.seats,224) labelMaker(party,angle,upperHouseAngleTally,width/2,0,"middle",upperHouseLabels) upperHouseAngleTally += angle*2 } // Add text annotations, titles and descriptions addTextLabels(svg) const lowerHouseHoleWidth = 300; const upperHouseHoleWidth = 300; chartContainer .append('g') .append("foreignObject") .attr('width',lowerHouseHoleWidth) .attr('height','200') .attr("transform","translate("+(paddedWidth/4-lowerHouseHoleWidth/2)+" "+(chartHeight-80)+")") .append("xhtml:div") .html(`

37 seats
in the lower house

`) chartContainer .append('g') .append("foreignObject") .attr('width',upperHouseHoleWidth) .attr('height','200') .attr("transform","translate("+(paddedWidth*.75+padding-upperHouseHoleWidth/2)+" "+(chartHeight-80)+")") .append("xhtml:div") .html(`

5 seats
in the upper house

`) }