Published
Edited
Jan 22, 2022
12 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
radiusScale = d3.scaleSqrt()
.domain( d3.extent(_.concat(npm[0],npm[1],npm[2],npm[3],npm[4],npm[5]), c => c.value))
.range([1,~~(width/week/2)])
Insert cell
week = 28 // needs a better name for the rows, I would say month but it's 28days
Insert cell
Insert cell
colours = [
['#c51b7d','#de77ae','#f1b6da','#fde0ef','#e6f5d0','#b8e186','#7fbc41','#4d9221'],
['#762a83','#9970ab','#c2a5cf','#e7d4e8','#d9f0d3','#a6dba0','#5aae61','#1b7837'],
['#b35806','#e08214','#fdb863','#fee0b6','#d8daeb','#b2abd2','#8073ac','#542788'],
['#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac'],
['#b2182b','#d6604d','#f4a582','#fddbc7','#e0e0e0','#bababa','#878787','#4d4d4d'],
['#d73027','#f46d43','#fdae61','#fee090','#e0f3f8','#abd9e9','#74add1','#4575b4'],
['#d73027','#f46d43','#fdae61','#fee08b','#d9ef8b','#a6d96a','#66bd63','#1a9850'],
['#d53e4f','#f46d43','#fdae61','#fee08b','#e6f598','#abdda4','#66c2a5','#3288bd'],
['#8c510a','#bf812d','#dfc27d','#f6e8c3','#c7eae5','#80cdc1','#35978f','#01665e'], // this breaks the legand as they are an alpha bended colour
["#dF3301","#AF3301","#cA7362","#FFA29D","#D8F5AE","#6CCC2B","#31815F","#1f613F"]

]

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
npm = FileAttachment("npmGroup_364.json").json()
Insert cell
import {Table, Search, Radio} from "@observablehq/inputs"
Insert cell
d3 = require('d3')
Insert cell
_ = require('lodash')
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more