31:T879,dotz = { let box_width = ~~(width/week) // size of a block for a circle, the circle is half this value as it's a radius. let box_height = box_width let column = week // number of columns let row = 364/week // number of rows NB: ffff the leap year 366 but would need to inject a rect for the leap year. let svg_width = week*box_width // svg width and height let svg_height = row*box_height let TT_ID = [] // ToolTip data const svg = d3.create('svg') .attr('width', svg_width) // should add margins .attr('height',svg_height); // + to show that last box. hmmm there could be space there for a legend. for (let i=0;i { let G = svg.selectAll(`#X${d.x*box_width}Y${d.y*box_height}`) // select g group G.append('circle') .attr('class',d3.timeFormat('c_%Y')(new Date(d.date))) .attr('cx', d.x*box_width+box_width/2 ) .attr('cy', d.y*box_height+box_height/2 ) .attr('r', radiusScale(d.value)) // .attr('fill', `${colours[teColour][0]}`) // colr[~~(i/365)]) .attr('pointer-events','none') // add date and number of downloads too the Tooltop data TT_ID[_.findIndex(TT_ID, (o) => o.id == `#X${d.x*box_width}Y${d.y*box_height}`)].data.push(`${d3.timeFormat('%a %d %B %Y')(new Date(d.date))} had ${d3.format(",")(d.value)} downloads` ) }) // end of draw circles loop }// i loop TT_ID.forEach( d => { // append tooltips to the rectangles. svg.select(d.id) .append("title") .text(_.join(d.data, '\n')) }) return svg.node() } 32:Te4c,md`--- ***What was tried before I clicked onto the 364 day chart.*** The main thing I would change if I did this again is to use an overlayed calander structure and shift the overlays left and right to ligh up the days. It would still not show the dip in downloads for the public holidays. --- ## Matchuping up data by days and not by date. ### objective: plot circles thats size represnts the number of daily downloads. Each row has 4 weeks of data so the columns days match up. That's 28 columns (4 weeks) by 14 rows. The last row only has 1 box and will contain the legand and the two data points that represent the 2 leap years. NPM download statisitcs began on **2015-02-27** I plot the background rectangles/boxes to start and assign them an ID made up from the Day and the Month. So the top left box would have an ID is B02_27 and the last box os B02_26. That give me a way to reference where to draw the cricles (te_id Māori for The ID). Each year the the date of the previous yes day advances by **one** or **two** days in leap years. So 29th of March in 2015 was a Sunday and in 2016 it's a Tuesday due to 2016 being a leap year. ** 2016 and 2020 were both leap years. ** ## shifting days Dates are keyed to 27/6/2015, so each year has to take account of this drift to keep the days in alignment. ~~~ ["Sun", "03", "29", "15"] ["Tue", "03", "29", "16"] 2 days ahead ["Sat", "01", "23", "16"] <<<< not 2015 but it is Jan ["Mon", "01", "23", "17"] 2 day ahead ["Wed", "05", "06", "15"] ["Sat", "05", "06", "17"] 3 days ahead ["Mon", "03", "02", "15"] ["Fri", "03", "02", "18"] 4 days ahead ["Mon", "04", "06", "15"] ["Sat", "04", "06", "19"] 5 days ahead ["Sun", "01", "31", "16"] <<<< not 2015 but it is Jan ["Fri", "01", "31", "20"] 5 days ahead ["Mon", "02", "15", "16"] <<< not 2015 but it is Feb ["Mon", "02", "15", "21"] 0 ~~~ Those Data hickups are due to the NPM dataset starting on 27/6/2015 making the end of the year 26/6/2016 So dates from Jan 01 - feb 26 2015 will have an ID located 2016. Lining up the days also had to take into account that the year could fall outside te_id (lenght 365) as it's scope is one year. ~~~ te_id fixed index gap index looking for result in te_id NPM dataset index 369 -5 4 ["Wed", "02", "26", "20"] ["Fri", "02", "26", "16"] 358 368 -5 3 ["Tue", "02", "25", "20"] ["Thu", "02", "25", "16"] 359 367 -5 2 ["Mon", "02", "24", "20"] ["Wed", "02", "24", "16"] 360 366 -5 1 ["Sun", "02", "23", "20"] ["Tue", "02", "23", "16"] 361 365 -5 0 ["Sat", "02", "22", "20"] ["Mon", "02", "22", "16"] 362 368 -4 3 ["Tue", "02", "26", "19"] ["Fri", "02", "26", "16"] 723 367 -4 2 ["Mon", "02", "25", "19"] ["Thu", "02", "25", "16"] 724 366 -4 1 ["Sun", "02", "24", "19"] ["Wed", "02", "24", "16"] 725 365 -4 0 ["Sat", "02", "23", "19"] ["Tue", "02", "23", "16"] 726 367 -3 2 ["Mon", "02", "26", "18"] ["Fri", "02", "26", "16"] 1088 366 -3 1 ["Sun", "02", "25", "18"] ["Thu", "02", "25", "16"] 1089 365 -3 0 ["Sat", "02", "24", "18"] ["Wed", "02", "24", "16"] 1090 366 -2 1 ["Sun", "02", "26", "17"] ["Fri", "02", "26", "16"] 1453 365 -2 0 ["Sat", "02", "25", "17"] ["Thu", "02", "25", "16"] 1454 ~~~ leap years are undefined in te_id so I skip them and play to drawn when the rest is working. ~~~ result = undefined looking_for (4) ["Mon", "02", "29", "16"] result = undefined looking_for (4) ["Sat", "02", "29", "20"] ~~~ `33:[{"id":"5a57a3a26ccd2fbbf0deffed6fbb4701f3a81368dfcd2d43b25f947fd9bbecaac76434793baccb5bf21b8f59135dfeb05db0157b09858e1b4484e9e4884aa180","href":"https://static.observableusercontent.com/files/5a57a3a26ccd2fbbf0deffed6fbb4701f3a81368dfcd2d43b25f947fd9bbecaac76434793baccb5bf21b8f59135dfeb05db0157b09858e1b4484e9e4884aa180","name":"npmGroup_364.json","type":"application/json","lastModified":1614612476287.798,"size":172266}] 2f:{"title":"Daily D3 downloads from NPM","cells":[{"id":0,"value":"md`# Daily D3 downloads from [NPM](https://en.wikipedia.org/wiki/Npm_%28software%29)\n**stacked years to show growth.** Year starts from 14th August.\n\n##### Data visulation for [d3-parade-2021](https://d3js.community/d3-parade-2021)\n---\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3179,"value":"html`\n\n\n

Legend:

2015

2016

2017

2018

2019

2020

2021

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2840,"value":"viewof teColour = Radio(new Map([[\"Colour 0\",0],[\"Colour 1\",1],[\"Colour 2\",2], [\"Colour 3\",3],[\"Colour 4\",4],[\"Colour 5\",5],[\"Colour 6\",6],[\"Colour 7\",7],[\"Colour 8\",8],[\"Colour 9\",9]]), {value: 8, label: \"Select a colour palette that you line.\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2843,"value":"changeColoursTo = { // change colours used and fix the draw order of the circles, so largest are drawn first.\n dotz // so this cell is called after the dotz has loaded\n \n d3.selectAll('.c_2021').attr('fill',colours[teColour][6]).raise()\n d3.selectAll('.c_2020').attr('fill',colours[teColour][5]).raise()\n d3.selectAll('.c_2019').attr('fill',colours[teColour][4]).raise()\n d3.selectAll('.c_2018').attr('fill',colours[teColour][3]).raise()\n d3.selectAll('.c_2017').attr('fill',colours[teColour][2]).raise()\n d3.selectAll('.c_2016').attr('fill',colours[teColour][1]).raise()\n d3.selectAll('.c_2015').attr('fill',colours[teColour][0]).raise()\n \n return teColour\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"radiusScale = d3.scaleSqrt()\n .domain( d3.extent(_.concat(npm[0],npm[1],npm[2],npm[3],npm[4],npm[5]), c => c.value))\n .range([1,~~(width/week/2)]) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1313,"value":"week = 28 // needs a better name for the rows, I would say month but it's 28days","pinned":true,"hidden":false,"mode":"ojs"},{"id":1938,"value":"md`## colours\nPalettes mostly take from [colorbrewer2.org](https://colorbrewer2.org/#type=diverging&scheme=PRGn&n=7)\n\nUpdate to grab the 7 colour palatte.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"colours = [\n ['#c51b7d','#de77ae','#f1b6da','#fde0ef','#e6f5d0','#b8e186','#7fbc41','#4d9221'],\n ['#762a83','#9970ab','#c2a5cf','#e7d4e8','#d9f0d3','#a6dba0','#5aae61','#1b7837'],\n ['#b35806','#e08214','#fdb863','#fee0b6','#d8daeb','#b2abd2','#8073ac','#542788'],\n ['#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac'],\n ['#b2182b','#d6604d','#f4a582','#fddbc7','#e0e0e0','#bababa','#878787','#4d4d4d'],\n ['#d73027','#f46d43','#fdae61','#fee090','#e0f3f8','#abd9e9','#74add1','#4575b4'],\n ['#d73027','#f46d43','#fdae61','#fee08b','#d9ef8b','#a6d96a','#66bd63','#1a9850'],\n ['#d53e4f','#f46d43','#fdae61','#fee08b','#e6f598','#abdda4','#66c2a5','#3288bd'],\n ['#8c510a','#bf812d','#dfc27d','#f6e8c3','#c7eae5','#80cdc1','#35978f','#01665e'], // this breaks the legand as they are an alpha bended colour\n [\"#dF3301\",\"#AF3301\",\"#cA7362\",\"#FFA29D\",\"#D8F5AE\",\"#6CCC2B\",\"#31815F\",\"#1f613F\"]\n\n]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2617,"value":"viewof npmYear = Radio(new Map([[\"2015 - 2016\",0],[\"2016 - 2017\",1],[\"2017 - 2018\",2], [\"2018 - 2019\",3],[\"2019 - 2020\",4],[\"2020 - 2021\",5]]), {value: 0, label: \"365 days of NPM download data:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1965,"value":"viewof se = Table(npm[npmYear])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2726,"value":"d3.timeFormat('%a %d %B %Y')(new Date(se[0].date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"Codicil = md`# Codicil: \n---\n## NPM daily downloads\n\nData was grouped and formated [with this notebook.](https://observablehq.com/d/d0a0efcf0b9805c1)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"npm = FileAttachment(\"npmGroup_364.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"import {Table, Search, Radio} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1127,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}