31:T57e,{ const svg = d3.select(DOM.svg(width, 300)); const maxX = d3.max(data.map(d=>d.x)); const minX = d3.min(data.map(d=>d.x)); const maxY = d3.max(types,d=>{ return d3.max(data.map(item=>item[d])) }) const minY = d3.min(types,d=>{ return d3.min(data.map(item=>item[d])) }) console.log(maxX,minX,maxY,minY) const x = d3.scaleLinear().domain([minX,maxX]).range([0,width]) const y = d3.scaleLinear().domain([maxY,minY]).range([0,300]) const xAxis = g => g .attr("transform", `translate(60,${300 - 20})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) const yAxis = g => g .attr("transform", `translate(${60},-20)`) .call(d3.axisLeft(y).tickFormat(humanFileSize)) const line = d3.line() .x((d, i) => x(d.x)) .y(d => y(d.y)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const path = svg.append("g") .attr("transform", `translate(60,-20)`) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(types) .enter() .append("path") .style("mix-blend-mode", "multiply") .attr("d", k => { const lineData = data.map(d=>({x:d.x,y:d[k]})) return line(lineData) }); return svg.node() }32:[] 2f:{"title":"File Size Simulation","cells":[{"id":0,"value":"md`# File Size Simulation\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`In this notebook we will try to simulate size of large amount of geopoints, which have minimal amount of properties (**id, lat, lng**)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`If you move slider, you will see, that count of points and file sizes have linear relationship`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof count = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`Points count - ${count}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"md`Here you can download and compare, estimated and actual size of the files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"DOM.download(\n new Blob([d3.csvFormat(pointsArr), Object.keys(pointsArr[0])], {type: \"application/json\"}),\n \"Points.csv\", // optional file name\n `Points.csv - approx. ${humanFileSize(byteCount(csvStr))}` // optional button label\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"DOM.download(\n new Blob([topoJsonStr], {type: \"application/json\"}),\n \"PointsTopoJson.json\", // optional file name\n `PointsTopoJson.json - approx. ${humanFileSize(byteCount(topoJsonStr))}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"DOM.download(\n new Blob([geoJsonStr], {type: \"application/json\"}),\n \"PointsGeoJson.json\", // optional file name\n `PointsGeoJson.json - approx. ${humanFileSize(byteCount(geoJsonStr))}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"DOM.download(\n new Blob([jsonStr, Object.keys(pointsArr[0])], {type: \"application/json\"}),\n \"Points.json\", // optional file name\n `Points.json - approx. ${humanFileSize(byteCount(jsonStr))}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"md`\nAlthough, most important thing is that, we can take the coeficients and simulate file size with billions of geo points in it `","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`## This is simulation based on above coeficients`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`Based on assumption that file size is in linear relationship with points count, we can calculate coeficient for each type `","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"types","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"coeficients = data.map(d=> types.map(type=> d[type] / d.x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"averagedCoeficients = types.map((t,i)=> d3.mean(coeficients.map(c=>c[i])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`and then we can simulate really big numbers (more than billions )`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"eachTypeSizes = averagedCoeficients.map(d=>countSimulation * d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"viewof countSimulation = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`\n\n\n\n ${types.map((t,i)=>``).join('')}\n\n ${types.map((t,i)=>``).join('')}\n\n\n ${types.map((t,i)=>``).join('')}\n\n\n ${types.map((t,i)=>``).join('')}\n\n\n ${types.map((t,i)=>``).join('')}\n\n\n ${types.map((t,i)=>``).join('')}\n\n

points count	${t} size
${d3.format('.3s')(countSimulation).replace(/G/,\"B\")}	${humanFileSize(eachTypeSizes[i])}
${d3.format('.3s')(countSimulation*1000).replace(/G/,\"B\")}	${humanFileSize(eachTypeSizes[i]*1000)}
${d3.format('.3s')(countSimulation*1000000).replace(/G/,\"B\")}	${humanFileSize(eachTypeSizes[i]*1000000)}
${d3.format('.3s')(countSimulation*1000000000).replace(/G/,\"B\")}	${humanFileSize(eachTypeSizes[i]*1000000000)}
${d3.format('.3s')(countSimulation*1000000000000).replace(/G/,\"B\")}	${humanFileSize(eachTypeSizes[i]*1000000000000)}

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"html`\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Libs & Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"types = ['csv','json','geojson','topojson']","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"points = count","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"historicalYValues = {\n const result = {\n csv:byteCount(csvStr),\n json:byteCount(jsonStr),\n geojson:byteCount(geoJsonStr),\n topojson:byteCount(topoJsonStr)\n }\n if(this){\n this.push(result)\n return this;\n }\n return [result]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"data = historicalXValues.map((d,i)=>{\n return Object.assign({x:d},historicalYValues[i])\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"historicalXValues = {\n if(this){\n this.push(points)\n return this;\n }\n return [points]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"function humanFileSize(bytes, si) {\n var thresh = si ? 1000 : 1024;\n if(Math.abs(bytes) < thresh) {\n return bytes + ' B';\n }\n var units = si\n ? ['kB','MB','GB','TB','PB','EB','ZB','YB']\n : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];\n var u = -1;\n do {\n bytes /= thresh;\n ++u;\n } while(Math.abs(bytes) >= thresh && u < units.length - 1);\n return bytes.toFixed(1)+' '+units[u];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"function byteCount(s) {\n return encodeURI(s).split(/%..|./).length - 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"topoJsonStr = JSON.stringify(topojson.topology({geojson:geojson}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"geoJsonStr=JSON.stringify(geojson)","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"jsonStr = JSON.stringify(pointsArr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"csvStr = d3.csvFormat(pointsArr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"pointsArr = d3.range(points).map((d,i)=>{ return { lat: 42.148620646434,lon: 41.675504643721,id:i}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"geojson = Object.assign({\n type:\"FeatureCollection\",\n features:pointsArr.map((d,i)=> Object.assign({\n type:'feature',\n properties:{id:d.id},\n geometry:{\"type\": \"Point\", \"coordinates\": [d.lat,d.lon] } \n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3= require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"import {downloadButton} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}