2e:null 2f:["$","title",null,{"children":"Steuerstatistik - Anteil Steuerpflichtige und Steuerertrag nach Einkommensklasse, Kanton Zürich | cgrb | Observable"}] 34:T1285,chartEinkommensklassen = { // Key definition // const groupKey = data2.map(d => d.steuerfaktor); const keys = data2.columns.slice(1); const domainKeys = [...Array.from(new Set(data2.map(d => d.steuerfaktor)))]; const groupNames = d3.keys(data2[0]).filter(function(key) { return key != "steuerfaktor"; }); data2.forEach(function(d) { d.groups = groupNames.map(function(name) { return { name: name, factor: d.steuerfaktor, value: +d[name] }; }); }); // Setting up the chart // const margin = { top: 40, right: 20, bottom: 60, left: 40 }; const height = 550; const x0 = d3 .scaleBand() .domain(data2.map(d => d.steuerfaktor)) //.domain(data2.map(d => d[groupKey])) .rangeRound([margin.left, width - margin.right]) .paddingInner(0.1); const x1 = d3 .scaleBand() //.domain(keys) .domain(groupNames) .rangeRound([0, x0.bandwidth()]) .padding(0.05); const y = d3 .scaleLinear() .domain([0, d3.max(data2, d => d3.max(d.groups, d => d.value))]) //.domain([0, d3.max(data2, d => d3.max(keys, key => d[key]))]) .rangeRound([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0).tickSizeOuter(0)) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(width / 80, "%") .tickSize(-width + margin.left + margin.right) ) .call(g => g.selectAll(".domain").remove()) .call(g => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.5) //.attr("stroke-dasharray", "2,2") .attr("stroke-width", "0.5") ) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", -margin.left) .attr("y", -margin.top + 10) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(`↑ Anteil`) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); svg.append("g").call(yAxis); // Adding source // const source = "Quelle: Einfach Staatssteuer, Kantonales Steueramt Zürich"; svg .append('text') .attr('y', height - 20) //height-20) .attr('dy', '1.2em') .attr('x', width - margin.right) .text(source) .attr('text-anchor', 'end') .style('font-family', "Helvetica, sans-serif") .style('fill', '#1B252B'); // Darwing the bars // const bars = svg .append("g") .selectAll(".bars") .data(data2) .enter() .append("g") .attr("class", "g") .attr("transform", d => "translate(" + x0(d.steuerfaktor) + ",0)") .selectAll("rect") .data(d => d.groups) .enter() .append("rect") .attr("width", x1.bandwidth()) .attr("x", d => x1(d.name)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .style("fill", d => color(d.name)); //.append("title") //.text(function(d,i){ // var name = d.name.replace(/^./,d.name[0].toUpperCase()); // return "Faktor : "+d.factor+" \n"+name+" : "+d.value; //}); // Tooltip // const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .text(""); function onMouseOut(d) { tooltip.text(""); d3.select(this).attr("stroke", null); return tooltip.style("visibility", "hidden"); } function onMouseOver(d, i) { tooltip.text(this.dataset.tooltip); d3.select(this) .attr("stroke", "whitesmoke") .attr("stroke-width", "2"); return tooltip.style("visibility", "visible").html( `

${ d.name }

${formatPercentage( d.value )} ${d.factor}

` ); } function onMouseMove(d) { return ( tooltip //.style("display", "inline") .style("left", d3.event.pageX - 75 + "px") .style("top", d3.event.pageY - 75 + "px") ); //.style("top", d3.event.pageY + "px") // on mobile tooltip above touch point //.style("left", d3.event.pageX + "px"); // d3.select(this).attr("dx") + "px" } bars .on("mouseover", onMouseOver) .on("mousemove", onMouseMove) .on("mouseout", onMouseOut); svg .selectAll('text') .style('font-family', 'Helvetica, sans-serif') .style('font-size', '0.875rem'); return svg.node(); }35:Te2c,/* chart = { // Setting up the chart // const margin = { top: 30, right: 20, bottom: 40, left: 20 }; const height = 500; const widthNow = d3.min([750, width]); const x = d3 .scaleBand() .domain(data2.map(d => d.steuerfaktor)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear().range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(width / 100, "%") .tickSize(-width + margin.left + margin.right) ) .call(g => g.selectAll(".domain").remove()) .call(g => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") ) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", -margin.left -10) .attr("y", -margin.top) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(`↑ Anteil`) ); const chart = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("overflow", "visible"); chart.append("g").call(xAxis); chart.append("g").call(yAxis); // Adding source // const source = "Quelle: Kantonsfinanzen, Kanton Zürich"; chart .append('text') .attr('y', height - 15) //height-20) .attr('dy', '1.2em') .attr('x', width - margin.right) .text(source) .attr('font-size', '11px') .attr('text-anchor', 'end') .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style('fill', '#333'); // Show the bars // const bars = chart .append("g") .selectAll("g") .data(series) .enter() .append("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(d.data.steuerfaktor)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()); //.append("title") //.text(d => `${d.data.steuerfaktor} ${d.key} ${formatPercentage(d[1] - d[0])} (${formatValue(d.data[d.key])})`); // Tooltip // const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .text(""); function onMouseOut(d) { tooltip.text(""); d3.select(this).attr("stroke", null); return tooltip.style("visibility", "hidden"); } function onMouseOver(d) { tooltip.text(this.dataset.tooltip); d3.select(this) .attr("stroke", "whitesmoke") .attr("stroke-width", "3"); return tooltip.style("visibility", "visible").html( `

${d.data.steuerfaktor}

${d.key}: ${formatPercentage(d[1] - d[0])}

` ); } function onMouseMove(d) { return ( tooltip //.style("display", "inline") .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY + "px") ); //.style("top", d3.event.pageY + "px") // on mobile tooltip above touch point //.style("left", d3.event.pageX + "px"); // d3.select(this).attr("dx") + "px" } bars .on("mouseover", onMouseOver) .on("mousemove", onMouseMove) .on("mouseout", onMouseOut); //svg.selectAll('text').style('font-size', 'calc(0vw + 12px)'); return chart.node(); } */36:[{"id":"6efe338de1242575075c6ecd5b13b0f52fa586c67a40c5dfd6235f055a6a80da0bc12bfcc633d891ecddfaca94dfa8e755c7e43a9d9c6187bfe404278b673496","href":"https://static.observableusercontent.com/files/6efe338de1242575075c6ecd5b13b0f52fa586c67a40c5dfd6235f055a6a80da0bc12bfcc633d891ecddfaca94dfa8e755c7e43a9d9c6187bfe404278b673496","name":"steuern_einkommensklasse_wide@3.csv","type":"text/csv","lastModified":1608195292319.894,"size":557}] 32:{"id":"cf4354f80d6201d1","slug":"steuerstatistik-steurpflichtige-nach-einkommensklasse","title":"Steuerstatistik - Anteil Steuerpflichtige und Steuerertrag nach Einkommensklasse, Kanton Zürich","thumbnail":"24b8e5354b186198c87afcd73632b7beb00499d68b119e33541eb0a59b3e1a83","access_level":"public","create_time":"$D2020-12-15T14:57:17.813Z","update_time":"$D2020-12-17T14:34:20.797Z","view_time":null,"first_public_time":"$D2020-12-15T16:49:55.277Z","has_unpublished_edits":null,"fork":{"id":"517da06b260cfbbc","slug":"steuerstatistik-steuerpflichtige-2000-2019-kanton-zuric","title":"Steuerstatistik - Steuerpflichtige (2000-2019), Kanton Zürich","owner":{"id":"c365a64096212d04","login":"cgrb","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"c365a64096212d04","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9c462d01fa9cdefc59de658728a5180d59049d26d0bf92c2d5b62b3b0753d40d","tier":"starter_2024"},"version":3078,"publish_version":3078,"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":1,"collection":null,"type":"notebook","body":{"title":"Steuerstatistik - Anteil Steuerpflichtige und Steuerertrag nach Einkommensklasse, Kanton Zürich","cells":[{"id":0,"value":"md`# Steuerstatistik - Anteil Steuerpflichtige und Steuerertrag nach Einkommensklasse, Kanton Zürich`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"legendEinkommensklassen = swatches({\n color: color,\n columns: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2732,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2487,"value":"data2 = d3.csvParse(\n await FileAttachment(\"steuern_einkommensklasse_wide@3.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2495,"value":"series = d3.stack()\n .keys(data2.columns.slice(1))\n .offset(d3.stackOffsetExpand)\n (data2)\n .map(d => (d.forEach(v => v.key = d.key), d))\n .sort((a, b) => d3.ascending(a.index, b.index))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2601,"value":"label = data2.columns.slice(1).sort(d3.descending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1656,"value":"domainKeys = [...Array.from(new Set(data2.map(d => d.steuerfaktor)))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`# Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"color = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range([\"#3f8ab4\", \"#9FCBE5\", \"#65A96A\", \"#B4DEB8\", \"#CEBE5B\", \"#F3EBAE\", \"#D27F46\", \"#F7C5A1\", \"#CD4B4E\", \"#F3A5A7\", \"#9479A4\", \"#D2C1DA\", \"#1B252B\", \"#767C7F\"])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`# Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"function formatValue(value) {\n return value.toLocaleString(\"de-CH\", {\n thousands: \"'\"\n });\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"formatPercentage = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"stylesEinkommenklassen = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2727,"value":"md`https://observablehq.com/@d3/stacked-normalized-horizontal-bar?collection=@d3/d3-shape`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"