2d:null 2e:["$","title",null,{"children":"openZH Total Aufrufe 2019-2020 | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T4a3,totalVistsChart2 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width + 5, height]) .attr('id', 'STATchart1') .style("overflow", "visible"); let pathData = d3 .line() .x(d => x(d.month_short)) .y(d => y(d.nb_visits)) .curve(d3.curveMonotoneX)(totalVisitsByMonth); svg .append("path") .datum(totalVisitsByMonth) .attr("fill", "none") .attr("stroke", "#00797b") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", pathData); svg.append("g").call(xAxis); svg.append("g").call(xAxisYear); svg.append("g").call(yAxis); const tooltip = svg.append("g"); svg.on("touchmove mousemove", function(event) { const { month_short, nb_visits } = bisect(d3.pointer(event, this)[0]); tooltip .attr("transform", `translate(${x(month_short)},${y(nb_visits)})`) .call( callout, `${nb_visits.toLocaleString("de-CH")} ${formatDate(month_short)}` ); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); svg.selectAll('text').style('font', 'calc(0vw + 16px) sans-serif'); return svg.node(); }34:T4c3,totalVistsChart = { const tooltip = new Tooltip(); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('id', 'STATchart1') .style("overflow", "visible"); let pathData = d3 .line() .x(d => x(d.month_short)) .y(d => y(d.nb_visits)) .curve(d3.curveMonotoneX)(totalVisitsByMonth); svg .append("path") .datum(totalVisitsByMonth) .attr("fill", "none") .attr("stroke", "#00797b") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", pathData); svg.append("g").call(xAxis); svg.append("g").call(xAxisYear); svg.append("g").call(yAxis); svg .append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(totalVisitsByMonth)) .join("rect") .attr("x", ([a, b]) => x(a.month_short)) .attr("height", height) .attr("width", ([a, b]) => x(b.month_short) - x(a.month_short)) .on("mouseover", (event, [a]) => tooltip.show(a)) .on("mouseout", () => tooltip.hide()); svg.append(() => tooltip.node); svg.selectAll('text').style('font', 'calc(0vw + 16px) sans-serif'); return svg.node(); }35:[{"id":"1a31573737a1b9e19bad66874887d19465355e2383ee5447cd2242d8daaf181ecc7981f105f2ddd00a6f77e9a8e122b80ef532b8df8fd8b48612f93beb12142c","href":"https://static.observableusercontent.com/files/1a31573737a1b9e19bad66874887d19465355e2383ee5447cd2242d8daaf181ecc7981f105f2ddd00a6f77e9a8e122b80ef532b8df8fd8b48612f93beb12142c","name":"openZH-WebAnalytics-2020-10-03.csv","type":"text/csv","lastModified":1601713877682.962,"size":2930015},{"id":"d8b2c37762b80c9e1f297508ed568f7837c9d158c9990ea39cfdc6b5ab9a02b13622a73c3471e6fa5e4885e206129bc9a028ae2f4ec293b10e27d48885fa4ab9","href":"https://static.observableusercontent.com/files/d8b2c37762b80c9e1f297508ed568f7837c9d158c9990ea39cfdc6b5ab9a02b13622a73c3471e6fa5e4885e206129bc9a028ae2f4ec293b10e27d48885fa4ab9","name":"openZH-WebAnalytics-2020-11-16.csv","type":"text/csv","lastModified":1605515427191.32,"size":4002326},{"id":"17a56a1fc0b13a76a9de9f17382b7628a2de2245fdfa1faa1add8ad9503428c988894c772ee6dfdec873dc54f94b59e2b792be35d5ad65e827c43ad093f1a413","href":"https://static.observableusercontent.com/files/17a56a1fc0b13a76a9de9f17382b7628a2de2245fdfa1faa1add8ad9503428c988894c772ee6dfdec873dc54f94b59e2b792be35d5ad65e827c43ad093f1a413","name":"openZH-WebAnalytics-2020-12-03.csv","type":"text/csv","lastModified":1607007701145.336,"size":4146261}] 31:{"id":"8fdcb3b73535d248","slug":"openzh-total-aufrufe-2019-2020","title":"openZH Total Aufrufe 2019-2020","thumbnail":"6d05d6167d5c8c8f9e0802475fe15027a22ac1d8654ea3989c15847e1037c461","access_level":"public","create_time":"$D2020-09-17T08:49:08.819Z","update_time":"$D2020-12-03T15:01:44.065Z","view_time":null,"first_public_time":"$D2020-09-17T08:50:19.011Z","has_unpublished_edits":null,"fork":true,"stars":0,"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":708,"publish_version":708,"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":"4b8faab8194f3ba4","slug":"openzh","title":"openZH","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"openZH Total Aufrufe 2019-2020","cells":[{"id":0,"value":"md`# openZH Total Aufrufe 2019-2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md`Die Fach- und Koordinationsstelle OGD veröffentlicht monatliche Nutzungsstatistiken der auf opendata.swiss publizierten Datensätze kantonaler Organe.\n\n**[Monatliche Nutzungsstatistiken der offenen Behördendaten →](https://opendata.swiss/de/dataset/web-analytics-der-open-government-data-des-kantons-zuerich)**\n\n**[Dashboard (Beta) der offenen Behördendaten →](https://openzh.shinyapps.io/openzh_dashboard/)**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Data & Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"rohdaten = Object.assign(\n d3.csvParse(\n await FileAttachment(\"openZH-WebAnalytics-2020-12-03.csv\").text(),\n d3.autoType\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"visitsByOrganisation = d3.groups(rohdaten, d => d.label, d => d.month_short)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"totalVisitsByMonth = d3\n // compute the total vists per month with d3.sum\n .rollups(rohdaten, v => d3.sum(v, d => d.nb_visits), d => +d.month_short)\n // Formats the rollups' output in order to get the expected output (the map transformation)\n .map(([k, v]) => ({ month_short: k, nb_visits: v }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"/*widthNow = d3.min([750, width])*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({ top: 20, right: 40, bottom: 50, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"ch_DE = d3.timeFormatDefaultLocale({\n decimal: \".\",\n thousands: \"'\",\n grouping: [3],\n currency: [\"CHF\", \" \"],\n dateTime: \"%a %b %e %X %Y\",\n date: \"%d.%m.%Y\",\n time: \"%H:%M:%S\",\n periods: [\"vormittags\", \"nachmittags\"],\n days: [\n \"Sonntag\",\n \"Montag\",\n \"Dienstag\",\n \"Mittwoch\",\n \"Donnerstag\",\n \"Freitag\",\n \"Samstag\"\n ],\n shortDays: [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n months: [\n \"Januar\",\n \"Februar\",\n \"März\",\n \"April\",\n \"Mai\",\n \"Juni\",\n \"Juli\",\n \"August\",\n \"September\",\n \"Oktober\",\n \"November\",\n \"Dezember\"\n ],\n shortMonths: [\n \"Jan.\",\n \"Feb.\",\n \"Mär.\",\n \"Apr.\",\n \"Mai\",\n \"Jun.\",\n \"Jul.\",\n \"Aug.\",\n \"Sep.\",\n \"Okt.\",\n \"Nov.\",\n \"Dez.\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"parseTime = d3.timeParse(\"%Y-%m\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"formatDate = ch_DE.format(\"%B %Y\")\n\n/*d3.utcFormat(\"%B %Y\")*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"formatYear = ch_DE.format(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent(totalVisitsByMonth, d => d.month_short))\n .range([margin.left + 40, width - margin.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(totalVisitsByMonth, d => d.nb_visits)])\n .nice()\n .range([height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"xAxisYear = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom + 22})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(d3.utcYear)\n .tickFormat(d3.timeFormat('%Y'))\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(d3.utcMonth)\n .tickFormat(d3.timeFormat('%b')) // only showing last month of quarter\n .ticks(width / 100)\n .tickSizeOuter(0)\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisRight(y)\n .tickFormat(d => d.toLocaleString(\"de-CH\"))\n .tickSize(width - margin.left - margin.right)\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .selectAll(\".tick:not(:first-of-type) line\")\n .attr(\"stroke-opacity\", 0.5)\n .attr(\"stroke-dasharray\", \"2,2\")\n )\n .call(g =>\n g\n .selectAll(\".tick text\")\n .attr(\"x\", 0)\n .attr(\"dy\", -4)\n )\n .append('text')\n .attr('x', -margin.top)\n .attr('y', -margin.left + 20)\n .text('Total eindeutige Aufrufe')\n .style('fill', 'dimgrey')\n .attr('transform', 'rotate(-90)')\n .style('text-anchor', 'end');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"class Tooltip {\n constructor() {\n this._month_short = svg``;\n this._nb_visits = svg``;\n this.node = svg`\n \n ${this._month_short}\n ${this._nb_visits}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\n \"transform\",\n `translate(${x(d.month_short)},${y(d.nb_visits)})`\n );\n this._month_short.textContent = formatDate(d.month_short);\n this._nb_visits.textContent = d.nb_visits.toLocaleString(\"de-CH\");\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"bisect = {\n const bisect = d3.bisector(d => d.month_short).left;\n return mx => {\n const data = totalVisitsByMonth;\n const date = x.invert(mx);\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return b && 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":458,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"calc(0vw + 16px) sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"whitesmoke\")\n .attr(\"opacity\", 0.6)\n .attr(\"stroke\", \"dimgrey\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text(d => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${y - 15})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},-5H-5l5,+5l5,-5H${w / 2 + 10}v${h - 80}h-${w + 20}z`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"/*`M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 10}h-${w + 20}z`*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`## Not Used`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`# Reading`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`d3.group() - https://observablehq.com/@d3/d3-group`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"