41:null 42:["$","title",null,{"children":"Calendar chart try-out | Joe Murphy | Observable"}] 48:Tb46,calendar = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height * years.length]) .attr("id", "calendar") .attr("font-family", "sans-serif") .attr("font-size", 10); const mouseOverFunction = function (event, d) { const div = d3.select("#hover").style("opacity", 0); div .transition() .duration(500) .style("opacity", 0.9) .attr("class", "tooltip show"); var markup = `

${d3.timeFormat("%B %-d")(d.date)}
${d.headline}

`; if (d.headlines.length > 1) { for (var i = 1; i < d.headlines.length; i++) { markup += `

${d.headlines[i]}

`; } } div .html(markup) .style("left", event.pageX + 5 + "px") .style("top", event.pageY - 120 + "px"); }; const mouseOutFunction = function (event, d) { const div = d3.select("#hover"); div .transition() .duration(500) .style("opacity", 0) .attr("class", "tooltip hide"); }; const year = svg .selectAll("g") .data(years) .join("g") .attr( "transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})` ); year .append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year .append("g") .attr("text-anchor", "end") .selectAll("text") .data(d3.range(7)) .join("text") .attr("x", -5) .attr("y", (i) => (countDay(i) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); year .append("g") .selectAll("rect") .data(([, values]) => values) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("class", "cell") .attr( "x", (d) => timeWeek.count(d3.timeYear(d.date), d.date) * cellSize + 0.5 ) .attr("y", (d) => countDay(d.date.getDay()) * cellSize + 0.5) .attr("fill", (d) => color(d.value)) .on("click", (event, d) => { console.log(d.url); window.open(d.url, "test"); }) .on("mouseover", mouseOverFunction) .on("mouseout", mouseOutFunction); /* .append("title") .text((d) => { //console.log(d); return `${d3.timeFormat("%Y-%m-%d")(d.date)}\n${d.value} items`; }); */ const month = year .append("g") .selectAll("g") .data(([, values]) => d3.timeMonths( d3.timeMonth(values[values.length - 1].date), d3.timeMonth(values[0].date) ) ) .join("g"); month .filter((d, i) => i) .append("path") .attr("fill", "none") .attr("stroke", "#efefef") .attr("stroke-width", 3) .attr("d", pathMonth); month .append("text") .attr( "x", (d) => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2 ) .attr("y", -5) .text(formatMonth); return svg.node(); }49:[{"id":"c99cb71a65ef288c92fadc84a33222ea64275e846406e0288cbc7e62d819b2d8886b42e8d65db6730c908272fed293ed17474ad61e133b712070079be9643feb","href":"https://static.observableusercontent.com/files/c99cb71a65ef288c92fadc84a33222ea64275e846406e0288cbc7e62d819b2d8886b42e8d65db6730c908272fed293ed17474ad61e133b712070079be9643feb","name":"data@3.csv","type":"text/csv","lastModified":1631996510381.448,"size":25978},{"id":"c395d07adca721c683777bb0a4aabcdccfb26725204293f000e783572419b0ade72c95349502d35b3d7a606edd7028491d8a3751eac90e7574d1cc9622f08c47","href":"https://static.observableusercontent.com/files/c395d07adca721c683777bb0a4aabcdccfb26725204293f000e783572419b0ade72c95349502d35b3d7a606edd7028491d8a3751eac90e7574d1cc9622f08c47","name":"data@5.csv","type":"text/csv","lastModified":1632011432692.016,"size":42595}] 46:{"id":"f32a1a41115c2d6f","slug":"calendar-dataviz-try-out","title":"Calendar chart try-out","thumbnail":"6b3bcebc895f50e7ea299297995628e7d89f6cc40222b793c4a488374855702c","access_level":"public","create_time":"$D2021-09-18T20:08:04.626Z","update_time":"$D2021-09-26T19:06:23.662Z","view_time":null,"first_public_time":"$D2021-09-18T20:29:12.645Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a6af4dee8234e6ec","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":"starter_2024","bio":"Data editor @ NBC News.","following":false},"version":219,"publish_version":219,"role":null,"authored":false,"authors":[{"type":"individual","id":"c2537b21a76a81f1","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":null,"bio":"Data editor @ NBC News.","following":false}],"members":[{"type":"individual","id":"c2537b21a76a81f1","login":"freejoe76","name":"Joe Murphy","avatar_url":"https://avatars-next.observableusercontent.com/4ae4fb28e742e65da2e82a2957dc148c74ca8a34da7d17d55f936390a5d34dba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Calendar chart try-out","cells":[{"id":0,"value":"# Calendar chart try-out\nCopied, then adjusted to fit the data, from https://observablehq.com/@floatingpurr/visualizing-twitter-data . Squares are clickable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"{\n const divEl = DOM.element(\"div\");\n divEl.innerText = \"sdfs\";\n const div = d3\n .create(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0)\n .attr(\"id\", \"hover\");\n divEl.appendChild(div.node());\n //return divEl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"color = {\n //const max = d3.quantile(years, 0.80, ([,values]) => values[0][1].length);\n const max = d3.max(years, (v) => d3.max(v[1], (d) => d.value));\n return scale(d3.interpolateRdPu).domain([0, max]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dateReducer = (d) => {\n // group by date\n const groups = d3.groups(d, (v) => new Date(v.date)).reverse();\n\n // count items per date\n return groups.map(([date, items]) => ({\n date: date,\n value: items.length,\n url: items[0].url,\n headline: items[0].headline,\n urls: items.map((i) => i.url),\n headlines: items.map((i) => i.headline)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"years = d3.rollups(data, dateReducer, (d) => d.date.split(\"-\")[0]).reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"years_details = d3\n .groups(\n data,\n (d) => d.date.split(\"-\")[0],\n (d) => new Date(d3.timeFormat(\"%Y-%m-%d\")(d.date))\n )\n .reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"scale = d3.scaleSequential","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 135","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"//countDay = weekday === \"sunday\" ? (i) => i : (i) => (i + 6) % 7\ncountDay = (i) => i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"formatDay = (i) => \"SMTWTFS\"[i]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"//timeWeek = weekday === \"sunday\" ? d3.timeSunday : d3.timeMonday\ntimeWeek = d3.timeMonday","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function pathMonth(t) {\n //const n = weekday === \"weekday\" ? 5 : 7;\n const n = 7;\n const d = Math.max(0, Math.min(n, countDay(t.getDay())));\n const w = timeWeek.count(d3.timeYear(t), t);\n return `${\n d === 0\n ? `M${w * cellSize},0`\n : d === n\n ? `M${(w + 1) * cellSize},0`\n : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`\n }V${n * cellSize}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"formatMonth = d3.timeFormat(\"%b\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"calendarViews = [\n { value: \"weekday\", text: \"Weekdays only\" },\n { value: \"sunday\", text: \"Sunday-based weeks\" },\n { value: \"monday\", text: \"Monday-based weeks\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"cellSize = 17","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"data = FileAttachment(\"data@5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 47:"$46:body"