Notebooks 2.0 is here.

Published
Edited
Jan 26, 2022
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
text = FileAttachment("filesizes.txt").text(function(d) {
return d;
})
Insert cell
d3.text("filesizes.txt")


Insert cell
Insert cell
Insert cell
node_modules is the top level folder with each library listed in the adjacent child directory being of the same library. To find the space taken by each of the libraries, you have to travel down the 1st level of node_modules and query the library name to then sum up the size of the library's files.
Insert cell
dirs = { return d3.csvParse(text)}
Insert cell
dirsCln = {
let dirsArr = []
let objRow = {}
let size = null
let str = ''
let filedir = ''
let topNode = ''
let libName = ''
let fileNameOne = ''
let libNameTwo = ''
let fileNameTwo = ''
for (const [i, el] of dirs.entries()){
for (const [key, prop] of Object.entries(el)){
str = prop.trim().split(' ')

filedir = (prop.trim().split(' '))[1].split('/')
size = str[0]
topNode = filedir[0]
libName = filedir[1]
fileNameOne = filedir[2] //can be node_modules
libNameTwo = filedir[3]
fileNameTwo = filedir[4]
dirsArr.push({size,topNode,libName, fileNameOne ,libNameTwo, fileNameTwo })
}
}
return dirsArr
}
Insert cell
readArr = {
const readArr = dirsCln.filter((item)=>{return item.fileNameOne == 'readme.md' ||item.fileNameOne == 'README.md' })
return readArr
}
Insert cell
{const sumRead = // the sum of size of all libraries' readme.md files
readArr.reduce((acc, item)=>{ return acc + Number(item.size)}, 0)
return sumRead/ readArr.length
}

Insert cell
The average readme.md file size is 4989.7011173184355 bytes.
Insert cell
Insert cell
the top level of each library is the total byte size taken by the library excluded its nested node_modules
Insert cell
libsObjs = {const set = new Set;
const libs = dirsCln.filter(o => !set.has(o.libName) && set.add(o.libName))
return libs
}
Insert cell
libsArr = {let libsArr = []
libsObjs.forEach((o)=>{libsArr.push(o.libName)})
return libsArr
}
Insert cell
set = {
let arr = []
const variable = libsArr.map((lib)=>{ return dirsCln.filter(( item )=>{ return item.libName === lib
})
// .reduce((acc, value)=>{return Number(value.size) })
})
return variable
}
// arr.push({libName: item.libName , size: item.size })

Insert cell
{const sizes = set.map((arr)=>{ return arr.reduce((acc, obj)=> {return acc + Number(obj.size)}, 0) })
return sizes
}
// return acc + Number(obj.size)
Insert cell
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
babel_traverse does have its own node_modules folder in a directory called "node_modules/babel-traverse/node_modules/globals/license"
Insert cell
When a package.json file is downloaded, everything in its library is download including the libraries own dependancies. When downloaded it creates its own node module files within the library
Insert cell
let sumLibNest = 0 // the sum of size of all the nested libraries
for (const ele of Object.entries(dirsCln){
if (fileNameOne === "node_modules"){
sumLibNest += size
}
return sumLibNest
}

const sumTopLib = sumLib - sumLibNest

Insert cell
Insert cell
Because each library project was built by and self-sufficient by itself, everything that is needed to support that library is in its node module. That means if two projects need lodash to operate, then you project will have duplicate libraries.
Insert cell
let duplsSum = 0

dirsCln.forEach(objRow => objRow.forEach(col => if (libName === libNameTwo){duplsSum =+ size return duplsSum})
Insert cell
Insert cell
on the x-axis the the number of bytes taken by the library and on the y axis is how many times that fil size occurs.
Insert cell
Insert cell
chart = Histogram(dirsCln, {
value: d => d.size,
label: "File size (byte) →",
width,
height: 500,
color: "steelblue"
})

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