2d:null 2e:["$","title",null,{"children":"Hamburg from Dusk till Dawn | Tereza Iofciu | Observable"}] 33:T85d,chart = { const svg = d3.select(DOM.svg(width, height)); let bars = svg.append("g").attr("transform", "translate(0, 0)"); createTooltip(); let categories = bars.selectAll(".bar") .data(stackedData) .enter() .append("g") .attr("class", "day") .attr("fill", (d,i)=>colorPalette(i)); categories .selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", (d, i) => x(i)) .attr("y", d => { return d[1] !== d[0] ? y(d[1]) : 0; }) .attr("rx", "3") .attr("ry", "3") .attr("width", x.bandwidth()) .attr("height", d => { return d[1] !== d[0] ? y(d[0]) - y(d[1]) : 0; }) .on("mouseenter", (d, i, nodes) => { let tooltip = d3.select("#tooltip"); tooltip.style("opacity", 1); let keys = Object.keys(data[0]); let legend = keys.map((k,i) => { let color = colorPalette(i-1); if(i != 0){ return `

${k}: ${hourformat(d.data[k]/60)} hours

` } else { return `

${k}: ${d.data[k]}

` } }).reverse().join("\n"); d3.select("#tooltip-text").html(`

` + legend + `

`); let barPos = nodes[i].getBoundingClientRect(); let tooltipWidth = tooltip.node().getBoundingClientRect().width; tooltip .style("left", ((barPos.x + (barPos.width / 2)) - (tooltipWidth / 2)) + "px") .style("top", (d3.event.pageY - 160) + "px"); }) .on("mouseleave", () => { console.log("LEAVE"); d3.select("#tooltip").style("opacity", 0); }); return svg.node(); }34:T492, createTooltip = () => { let tooltipWrapper = d3.select("body") .append("div") .attr("id", "tooltip") .style("opacity", "0") .style("pointer-events", "none") .style("position", "absolute") .style("transition", "all 0.1s ease-out"); tooltipWrapper.append("div") .attr("class", "tooltip") .attr("id", "tooltip-text") .attr("style", `background: #fff; z-index: 10; display: inline-block; pointer-events: none; text-align: left; padding: 0.6em 2em; padding-left: 7px; padding-right: 7px; white-space: nowrap; font: 12px sans-serif; background: white; border-radius: 8px;` ); tooltipWrapper.append("div") .attr("style", `position: absolute; bottom: 0; left: 50%; width: 13px; height: 13px; background: white; border: 1px solid #ddd; border-top-color: transparent; border-left-color: transparent; transform: translate(-50%, 50%) rotate(45deg); transform-origin: center center; z-index: 10;` ) } 35:[] 31:{"id":"b680dc26614a00b7","slug":"hamburg-from-dusk-till-dawn","title":"Hamburg from Dusk till Dawn","thumbnail":"5810379af08fcad2b3cbdca045d0e3730f9ad2b458b8c71f2b0e8c7c0cabae7d","access_level":"public","create_time":"$D2021-04-24T13:36:35.283Z","update_time":"$D2022-11-23T16:36:45.699Z","view_time":null,"first_public_time":"$D2021-04-24T20:46:01.880Z","fork":{"id":"d6a467e6d9949b4e","slug":"stacked-bar-plot","title":"Stacked bar plot","owner":{"id":"b5ec244735010782","login":"jvsaez","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"bcfdd45295e26854","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":"starter_2024"},"version":295,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"30151ae41f7fc118","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":null}],"members":[{"type":"individual","id":"30151ae41f7fc118","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"51a448c1cca4a0e8","slug":"30daychartchallenge","title":"30DayChartChallenge","owner":{"id":"bcfdd45295e26854","login":"terezaif","name":"Tereza Iofciu"}},"type":"notebook","body":{"title":"Hamburg from Dusk till Dawn","cells":[{"id":0,"value":"md`# Hamburg from Dusk till Dawn\n\nOne can see the daylight saving in action and also that the year is not entirely symetrical. Data is for 2020.\n\nDay 24 of [30DayChartChallenge](https://twitter.com/30DayChartChall) - *monochrome* time series`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md `Data calculated using the Astra python package\n\n[Hamburg script](https://github.com/terezaif/30DayChartChallenge_Collection2021/blob/main/code/sunset.py)\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"hourformat = d3.format (\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":" colorPalette = d3.scaleOrdinal().domain([0, Object.keys(data).slice(1).length - 1]).range([\"#111111\", \"#666666\", \"#cccccc\", \"#eeeeee\", \"#999999\", \"#666666\",\"#111111\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"padding = ({x:0.06, y:0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"x = d3.scaleBand().range([margin.left, width]).domain(data.map((d,i)=>i)).padding(padding.x);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"y = d3.scaleLinear().range([height, margin.top])\n .domain([0,1440]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"y2 = d3.scaleLinear().rangeRound([height, margin.top])\n .domain([0,d3.max(data, d => {\n let keys = Object.keys(d);\n let maximum = 0;\n keys.forEach(k => { maximum += d[k]; })\n return maximum\n })]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"margin = ({\n top: 10,\n right: 10,\n bottom: 10,\n left: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"stackedData = d3.stack().keys(Object.keys(data[0]).slice(1))(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"data = data_raw[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"data_raw = Promise.all(\n [\n \"https://raw.githubusercontent.com/terezaif/30DayChartChallenge/main/2021/dataset/sunrise_Hamburg.csv\"\n ].map((file) => d3.csv(file, d3.autoType))\n)","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"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"