The avatar for @terezaif
Tereza Iofciu
Head coach data science @neuefische, @pyladieshamburg organizer , vice chair on the @python Software Verband, managing member @PSF and part of the D&I PSF work group
Published
30DayChartChallenge2022
Edited
Apr 4, 2022
Fork of Pie to flower 🥧 🌸
8 stars
30DayChartChallenge2022
How much taller are men than women?Since you were born - the EconomistNatural Disasters in the worldDo we have enough trees?World population density by countrySunflower Seed Export RidgelineRussian Exports GrowthVulnerability of Mountain PeoplesMarathon World Record ProgressionLife ExpectancyChange in height in aging population
Plant Genera Named For People 🌸
Do we ever have global peace?The Fish We EatHauseholds with Hauseplants
Insert cell
Insert cell
Insert cell
Insert cell
data_women = [
{name: "A-D", value: 36},
{name: "D-J", value: 20},
{name: "K-P", value: 39},
{name: "Q-Z", value: 24}]
Insert cell
data_all = [ {name: "A-D", value: 856},

{name: "D-J", value: 982},
{name: "K-P", value: 1035},

{name: "Q-Z", value: 949}]
Insert cell
value = Array.from({length: 100}, () => Math.floor(Math.random() * 10000));
Insert cell
height = Math.min(width, 500)
Insert cell
margin = 150
Insert cell
padAngel = 0.01
Insert cell
stemangle = 1.8
Insert cell
all_radius = Math.min(width, height) / 2 - 1
Insert cell
women_radius = all_radius*3.2/100
Insert cell
arc_all= d3.arc()
.innerRadius(20)
.outerRadius(all_radius)
.cornerRadius(60)
.padAngle(padAngel)
// .startAngle([Math.PI/5])
// .endAngle([7*Math.PI/5])
Insert cell
arc_women = d3.arc()
.innerRadius(30)
.outerRadius(women_radius)
.cornerRadius(60)
.padAngle(padAngel)
// .startAngle([Math.PI/5])
// .endAngle([2*Math.PI/5])

// .centroid([10,20])
Insert cell
arc = d3.arc()
.innerRadius(100)
.outerRadius(100)
.startAngle(d => d%2 === 0 ? stemangle + Math.PI /2 : 0-(Math.PI /2-stemangle) )
.endAngle(d => d%2 === 0 ? -stemangle + 2.5 * Math.PI : -stemangle+ 1.5 * Math.PI )
Insert cell
pie_normal = d3.pie()
.sort(null)
.value(d => d.value)
Insert cell
d3 = require("d3@6")
Insert cell
http://using-d3js.com/05_07_arcs_pie_charts.html
https://github.com/d3/d3-shape#arc_outerRadius
Insert cell
all_color = "#4D534B"
Insert cell
women_color = '#DAA18F'
Insert cell
textcolor= '#4D5B28'
Insert cell
background = '#e6e3d3'//'#DED9A2'//'#D9DFBA'
Insert cell
html`<style>

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;700&display=swap');

svg {
display:block;
background-color: ${background};
}

text {
font-size:20x;
text-anchor: end;
font-family: "Jura";
font-weight: 800;
opacity: 1;
text-transform: uppercase;
fill: ${textcolor};
}

text.header{
font-size:33px;
font-family: "Jura";
font-weight: 900;
text-transform: uppercase;
opacity: 1;
}

text.subheader{
font-size:28px;
font-family: "Jura";
font-weight: 900;
text-transform: uppercase;
opacity: 1;
}

text.title{
font-size:20px;
font-family: "Jura";
font-weight: 900;
text-transform: uppercase;
}

text.arc_label {
font-size:20px;
text-anchor: end;
alignent-baseline: central;
font-family: "Jura";
font-weight: 800;
}

text.legend_label {
font-size:12px;
text-anchor: middle;
alignent-baseline: central;
font-family: "Jura";
font-weight: 700;
}

text.legend_data {
font-size:11px;
text-anchor: start;
alignent-baseline: central;
font-family: "Jura";
font-weight: 600;
text-transform: uppercase;
fill: ${textcolor};
}

</style>
`
Insert cell

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.
Learn more