29:null 2a:["$","title",null,{"children":"Regierungserfahrung Jahre Ampel | RND | Observable"}] 2f:Td9b,viewof chart = addInteractions( Plot.plot({ width, height: 420, marginBottom: 50, marginLeft: 30, marginTop: 20, marginRight: 110, x: { label: alter_jahr_select, tickFormat: (d) => d.toString(), domain: alter_jahr_select == "Jahr" ? [1988, 2024] : [25, 75], ticks: alter_jahr_select == "Jahr" ? [1990, 2000, 2010, 2020] : [30, 40, 50, 60, 70] }, y: { label: "Jahre im Amt", ticks: [0, 5, 10, 15, 20, 25, 30] }, marks: [ // Linien Plot.lineY(regierung_jahre_tip, { filter: (d) => (d[alter_jahr_select] >= x_min) & (d.Name_Liste != name_select), x: alter_jahr_select, y: "Erfahrung", stroke: isDarkMode() ? "#435b70" : "#eff3f5", strokeWidth: 1, z: "Name", title: "Name" }), // ausgewählte Linien Plot.lineY(regierung_jahre_tip, { filter: (d) => (d[alter_jahr_select] >= x_min) & (d.Name_Liste == name_select), x: alter_jahr_select, y: "Erfahrung", stroke: "#4f80ff", strokeWidth: 2, z: "Name", title: "Name" }), // Plot.lineY(papst_tip, { // filter: (d) => d.Name_Liste == name_select, // x: "Alter", // y: "Erfahrung", // stroke: "#4f80ff", // strokeWidth: 2, // z: "Name", // title: "Name" // }), // Label rechts Plot.text( regierung_jahre_tip, Plot.selectLast({ x: alter_jahr_select, y: "Erfahrung", z: "Name", stroke: "#fff", strokeWidth: 3, text: (d) => `${d.Vorname} ${d.Nachname}\n${d.Amt}\n${ d.Gebietskörperschaft }\n${d.Erfahrung.toLocaleString("de", { maximumFractionDigits: 1 })} Jahre Erfahrung`, fill: "#4f80ff", fillOpacity: (d) => (d.Name == name_ordered ? 1 : 0), strokeOpacity: (d) => (d.Name == name_ordered ? 1 : 0), title: "Name", textAnchor: "middle", lineAnchor: "bottom", dy: -5 }) ), // Punkt rechts Hover Plot.dot( regierung_jahre_tip, Plot.selectLast({ x: alter_jahr_select, y: "Erfahrung", z: "Name", r: 3, fill: "#4f80ff", fillOpacity: 0, title: "Name" }) ), // Punkt rechts Plot.dot( regierung_jahre_tip, Plot.selectLast({ x: alter_jahr_select, y: "Erfahrung", z: "Name", r: 3, fill: "#4f80ff", filter: (d) => d.Name == name_ordered, title: "Name" }) ), // Label am Punkt Plot.text( regierung_jahre_tip, Plot.pointer({ x: alter_jahr_select, y: "Erfahrung", z: "Name", stroke: "#fff", text: (d) => `${d[alter_jahr_select]}\n${d.Nachname}\n${d.Amt}\n${d.Gebietskörperschaft}`, fill: "#4f80ff", title: "Name", textAnchor: "middle", lineAnchor: "top", dy: 8 }) ), // Hover Punkt Plot.dot( regierung_jahre_tip, Plot.pointer({ x: alter_jahr_select, y: "Erfahrung", fill: "#4f80ff", r: 3 }) ) ] }) )30:Td6c,addInteractions = (chart, styles) => { //based on the popular Mike Freeman's Plot Tooltip: https://observablehq.com/@mkfreeman/plot-tooltip const stroke_styles = { stroke: "#4f80ff", "stroke-width": 2 }; const fill_styles = { fill: "#4f80ff", "fill-opacity": 1 }; const label_styles = { fill: "#4f80ff", "fill-opacity": 1, "stroke-opacity": 1 }; const invisible_styles = { "fill-opacity": 0 }; const non_interacted_line_styles = { stroke: isDarkMode() ? "#435b70" : "#efefef", "stroke-width": 1 }; const non_interacted_label_styles = { fill: "#efefef", "fill-opacity": 0, "stroke-opacity": 0 }; const non_interacted_dot_styles = { fill: "#efefef", "fill-opacity": 0 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } }); // Define the styles chart.appendChild(html``32:[{"id":"89eaa8c498da09fb7bc143028c978de85e0a10ab04128ba10db3151653d412cd88da56055ae84bd284473fe9cffc2b7f82ce89df681eb0e2d795d82c692d07b6","href":"https://static.observableusercontent.com/files/89eaa8c498da09fb7bc143028c978de85e0a10ab04128ba10db3151653d412cd88da56055ae84bd284473fe9cffc2b7f82ce89df681eb0e2d795d82c692d07b6","name":"regierung_ampel.csv","type":"text/csv","lastModified":1745851838235.853,"size":633518}] 2d:{"id":"a2902461de2f2a24","slug":null,"title":"Regierungserfahrung Jahre Ampel","thumbnail":"bafc02463dcac9598ba410ed9edc7974f1d04ae2abecef488e477e6b021d71c4","access_level":"public","create_time":"$D2024-12-28T18:35:17.378Z","update_time":"$D2025-04-28T15:36:33.475Z","view_time":null,"first_public_time":"$D2024-12-28T18:35:17.378Z","fork":{"id":"a3368959119c4365","slug":null,"title":"Plot: Multi-series line chart, isolate series hover interaction - tip / pointer dev","owner":{"id":"46d757b0a7e70394","login":"mtsvelik","name":"Misha Tsvelik"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b8db01b7dd27a055","login":"rnd","name":"RND","avatar_url":"https://avatars-next.observableusercontent.com/8cd6e8f8a280701f2c59b563c390950d7287c4e64c058ec466b6042ca5b6e9e1","tier":"starter_2024"},"version":755,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5f9b41b7f852d3da","login":"rnd","name":"RND","avatar_url":"https://avatars-next.observableusercontent.com/8cd6e8f8a280701f2c59b563c390950d7287c4e64c058ec466b6042ca5b6e9e1","tier":null}],"members":[{"type":"individual","id":"5f9b41b7f852d3da","login":"rnd","name":"RND","avatar_url":"https://avatars-next.observableusercontent.com/8cd6e8f8a280701f2c59b563c390950d7287c4e64c058ec466b6042ca5b6e9e1","tier":null,"role":"editor"},{"type":"team","id":"b8db01b7dd27a055","login":"rnd","name":"RND","avatar_url":"https://avatars-next.observableusercontent.com/8cd6e8f8a280701f2c59b563c390950d7287c4e64c058ec466b6042ca5b6e9e1","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Regierungserfahrung Jahre Ampel","cells":[{"id":0,"value":"# Regierungserfahrung Jahre Ampel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"title = new URLSearchParams(document.location.search).get(\"title\") ??\n \"Die Karrieren der Herrschenden\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"regierung_jahre_title = html`\n

${title}

\n Regierungserfahrung der Amtsträger in Bund und Ländern. Stand: ${stand}\n

\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof gebiet_select = Inputs.select(\n [\n \"Deutschland\",\n \"Baden-Württemberg\",\n \"Bayern\",\n \"Berlin\",\n \"Brandenburg\",\n \"Bremen\",\n \"Hamburg\",\n \"Hessen\",\n \"Mecklenburg-Vorpommern\",\n \"Niedersachsen\",\n \"Nordrhein-Westfalen\",\n \"Rheinland-Pfalz\",\n \"Saarland\",\n \"Sachsen\",\n \"Sachsen-Anhalt\",\n \"Schleswig-Holstein\",\n \"Thüringen\"\n ],\n { label: \"Gebiet auswählen:\", value: \"Baden-Württemberg\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof name_select = Inputs.select(\n new Set(\n regierung_jahre\n .filter(\n (d) => (d.Jahr == 2024) & (d.Gebietskörperschaft == gebiet_select)\n )\n .map((d) => d.Name_Liste)\n ),\n {\n label: \"Person auswählen:\",\n value: person_erfahren[0].Nachname.concat(\", \").concat(\n person_erfahren[0].Vorname\n )\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"viewof alter_jahr_select = Inputs.radio([\"Alter\", \"Jahr\"], {\n label: \"Darstellung:\",\n value: \"Alter\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"regierung_jahre_credits = md`

Grafik: RND/Christ • Quelle: eigene Recherche

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"stand = new Date(today)\n .getDate()\n .toString()\n .concat(\".\")\n .concat((new Date(today).getMonth() + 1).toString())\n .concat(\".\")\n .concat(new Date(today).getFullYear().toString())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"// today = new Date().toJSON().slice(0, 10).replace(/-/g, \"-\")\n\ntoday = new Date(2025, 3, 29).toJSON().slice(0, 10).replace(/-/g, \"-\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"x_min = alter_jahr_select == \"Jahr\" ? 1988 : 25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"regierung_jahre_data = FileAttachment(\"regierung_ampel.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"regierung_jahre = regierung_jahre_data.map((d) => ({\n ...d,\n Erfahrung: +d.Erfahrung,\n Jahr: +d.Jahr,\n Alter: +d.Alter,\n Name: d.Vorname.concat(\" \").concat(d.Nachname),\n Name_Liste: d.Nachname.concat(\", \").concat(d.Vorname)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"regierung_jahre_tip = regierung_jahre\n .filter((d) => d.Name != name_ordered)\n .concat(regierung_jahre.filter((d) => d.Name == name_ordered))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"SELECT * FROM regierung_jahre\n WHERE Gebietskörperschaft = ${gebiet_select}\n ORDER BY Jahr desc, Erfahrung desc\n LIMIT 2","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"person_erfahren","database":"var:regierung_jahre"},{"id":298,"value":"name_ordered = name_select\n .split(\", \")[1]\n .concat(\" \")\n .concat(name_select.split(\", \")[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"externallyAppliedInteractions = { \n const text = chart? chart.Name: null \n const refresh = () => {\n //untag it\n d3.select('svg').classed(\"hovered-series\", false)\n d3.selectAll(`[__title]`).classed(\"pointer-interaction\", false)\n //raise series in order of largest aggregates overall\n seriesOrder.forEach((text) => {\n d3.selectAll(`[__title=\"${text}\"]`).raise();\n })\n }\n \n if(text){\n refresh();\n // Raise it\n d3.selectAll(`[__title=\"${text}\"]`).raise()\n \n //tag it\n d3.selectAll(`[__title=\"${text}\"]`).classed(\"pointer-interaction\", true)\n d3.select('svg').classed(\"hovered-series\", true)\n } else {\n refresh();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"grouped = regierung_jahre_tip.reduce((acc, row) => {\n if (!acc[row.Name]) {\n acc[row.Name] = 0;\n }\n acc[row.Name] += row.Erfahrung;\n return acc;\n}, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"seriesOrder = Object.entries(grouped)\n .sort((a, b) => b[1] - a[1]) // optional: sort by sum descending\n .map(([name]) => name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// To generate a unique ID for each chart so that they styles only apply to that chart\nid_generator = () => {\n var S4 = function () {\n return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\n };\n return \"a\" + S4() + S4();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"isDarkMode = () =>\n window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"ns = Inputs.text().classList[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"