2e:null 2f:["$","title",null,{"children":"Gender in the Workplace - Career Choices by Sex | Canton of Zurich | Office for Statistics and Data of the Canton of Zurich | Observable"}] 34:T1f59,chartVertical = { const barHeight = 20; const margin = { top: 30, right: 10, bottom: 15, left: 175 }; let height =400 + margin.top + margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(filteredData, d => d.Anteil)]) .range([margin.left, widthNow - margin.right]); const y = d3 .scaleBand() .domain(d3.range(filteredData.length)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); // Create svg const svg = d3 .create('svg') .attr("viewBox", [0, 0, widthNow, height]) .attr("overflow", "visible") .style("font-family", "sans-serif"); // Axes const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call( d3 .axisTop(x) .ticks(width / 100) .tickFormat(function(d) { return d + "%"; }) ) .call(g => g.select(".domain").remove()); const yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call( d3 .axisLeft(y) .tickFormat(i => filteredData[i].Beruf) .tickSizeOuter(0) ); // Annotations const annotation = svg .selectAll('.annotation') .data(filteredData) .enter() .append("g") .attr("class", "annotation"); svg .append("line") .attr('class', 'annotation-path') .attr('x1', x.range()[0]) .attr('x2', x.range()[1]) .attr("y1", (d, i) => y(8) + y.bandwidth()) .attr("y2", (d, i) => y(8) + y.bandwidth()) .attr("stroke", "#05032d") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .style('opacity', function(d) { if (switchSexButton === "Frauen") { return 1; // female active } else { return 0; // female inactive } }); svg .append("foreignObject") .attr('class', 'annotation-text') .attr("width", 130) .attr("height", 500) .attr('x', widthNow + margin.right - 120) .attr('y', function(d) { if (switchSexButton === "Frauen") { return margin.top + 130; // female } else { return margin.top + 340; // male } }) .append("xhtml:body") .style('font-size', 'calc(0vw + 11px)') .style('font-family', 'Helvetica, Arial, sans-serif') .html(function(d) { if (switchSexButton === "Frauen") { return "

75% der jungen Frauen wählen aus nur 9 Berufen aus.

"; // female } else { return "

75% der jungen Männer wählen aus 22 Berufen aus.

"; // male } }); /* .attr("transform", function(d) { if (switchSexButton === "Frauen") { return `translate(${margin.left + 75},${margin.top + 220})`; // female } else { return `translate(${margin.left + 75},${margin.top + 570})`; // male } }); svg .append("text") .attr('class', 'annotation-text') .attr('y', '-.2em') .attr('x', -4) .attr('font-size', 'calc(0vw + 12px)') .attr('text-anchor', 'start') .attr("fill", "#05032d") .text(function(d) { if (switchSexButton === "Frauen") { return 'Berufswahlspektrum Mädchen: 75% der Mädchen wählen aus nur 9 Berufen aus.'; // female } else { return 'Berufswahlspektrum Jungs: 75% der Jungs wählen aus 22 Berufen aus.'; // male } }) .attr("transform", function(d) { if (switchSexButton === "Frauen") { return `translate(${margin.left + 75},${margin.top + 220})`; // female } else { return `translate(${margin.left + 75},${margin.top + 570})`; // male } }) .style('font-family', 'Helvetica, Arial, sans-serif'); */ svg .append("line") .attr('class', 'annotation-path') .attr('x1', x.range()[0]) .attr('x2', x.range()[1]) .attr("y1", (d, i) => y(22) + y.bandwidth()) .attr("y2", (d, i) => y(22) + y.bandwidth()) .attr("stroke", "#05032d") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .style('opacity', function(d) { if (switchSexButton === "Männer") { return 1; // male active } else { return 0; // male inactive } }); /* svg .append("text") .attr('class', 'annotation-text') .attr('y', '-.2em') .attr('x', -4) .attr('font-size', '14px') .attr('text-anchor', 'start') .attr("fill", "#05032d") .text('Berufswahlspektrum Jungs: 75% der Jungs wählen aus 22 Berufen aus.') .attr("transform", `translate(${margin.left + 200},${margin.top + 570})`) .style('font-family', 'Helvetica, Arial, sans-serif'); */ // data binding on filteredData const bar = svg .append("g") .selectAll("rect") .data(filteredData) .join("rect") .style("mix-blend-mode", "multiply") .attr("y", d => y(d.Beruf)) .attr("x", d => x(d.Anteil)) .attr("width", d => x(0) - x(d.Anteil)) .attr("height", y.bandwidth()) .attr("fill", d => color(d.Geschlecht)); svg .append("g") .selectAll("rect") .data(filteredData) .join("rect") .attr("rx", 0) .attr("ry", 4) .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d.Anteil) - x(0)) .attr("height", y.bandwidth()) .style("fill", function(d) { if (d.Geschlecht === "Frauen" && d.Anteil < 2.2) { return "#aa90de"; // female light-purple } else if (d.Geschlecht === "Frauen" && d.Anteil >= 2.2) { return "#6C43C0"; // female dark-purple } else if (d.Geschlecht === "Männer" && d.Anteil < 1.2) { return "#7dd1c3"; // male light-green } else { return "#24B39C"; // male dark-green } }); svg .append("g") .attr("fill", "#f0f0f2") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", "11px") .selectAll("text") .data(filteredData) .join("text") .attr("x", d => x(d.Anteil)) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(function(d) { return d.Anteil.toFixed(1) + "%"; }) .call(text => text .filter(d => x(d.Anteil) - x(0) < 35) // short bars .attr("dx", +4) .attr("fill", "#05032d") .attr("text-anchor", "start") ); // add the legend to the chart const legend = svg .selectAll(".legend") .data(color.domain()) .enter() .append("g") .attr("class", "legend") .attr("transform", function(d, i) { // i is the index return `translate(0, ${i * 20})`; }) .style('font-family', 'sans-serif'); const size = 20; legend .append("rect") .attr('class', 'legend-rect') .attr("x", widthNow + margin.right - 30) .attr("y", function(d, i) { return 90 + i * 5; }) // 100 is where the first rect appears. '12' is the distance between rects .attr("width", size) .attr("height", size) .style("fill", color); legend .append("text") .attr('class', 'legend-text') .attr("x", widthNow + margin.right - 40) .attr("y", function(d, i) { return 100 + i * 5; }) .attr('font-size', 'calc(0vw + 11px)') .attr("fill", "#05032d") .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d === "Frauen" ? 'Frauen' : 'Männer'; }); // Updating legend to display the selected sex legend .selectAll('.legend-rect') .style('opacity', d => (d === switchSexButton ? 1 : 0.5)); // adding bold font and opacity legend .selectAll('.legend-text') .style('opacity', d => (d === switchSexButton ? 1 : 0.5)) .style('font-weight', d => (d === switchSexButton ? 700 : 400)); legend .on("click", function(d) { alert(d); }) .style('cursor', 'pointer'); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.transition().duration(500); svg.selectAll('text').style('font-size', adaptLabelFontSize); return svg.node(); }35:T4a6,md`We now add events listeners to the data-binded rectangle bars, such that the tooltip is triggered correctly. Event listeners can be added to marks to react to events on the underlying selection using the \`on()\` method. The \`on()\` method takes the event name and a callback function that is triggered every time the specified event happens. An anonymous function can be used as the callback for the event listener. The input to the function \`d\` represents the underlying data of the mark. The scope, \`this\`, corresponds to the DOM element. Event listeners include: - \`mousedown\`: Triggered by an element when a mouse button is pressed down over it - \`mouseup\`: Triggered by an element when a mouse button is released over it - \`mouseover\`: Triggered by an element when the mouse comes over it - \`mouseout\`: Triggered by an element when the mouse goes out of it - \`mousemove\`: Triggered by an element on every mouse move over it. - \`click\`: Triggered by a mouse click: mousedown and then mouseup over an element - \`contextmenu\`: Triggered by a right-button mouse click over an element. - \`dblclick\`: Triggered by two clicks within a short time over an element `36:T12d0,chart = { // Create & Append const svg = d3 .create('svg') .attr("viewBox", [0, 0, width, height]) .attr("overflow", "visible") .style("font-family", "sans-serif"); // Axes const xaxis = g => g .attr('class', 'axis axis--x') .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const yaxis = g => g .attr('class', 'axis axis--y') .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(width / 100) .tickFormat(function(d) { return d + "%"; }) ) .call(g => g.select(".domain").remove()); // Titles const title = svg .append("text") .attr( "transform", `translate(${(width + margin.left + margin.right) / 2},20)` ) .style("text-anchor", "middle") .style("font-weight", 700) .text("Berufslehre und Geschlecht"); // text label for the y axis const ytitle = svg .append("text") .attr("transform", "rotate(-90)") .attr("y", -10) .attr("x", -margin.top) .attr("dy", "1em") .style("text-anchor", "end") .attr("font-size", 12) .text("Anteil"); // add the legend to the chart const legend = svg .selectAll(".legend") // step 1 .data(color.domain()) // step 2 .enter() // step 3 .append("g") // step 4 .attr("class", "legend") // step 5 .attr("transform", function(d, i) { // step 5 // i is the index return `translate(0, ${i * 20})`; }) .style('font-family', 'sans-serif'); legend .append("rect") .attr('class', 'legend-rect') .attr("x", width + margin.right) .attr("y", 65) .attr("width", 12) .attr("height", 12) .style("fill", color); legend .append("text") .attr('class', 'legend-text') .attr("x", width + margin.right - 12) .attr("y", 70) .style('font-size', "12px") .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d === "Frauen" ? 'Frauen' : 'Männer'; }); // data binding on filteredData const bars = svg.selectAll('.bar').data(filteredData); const enterbars = bars .enter() .append('rect') .attr('class', 'bar') .attr('x', d => x(d.Beruf)) .attr('y', d => y(d.Anteil)) .attr("height", d => y(0) - y(d.Anteil)) .attr("width", x.bandwidth()) .attr('fill', d => color(d.Geschlecht)); // tooltip /* svg .selectAll('.bar') .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); function updateTooltipChart(sex) { // Step 1. Data. // Step 2. Join. const bars = svg.selectAll('.bar').data(filteredData); // Step 3. Enter. bars .enter() .append('rect') .attr('class', 'bar') .attr('x', d => x(d.Beruf)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.Geschlecht)) .on('mouseenter', function(d) { // show the tooltip on mouse enter tip.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }) .transition('enter-transition') .duration(500) .attr('y', d => y(d.Anteil)) .attr('height', d => height - y(d.Anteil)); // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.Beruf)) .attr('y', d => y(d.Anteil)) .attr('height', d => height - y(d.Anteil)) .attr('fill', d => color(d.Geschlecht)); // Step 5. Exit. bars .exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); } */ // Updating legend to display the selected sex legend .selectAll('.legend-rect') .style('opacity', d => (d === switchSexButton ? 1 : 0.5)); // adding bold font legend .selectAll('.legend-text') .style('opacity', d => (d === switchSexButton ? 1 : 0.5)) .style('font-weight', d => (d === switchSexButton ? 700 : 400)); // Adding click event to legend legend.on('click', d => (d === switchSexButton) === "Frauen" ? 'Frauen' : 'Männer' ); legend.style('cursor', 'pointer'); svg.append("g").call(xaxis); svg.append("g").call(yaxis); svg.call(tip); return svg.node(); }37:T444,md`## Additional Resources **D3.js - Basics & Examples** - [Data Manipulation @ D3 Graph Gallery](https://www.d3-graph-gallery.com/graph/basic_datamanipulation.html) - [Horizontal Bar chart @ Observable](https://observablehq.com/@d3/horizontal-bar-chart) - [Introduction to D3.js @ Observable](Introduction to D3) - [World History Timeline @ Observable](https://observablehq.com/@tezzutezzu/world-history-timeline) - [Mareys Trains @ Observable](https://observablehq.com/@mbostock/mareys-trains?collection=@observablehq/visualization) - [COVID–19 Bubble Chart with D3 Render @ Observable](https://observablehq.com/@unkleho/covid-19-bubble-chart-with-d3-render?collection=@unkleho/d3-render) - [D3-annotation @ Observable](https://observablehq.com/@cbuie/d3-js-annotations) **Styles & Colors** - [NZZ Visuals - Styleguide](https://nzzdev.github.io/Storytelling-Styleguide/#/colors) - [Colors for gender](https://blog.datawrapper.de/gendercolor/) - [Colors for data visualizations](https://blog.datawrapper.de/beautifulcolors/) - [Color wheerl](https://www.sessions.edu/color-calculator/) `38:[] 32:{"id":"8aec3bb9d6265cdb","slug":"gender-in-the-workplace-career-choices-by-sex-canton-of-zuri","title":"Gender in the Workplace - Career Choices by Sex | Canton of Zurich","thumbnail":"bfd7074421c281b350548192b085c123fed30bbb7661b68202b63efd4fbd8c18","access_level":"public","create_time":"$D2020-09-23T13:29:57.415Z","update_time":"$D2020-12-23T10:01:46.571Z","view_time":null,"first_public_time":"$D2020-09-23T13:32:24.490Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":876,"publish_version":876,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9abe6e12e757b036","slug":"ffg-bildungsplatform","title":"FFG - Bildungsplatform","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Gender in the Workplace - Career Choices by Sex | Canton of Zurich","cells":[{"id":0,"value":"md`# Gender in the Workplace - Career Choices by Sex | Canton of Zurich\n\nSocial role concepts still have a strong influence on the career and study choices made by students, categorizing certain professions and industries as \"typically male\" or \"typically female\". For this reason, among others, women still choose professions in the social and health care sector by a majority, while men still prefer industrial and technical professions.\n\nStereotypical role models have a corresponding effect on the career choices of girls and boys. From the more than 200 apprenticeship professions in the Canton of Zurich, 75% of girls choose from only 9 professions. For boys, the spectrum is somewhat broader: 75% choose from 22 different professions, the remaining 25% are spread over another 161 professions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`## Rendering the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`Use the radio buttons to change the sex.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"viewof switchSexButton = radio({\n title: 'Bitte wählen Sie das Geschlecht',\n description: '',\n options: [\n { label: 'Frauen', value: 'Frauen' },\n { label: 'Männer', value: 'Männer' }\n ],\n value: 'Frauen'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`## Data\n\nOriginal data source: [Bildungsstatistik, Kanton Zürich](https://pub.bista.zh.ch/de/zahlen-und-fakten/sbw/schul-und-berufswahl-gewaehlte-berufslehren/gewaehlte-berufslehren-nach-haeufigkeit/)\n\nIn a preparatory step, the original data was cleansed and prepared (e.g. the same apprenticeships were combined, including the calculation of percentages). The data is a CSV file that describes the career choices by sex:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"url = \"https://raw.githubusercontent.com/statistikZH/FFG_gender_berufswahl/master/gewaehlte-berufslehren-nach-haeufigkeit_aggregiert.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"rawData = d3.csv(url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`The data containes the following columns:\n\n- \\`Beruf\\`: The job title.\n- \\`Total_Beruf\\`: The total number of persons per job title.\n- \\`Gechlecht\\`: The two values: Women and Men.\n- \\`Anzahl\\`: Is the number of persons per job title and sex.\n- \\`Total_Geschlecht\\`: Is the total of men and women combined.\n- \\`Anteil\\`: The share of \\`Total_Geschlecht\\` per job title and sex.\n\nHere are the first 10 rows:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"printTable(rawData.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"import { radio } from \"@rohscx/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"import { rasterize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function unique(array) {\n return array.filter((v, i) => array.indexOf(v) === i);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"formatPercent = d3.format(\".2%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"formatValue = x => (isNaN(x) ? \"N/A\" : x.toLocaleString(\"de-CH\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"function adaptLabelFontSize(d) {\n var xPadding, xMargin, labelAvailableWidth, labelWidth;\n xPadding = 5;\n xMargin = 170;\n labelAvailableWidth = xMargin - xPadding;\n labelWidth = this.getComputedTextLength();\n // There is enough space for the label so leave it as is.\n if (labelWidth < labelAvailableWidth) {\n return null;\n }\n /*\n * The meaning of the ratio between labelAvailableWidth and labelWidth equaling 1 is that\n * the label is taking up exactly its available space.\n * With the result as `1em` the font remains the same.\n *\n * The meaning of the ratio between labelAvailableWidth and labelWidth equaling 0.5 is that\n * the label is taking up twice its available space.\n * With the result as `0.5em` the font will change to half its original size.\n */\n return labelAvailableWidth / labelWidth + 'em';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`## Parameter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"widthNow = d3.min([750, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = ({ top: 20, right: 0, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Domains\n\nBefore we can begin plotting our data, we first need to define our x, y and color domains and scales for our bar chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`_Berufe Domain_. This produces an array of all the career choices in the data. \\`array.map\\` returns an array of identical length by mapping values in the original array to new ones, decided by the given function (in our case, we want an array of just career choices). We defined a helper function \\`unique\\` that will give us the unique values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"berufeDomain = unique(\n filteredData.map(row => {\n return row.Beruf;\n })\n) // domains on x axis","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`_Anteile Domain_. We want the minimum to be 0, as this is a bar chart, and the maximum to be the maximum from column \\`Anteil\\`. We pass a function to tell \\`d3.max\\` how to access the \\`Anteil\\` column given a data record.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"anteileDomain = [0, d3.max(filteredData, row => row.Anteil)] // domain for y axis","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`_Gender domain_. The \\`Geschlecht\\` column in our data codes the sex in our data, and so we can just use them directly as the domain.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"genderDomain = unique(\n filteredData.map(row => {\n return row.Geschlecht;\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`## Scales\n\nUsing these domains, we can now define scales for our encoding channels.\n_scales_ are functions that map from a domain to a range (a domain of chart). \\`d3\\` has multiple built in scale functions. Before building the actual scale function, let's take a look at the type of functions we are going to use:\n\n- \\`d3.scaleLinear()\\` creates a linear mapping between a continuous domain and range. We also have \\`d3.scaleLog()\\`, \\`d3.scaleSqrt()\\`, and so on. \n- \\`d3.scaleOrdinal()\\` specifies an explicit mapping from a set of ordered, discrete data values to a corresponding set of visual attributes (such as colors). \n- \\`d3.scaleBand()\\` maps a discrete domain to a continous range, by dividing the continous range into uniform _bands_. Band scales are often used for bar charts with an ordinal or categorical dimension – just like our \\`age\\` field!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`We want to visualize _Beruf_ on th x axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"x = d3\n .scaleBand()\n .range([margin.left, width - margin.right])\n .padding(0.1)\n .domain(berufeDomain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`Similarly, we want a quantitative \\`y\\` scale for share. Our range here is from \\`height\\` to \\`0\\` (as opposed to \\`0\\` to \\`height\\`) because in HTML/d3 land things are drawn downward, where \\`(0, 0)\\` is the top-left corner.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"y = d3\n .scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain(anteileDomain)\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`We encode \\`gender\\` with colors. We first define the the colors representing the male and female, and use those as the range of an ordinal scale. For the purposes of this visualization, we'll start with a \"non-conventional\" color association of green (male) and purple (female), but feel free to change them below as you see fit!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"color = d3\n .scaleOrdinal()\n .domain([\"Frauen\", \"Männer\"])\n .range([\"#6C43C0\", \"#24B39C\"])\n .unknown(\"#e3e4e9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`## Axes\n\nWith scales defined, we can add corresponding axes to our svg container. \n\nAxes can be generated based on the scales in your visualization. Axes are defined based on their position using axis generator functions \\`d3.axisTop()\\`, \\`d3.axisBottom()\\`, \\`d3.axisRight()\\`, or \\`d3.axisLeft()\\`.\n\nTo create an axis, we must create or select the element in which we want to place it, then invoke the selection \\`call()\\` method to apply our axis generator function to it.\n\n*We define and call the axes directly in our chart code filed.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`## Titles\nIn D3, axis generators do not automatically create titles for you. You can manually add _labels_ to your axes (or other elements!) by adding text marks. As with any other mark, you can programmatically specify both HTML attributes and CSS styles.\n\nLet's add titles for the chart, and x and y axes. Again, we do it directly in the chart code field.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`## Legend\n\nSimilarly, you will also need to construct _legends_. The [\\`d3-legend\\`](https://d3-legend.susielu.com/#summary) library can be used to help automatically create it:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`## Update Data on Input\n\nTo filter our data to specific rows of interest (recall that we are interested in a specific sex), we define a filter rule on our raw data set.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"filteredData = rawData\n .filter(el => el.Geschlecht === switchSexButton)\n .sort(function(a, b) {\n return +b.Anteil - +a.Anteil;\n })\n .filter(function(d, i) {\n return i < 26;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"printTable(filteredData.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"md`## Tooltip`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"d3Tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md`Essentially, d3-tip is creating a carefully styled HTML element block for you. You will need to customize it in the following ways when creating the tooltip: \n1. Provide some style for the tooltip.\n2. Make an offset so the tip is on the top.\n3. Use \\`html\\` to set the html element you would like to display in the tooltip block. The input to the function \\`d\\` represents the underlying data of the mark, of which the tooltip is displaying the information.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"tip = d3Tip()\n .attr('class', \"d3-tip\")\n .style(\"color\", \"white\")\n .style(\"background-color\", \"#05032d\")\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"4px\")\n .style(\"font-size\", \"12px\")\n .offset([-10, 0])\n .html(function(d) {\n return `${d3.format(\"'\")(d.Anzahl)} Personen`;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`Add the tooltip to the figure with \\`call()\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`## Dynamic & clickable legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"md`### Displaying the selected sex\n\nRemember that our legend was bound to the data! When we (manually) created it, we bound it to the domain of our color scale. This means we can style it according to this data (as we have with its fill).\n\nWe can make the opacity of each rect a function of the data and bold the text / modify its opacity similarly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"md`#### Adding click events to the legend\n\nTo invoke an update when a legend item is clicked, we introduce a 'click' event listener to the legend items. When an item is clicked, we update our visualization by passing in the bound sex and a step of 0.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"swatches({ title: \"\", color, tickSize: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"md`## Horizontal Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"