2e:null 2f:["$","title",null,{"children":"Steuerstatistik - Entwicklung der Steuerpflichtigen, ihres Einkommmens und ihrer Vermögen, Kanton Zürich | cgrb | Observable"}] 34:T1080,chart2 = { const widthNow = d3.min([750, width]); const height = 550; const margin = { top: 20, right: 20, bottom: 55, left: 40 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //.style("display", "block"); const x = d3 .scaleLinear() .domain([d3.min(jahre), d3.max(jahre)]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain(d3.extent(data, d => +d.index_wert)) .nice() .range([height - margin.bottom, margin.top]); const xAxis2 = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickSizeOuter(0) .tickFormat(d3.format("d")) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(height / 80) .tickSize(-width + margin.left + margin.right) .tickFormat(d => d) // + "%" ) .call(g => g.selectAll(".domain").remove()) .call(g => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke", "lightgrey") //.attr("stroke-opacity", 0.25) .attr("stroke-width", 0.5) ) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", -margin.left) .attr("y", -margin.top) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(`↑ Index`) ); const line = d3 .line() .defined(d => !isNaN(d.index_wert)) .x(d => x(d.jahr)) .y(d => y(d.index_wert)); svg.append("g").call(xAxis2); svg.append("g").call(yAxis); const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .text(""); const tooltipLine = svg.append('line'); // Draw the data value line const station = svg .selectAll(".line") .data(series, d => d.key) .enter() .append("path") .attr("fill", "none") .attr("stroke", d => color(d.key)) .attr("stroke-width", 2) .attr("class", "line") .attr("d", d => line(d.values)); const tipBox = svg .append('rect') .attr('width', width) .attr('height', height) .attr('opacity', 0); function removeTooltip() { if (tooltip) tooltip.style("visibility", "hidden"); if (tooltipLine) tooltipLine.attr('stroke', 'none'); } function drawTooltip() { const year = Math.floor(x.invert(d3.mouse(tipBox.node())[0])); //console.log(year); const value = data.filter(d => +d.jahr === +year); tooltipLine .style("stroke", "#767C7F") .style("stroke-width", 0.75) .attr('x1', x(year)) .attr('x2', x(year)) .attr('y1', margin.top) .attr('y2', height - margin.bottom); tooltip .style("visibility", "visible") .html( `

${year}

Vermögen: ${Math.floor( value[2].index_wert ) }

Einkommen: ${Math.floor( value[1].index_wert )}

Steuerpflichtige: ${Math.floor( value[0].index_wert )}

` ) .style("top", d3.event.pageY + 28 + "px") .style("left", function(event) { if(d3.event.pageX > width/2) { return d3.event.pageX - 200 + "px"; } else { return d3.event.pageX + "px"; } }) .style("text-anchor", "start") .style('font-family', "Helvetica, sans-serif"); } tipBox .on('mousemove', drawTooltip) .on('mouseover', drawTooltip) .on('mouseout', removeTooltip); /// Adding source const source = "Quelle: Kantonsfinanzen, Kanton Zürich"; svg .append('text') .attr('y', height - 20) //height-20) .attr('dy', '1.2em') .attr('x', width) .text(source) .style('font-family', 'Helvetica, sans-serif') .attr('text-anchor', 'end') .style('fill', '#1B252B'); svg .selectAll('text') .style('font-family', 'Helvetica, sans-serif') .attr('font-size', '0.9rem'); return svg.node(); }35:[{"id":"5b4b4d9a4e6b5f0450884695f581da258f1d1dbb6518c4bd5f9930ee4fc08a39c28a845aae2d3ccf05a13f27c5ca501473c3d39e344638e4aa31eb220004c7af","href":"https://static.observableusercontent.com/files/5b4b4d9a4e6b5f0450884695f581da258f1d1dbb6518c4bd5f9930ee4fc08a39c28a845aae2d3ccf05a13f27c5ca501473c3d39e344638e4aa31eb220004c7af","name":"NP_Entwicklung_indexiert@2.csv","type":"text/csv","lastModified":1606842440003.071,"size":2893}] 32:{"id":"807be75cab255956","slug":"steuerstatistik-entwicklung-der-steuerpflichtigen-ihre","title":"Steuerstatistik - Entwicklung der Steuerpflichtigen, ihres Einkommmens und ihrer Vermögen, Kanton Zürich","thumbnail":"52e489e1b265581ab0852e6024c94f2d827b4a44c74ead77eae25f4eb4e1662f","access_level":"public","create_time":"$D2020-12-01T15:58:56.259Z","update_time":"$D2021-01-26T15:28:37.057Z","view_time":null,"first_public_time":"$D2020-12-01T18:08:47.892Z","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":2504,"publish_version":2504,"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":null,"type":"notebook","body":{"title":"Steuerstatistik - Entwicklung der Steuerpflichtigen, ihres Einkommmens und ihrer Vermögen, Kanton Zürich","cells":[{"id":0,"value":"md`# Steuerstatistik - Entwicklung der Steuerpflichtigen, ihres Einkommmens und ihrer Vermögen, Kanton Zürich`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"md`## Natürliche Personen (2000-2019)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"legendeIndexChart = swatches({\n color: d3.scaleOrdinal(['Vermögen', 'Einkommen', 'Steuerpflichtige'], ['#CD4B4E', '#CEBE5B','#3f8ab4']),\n columns: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1639,"value":"$34","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":1517,"value":"/*\ndata = {\n const csv = await FileAttachment(\"NP_Entwicklung_indexiert@2.csv\").text();\n const parseDate = d3.timeParse(\"%Y\");\n return d3.csvParse(csv, ({ jahr, steuerfaktor, index_wert }) => ({\n date: parseDate(jahr),\n steuerfaktor: steuerfaktor,\n index_wert: +index_wert\n }));\n}\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = Object.assign(\n d3.csvParse(\n await FileAttachment(\"NP_Entwicklung_indexiert@2.csv\").text(),\n d3.autoType\n )\n).sort(sortByDateAscending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"series = d3\n .nest() // nest function allows to group the calculation per level of a factor\n .key(d => d.steuerfaktor)\n .sortKeys(sortByDateAscending)\n .entries(data)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"keys = [...Array.from(new Set(data.map(d => d.steuerfaktor)))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"keyLabels = ['Steuerpflichtige', 'Einkommen', 'Vermögen']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"jahre = [...Array.from(new Set(data.map(d => d.jahr)))]","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":39,"value":"colors = ['#3f8ab4', '#CEBE5B', '#CD4B4E'] // green: '#65A96A'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"color = d3\n .scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(colors)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.date).left;\n return (data, date) => {\n const i = bisectDate(series, date, 1);\n const a = series[i - 1],\n b = series[i];\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2493,"value":"html``","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":1552,"value":"parseDate = d3.timeParse(\"%Y\")","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(\".0%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"function sortByDateAscending(a, b) {\n // Dates will be cast to numbers automagically:\n return a.date - b.date;\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 {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"