mirror of
https://github.com/danbulant/design
synced 2026-06-18 22:01:06 +00:00
finish the article
This commit is contained in:
Daniel Bulant
parent
1486f8d19b
commit
9bcfee7f53
7 changed files with 881 additions and 1 deletions
|
|
@ -15,6 +15,7 @@
|
|||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@sveltejs/pancake": "^0.0.18",
|
||||
"katex": "0.15.2",
|
||||
"luxon": "2.3.1",
|
||||
"rehype-autolink-headings": "6.1.1",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ lockfileVersion: 5.3
|
|||
specifiers:
|
||||
'@sveltejs/adapter-static': 1.0.0-next.28
|
||||
'@sveltejs/kit': 1.0.0-next.291
|
||||
'@sveltejs/pancake': ^0.0.18
|
||||
katex: 0.15.2
|
||||
luxon: 2.3.1
|
||||
mdsvex: 0.10.5
|
||||
|
|
@ -19,6 +20,7 @@ specifiers:
|
|||
xterm: 4.18.0
|
||||
|
||||
dependencies:
|
||||
'@sveltejs/pancake': 0.0.18
|
||||
katex: 0.15.2
|
||||
luxon: 2.3.1
|
||||
rehype-autolink-headings: 6.1.1
|
||||
|
|
@ -73,6 +75,12 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/pancake/0.0.18:
|
||||
resolution: {integrity: sha512-vnpKn+sHE0yvw/6x4juF9EoDS8iYC5JNIVtRgclA37rfxdnIpvbVxStiZ5/gWncjERN4jtSpTAplS1zCARCBXA==}
|
||||
dependencies:
|
||||
yootils: 0.0.16
|
||||
dev: false
|
||||
|
||||
/@sveltejs/vite-plugin-svelte/1.0.0-next.39_svelte@3.46.4+vite@2.8.6:
|
||||
resolution: {integrity: sha512-gnvvcAW2LK+KnUn8lKb2ypcXKwSp2K57mem5C4VNKfjxdRpM6+XwNavWwVf6otnDhz3qPYl/TKKW6/dRr6eeAw==}
|
||||
engines: {node: ^14.13.1 || >= 16}
|
||||
|
|
@ -1712,6 +1720,10 @@ packages:
|
|||
resolution: {integrity: sha512-JQoc1S0dti6SQfI0bK1AZvGnAxH4MVw45ZPFSO6FHTInAiau3Ix77fSxNx3mX4eh9OL4AYa8+4C8f5UvnSfppQ==}
|
||||
dev: false
|
||||
|
||||
/yootils/0.0.16:
|
||||
resolution: {integrity: sha512-aIVecm5ucOzwhtKbl0zkfg0ZSOUR9c2da0k8cIc9umjjzkvVCWUUX/UHZ1CLPsv4wmJLqt0aWeLB7p9n9JDwYQ==}
|
||||
dev: false
|
||||
|
||||
/zwitch/1.0.5:
|
||||
resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}
|
||||
dev: false
|
||||
|
|
|
|||
7
src/lib/components/Date.svelte
Normal file
7
src/lib/components/Date.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
export var value;
|
||||
</script>
|
||||
|
||||
<code title={DateTime.fromISO(value).toRelative()}>{value}</code>
|
||||
264
src/routes/posts/quick-comparison-of-s3/_compare/Compare.svelte
Normal file
264
src/routes/posts/quick-comparison-of-s3/_compare/Compare.svelte
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
<script>
|
||||
import * as Pancake from '@sveltejs/pancake';
|
||||
import { spring } from 'svelte/motion';
|
||||
import { onMount } from 'svelte';
|
||||
import Date from '$lib/components/Date.svelte';
|
||||
|
||||
let averageSize = 50;
|
||||
$: if(averageSize < 1) averageSize = 1;
|
||||
let fileCount = 0;
|
||||
$: fileCount = (egress * 1e9) / (averageSize*1e6);
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Cloudflare R2",
|
||||
price: ({ storage, egress, fileCount }) => 10 * storage + Math.max(0, fileCount-10e6)*0.36/1e6,
|
||||
color: "orange",
|
||||
link: "cloudflare-r2"
|
||||
}, {
|
||||
name: "Wasabi",
|
||||
price: ({ storage, egress, fileCount}) => 5 * storage,
|
||||
color: "green",
|
||||
link: "wasabi"
|
||||
}, {
|
||||
name: "Backblaze B2",
|
||||
price: ({ storage, egress, fileCount}) => 4 * storage + 10 * egress + Math.max(0, fileCount - 2500)*4/10e6,
|
||||
color: "red",
|
||||
link: "backblaze-b2"
|
||||
}, {
|
||||
name: "DO Spaces",
|
||||
price: ({ storage, egress, fileCount}) => 20 * storage + 10 * egress,
|
||||
color: "blue",
|
||||
link: "digitalocean-spaces"
|
||||
}, {
|
||||
name: "Storj.io",
|
||||
price: ({ storage, egress, fileCount}) => 4 * storage + 7 * egress,
|
||||
color: "rgb(0,120,180)",
|
||||
link: "storjio"
|
||||
}
|
||||
];
|
||||
|
||||
let el;
|
||||
let w = 320;
|
||||
function format(num) {
|
||||
if(!num) return "";
|
||||
if(num > 1e6) {
|
||||
return num/1e6 + "M";
|
||||
}
|
||||
if(num > 1e3) {
|
||||
return num/1e3 + "K";
|
||||
}
|
||||
return num;
|
||||
}
|
||||
const m = spring();
|
||||
$: size = w < 480 ? 'small' : w < 640 ? 'medium' : 'large';
|
||||
$: $m = data.map((d, i) => ({ x: i, y: d.price({ storage, egress, fileCount }) }));
|
||||
let max = spring();
|
||||
$: $max = Math.max(50, ...data.map(d => d.price({ storage, egress, fileCount }) + d.price({ storage, egress, fileCount }) * 0.2));
|
||||
onMount(() => {
|
||||
w = el.clientWidth;
|
||||
});
|
||||
|
||||
let storage = 1;
|
||||
$: if(storage < 1) storage = 1;
|
||||
let egress = 1;
|
||||
$: if(egress < 1) egress = 1;
|
||||
</script>
|
||||
|
||||
<label for="storage">Storage used</label>
|
||||
<div class="flex">
|
||||
<input type="range" min="1" max="1000" step="1" bind:value={storage}>
|
||||
<div class="input-tb">
|
||||
<input name="storage" id="storage" type="number" min="1" max="1000" step="1" bind:value={storage}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="egress">Expected downloads/egress</label>
|
||||
<div class="flex">
|
||||
<input type="range" min="1" max="1000" step="1" bind:value={egress}>
|
||||
<div class="input-tb">
|
||||
<input name="storage" id="egress" type="number" min="1" max="1000" step="1" bind:value={egress}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart {size}" bind:this={el} bind:clientWidth={w}>
|
||||
<div class="background">
|
||||
<Pancake.Chart x1={0 - 0.5} x2={4 + 0.5} y1={0} y2={$max}>
|
||||
<Pancake.Columns data={$m} width={1} let:value>
|
||||
<div class="column" style="background-color: {data[value.x].color};">${Math.round(value.y)}</div>
|
||||
</Pancake.Columns>
|
||||
</Pancake.Chart>
|
||||
</div>
|
||||
<div class="foreground">
|
||||
<Pancake.Chart x1={0 - 0.5} x2={4 + 0.5} y1={0} y2={$max}>
|
||||
<Pancake.Grid horizontal count={5} let:value>
|
||||
<div class="grid-line horizontal"></div>
|
||||
<span class="y label">{format(value)}</span>
|
||||
</Pancake.Grid>
|
||||
|
||||
<Pancake.Grid vertical count={5} let:value>
|
||||
<span class="x label">
|
||||
<a href="#{data[value].link}">{data[value].name}</a>
|
||||
</span>
|
||||
</Pancake.Grid>
|
||||
</Pancake.Chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="credit">
|
||||
Source: Respective pricing pages (see links above), on <Date value="2022-05-16T16:00" /> <small>(hover for quick relative time)</small> <br />
|
||||
Prices are estimates, expecting that traffic is uniform during the month, and that the average size of a file is {averageSize}MB ({fileCount} files downloaded). Doesn't account for listings or deletions. Uploads are not using multipart.
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary> Additional options </summary>
|
||||
|
||||
<label for="egress">Average file size</label>
|
||||
<small>It does account file count into the pricing maths, defaults to 1 file downloaded = GetObject op. I think that the ops pricing is just anti-spam measure.</small>
|
||||
<div class="flex">
|
||||
<input type="range" min="1" max="1000" step="1" bind:value={averageSize}>
|
||||
<div class="input-text input-mb">
|
||||
<input name="storage" id="egress" type="number" min="1" max="1000" step="1" bind:value={averageSize}>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
.flex input[type="range"] {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.flex input[type="number"] {
|
||||
flex-shrink: 0;
|
||||
height: 1.7em;
|
||||
}
|
||||
.input-text {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.input-text::after {
|
||||
content: "TB";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: .5em;
|
||||
transition: all .05s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
.input-tb::after {
|
||||
content: "TB";
|
||||
}
|
||||
.input-gb::after {
|
||||
content: "GB";
|
||||
}
|
||||
.input-mb::after {
|
||||
content: "MB";
|
||||
}
|
||||
.input-text:hover::after, .input-text:focus-within::after {
|
||||
right: 1.5em;
|
||||
}
|
||||
:global(.dark .flex div.input-text::after) {
|
||||
color: black;
|
||||
}
|
||||
.chart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 0 0 36px 0;
|
||||
}
|
||||
.background, .foreground {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 3em 3em 2em 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.slider-container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
color: #333;
|
||||
}
|
||||
:global(.dark .post-layout .chart .slider-container) {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
.slider-container span {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-shadow: 0 0 12px white, 0 0 12px white, 0 0 12px white, 0 0 12px white, 0 0 12px white, 0 0 12px white;
|
||||
cursor: ew-resize;
|
||||
transition: 0.3s text-shadow;
|
||||
}
|
||||
:global(.dark .post-layout .slider-container span) {
|
||||
text-shadow: 0 0 12px #1f1f1f, 0 0 12px #1f1f1f, 0 0 12px #1f1f1f, 0 0 12px #1f1f1f, 0 0 12px #1f1f1f, 0 0 12px #1f1f1f;
|
||||
}
|
||||
.grid-line {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.grid-line.horizontal {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.label {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:global(.dark .post-layout .chart .label) {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
.y.label {
|
||||
left: calc(100% + 1em);
|
||||
bottom: -0.5em;
|
||||
line-height: 1;
|
||||
}
|
||||
.x.label {
|
||||
width: 8em;
|
||||
left: -4em;
|
||||
bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.background .x.label {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
}
|
||||
.foreground .x.label {
|
||||
bottom: -22px;
|
||||
}
|
||||
.column {
|
||||
position: absolute;
|
||||
/* left: 1px;
|
||||
width: calc(100% - 2px); */
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-left: 1px solid rgba(255,255,255,0.4);
|
||||
border-right: 1px solid rgba(255,255,255,0.4);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
opacity: 0.6;
|
||||
border-radius: 2px 2px 0 0;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credit {
|
||||
font-size: 14px;
|
||||
}
|
||||
.medium .slider-container span {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
.large .slider-container span {
|
||||
font-size: 5em;
|
||||
}
|
||||
</style>
|
||||
578
src/routes/posts/quick-comparison-of-s3/_compare/data.js
Normal file
578
src/routes/posts/quick-comparison-of-s3/_compare/data.js
Normal file
|
|
@ -0,0 +1,578 @@
|
|||
const csv = `year,age,sex,people
|
||||
1850,0,1,1483789
|
||||
1850,0,2,1450376
|
||||
1850,5,1,1411067
|
||||
1850,5,2,1359668
|
||||
1850,10,1,1260099
|
||||
1850,10,2,1216114
|
||||
1850,15,1,1077133
|
||||
1850,15,2,1110619
|
||||
1850,20,1,1017281
|
||||
1850,20,2,1003841
|
||||
1850,25,1,862547
|
||||
1850,25,2,799482
|
||||
1850,30,1,730638
|
||||
1850,30,2,639636
|
||||
1850,35,1,588487
|
||||
1850,35,2,505012
|
||||
1850,40,1,475911
|
||||
1850,40,2,428185
|
||||
1850,45,1,384211
|
||||
1850,45,2,341254
|
||||
1850,50,1,321343
|
||||
1850,50,2,286580
|
||||
1850,55,1,194080
|
||||
1850,55,2,187208
|
||||
1850,60,1,174976
|
||||
1850,60,2,162236
|
||||
1850,65,1,106827
|
||||
1850,65,2,105534
|
||||
1850,70,1,73677
|
||||
1850,70,2,71762
|
||||
1850,75,1,40834
|
||||
1850,75,2,40229
|
||||
1850,80,1,23449
|
||||
1850,80,2,22949
|
||||
1850,85,1,8186
|
||||
1850,85,2,10511
|
||||
1850,90,1,5259
|
||||
1850,90,2,6569
|
||||
1860,0,1,2120846
|
||||
1860,0,2,2092162
|
||||
1860,5,1,1804467
|
||||
1860,5,2,1778772
|
||||
1860,10,1,1612640
|
||||
1860,10,2,1540350
|
||||
1860,15,1,1438094
|
||||
1860,15,2,1495999
|
||||
1860,20,1,1351121
|
||||
1860,20,2,1370462
|
||||
1860,25,1,1217615
|
||||
1860,25,2,1116373
|
||||
1860,30,1,1043174
|
||||
1860,30,2,936055
|
||||
1860,35,1,866910
|
||||
1860,35,2,737136
|
||||
1860,40,1,699434
|
||||
1860,40,2,616826
|
||||
1860,45,1,552404
|
||||
1860,45,2,461739
|
||||
1860,50,1,456176
|
||||
1860,50,2,407305
|
||||
1860,55,1,292417
|
||||
1860,55,2,267224
|
||||
1860,60,1,260887
|
||||
1860,60,2,249735
|
||||
1860,65,1,149331
|
||||
1860,65,2,141405
|
||||
1860,70,1,98465
|
||||
1860,70,2,101778
|
||||
1860,75,1,56699
|
||||
1860,75,2,57597
|
||||
1860,80,1,29007
|
||||
1860,80,2,29506
|
||||
1860,85,1,10434
|
||||
1860,85,2,14053
|
||||
1860,90,1,7232
|
||||
1860,90,2,6622
|
||||
1870,0,1,2800083
|
||||
1870,0,2,2717102
|
||||
1870,5,1,2428469
|
||||
1870,5,2,2393680
|
||||
1870,10,1,2427341
|
||||
1870,10,2,2342670
|
||||
1870,15,1,1958390
|
||||
1870,15,2,2077248
|
||||
1870,20,1,1805303
|
||||
1870,20,2,1909382
|
||||
1870,25,1,1509059
|
||||
1870,25,2,1574285
|
||||
1870,30,1,1251534
|
||||
1870,30,2,1275629
|
||||
1870,35,1,1185336
|
||||
1870,35,2,1137490
|
||||
1870,40,1,968861
|
||||
1870,40,2,944401
|
||||
1870,45,1,852672
|
||||
1870,45,2,747916
|
||||
1870,50,1,736387
|
||||
1870,50,2,637801
|
||||
1870,55,1,486036
|
||||
1870,55,2,407819
|
||||
1870,60,1,399264
|
||||
1870,60,2,374801
|
||||
1870,65,1,260829
|
||||
1870,65,2,239080
|
||||
1870,70,1,173364
|
||||
1870,70,2,165501
|
||||
1870,75,1,86929
|
||||
1870,75,2,89540
|
||||
1870,80,1,47427
|
||||
1870,80,2,54190
|
||||
1870,85,1,15891
|
||||
1870,85,2,19302
|
||||
1870,90,1,8649
|
||||
1870,90,2,13068
|
||||
1880,0,1,3533662
|
||||
1880,0,2,3421597
|
||||
1880,5,1,3297503
|
||||
1880,5,2,3179142
|
||||
1880,10,1,2911924
|
||||
1880,10,2,2813550
|
||||
1880,15,1,2457734
|
||||
1880,15,2,2527818
|
||||
1880,20,1,2547780
|
||||
1880,20,2,2512803
|
||||
1880,25,1,2119393
|
||||
1880,25,2,1974241
|
||||
1880,30,1,1749107
|
||||
1880,30,2,1596772
|
||||
1880,35,1,1540772
|
||||
1880,35,2,1483717
|
||||
1880,40,1,1237347
|
||||
1880,40,2,1239435
|
||||
1880,45,1,1065973
|
||||
1880,45,2,1003711
|
||||
1880,50,1,964484
|
||||
1880,50,2,863012
|
||||
1880,55,1,679147
|
||||
1880,55,2,594843
|
||||
1880,60,1,580298
|
||||
1880,60,2,526956
|
||||
1880,65,1,369398
|
||||
1880,65,2,346303
|
||||
1880,70,1,255422
|
||||
1880,70,2,251860
|
||||
1880,75,1,141628
|
||||
1880,75,2,143513
|
||||
1880,80,1,67526
|
||||
1880,80,2,77290
|
||||
1880,85,1,22437
|
||||
1880,85,2,31227
|
||||
1880,90,1,10272
|
||||
1880,90,2,15451
|
||||
1900,0,1,4619544
|
||||
1900,0,2,4589196
|
||||
1900,5,1,4465783
|
||||
1900,5,2,4390483
|
||||
1900,10,1,4057669
|
||||
1900,10,2,4001749
|
||||
1900,15,1,3774846
|
||||
1900,15,2,3801743
|
||||
1900,20,1,3694038
|
||||
1900,20,2,3751061
|
||||
1900,25,1,3389280
|
||||
1900,25,2,3236056
|
||||
1900,30,1,2918964
|
||||
1900,30,2,2665174
|
||||
1900,35,1,2633883
|
||||
1900,35,2,2347737
|
||||
1900,40,1,2261070
|
||||
1900,40,2,2004987
|
||||
1900,45,1,1868413
|
||||
1900,45,2,1648025
|
||||
1900,50,1,1571038
|
||||
1900,50,2,1411981
|
||||
1900,55,1,1161908
|
||||
1900,55,2,1064632
|
||||
1900,60,1,916571
|
||||
1900,60,2,887508
|
||||
1900,65,1,672663
|
||||
1900,65,2,640212
|
||||
1900,70,1,454747
|
||||
1900,70,2,440007
|
||||
1900,75,1,268211
|
||||
1900,75,2,265879
|
||||
1900,80,1,127435
|
||||
1900,80,2,132449
|
||||
1900,85,1,44008
|
||||
1900,85,2,48614
|
||||
1900,90,1,15164
|
||||
1900,90,2,20093
|
||||
1910,0,1,5296823
|
||||
1910,0,2,5287477
|
||||
1910,5,1,4991803
|
||||
1910,5,2,4866139
|
||||
1910,10,1,4650747
|
||||
1910,10,2,4471887
|
||||
1910,15,1,4566154
|
||||
1910,15,2,4592269
|
||||
1910,20,1,4637632
|
||||
1910,20,2,4447683
|
||||
1910,25,1,4257755
|
||||
1910,25,2,3946153
|
||||
1910,30,1,3658125
|
||||
1910,30,2,3295220
|
||||
1910,35,1,3427518
|
||||
1910,35,2,3088990
|
||||
1910,40,1,2860229
|
||||
1910,40,2,2471267
|
||||
1910,45,1,2363801
|
||||
1910,45,2,2114930
|
||||
1910,50,1,2126516
|
||||
1910,50,2,1773592
|
||||
1910,55,1,1508358
|
||||
1910,55,2,1317651
|
||||
1910,60,1,1189421
|
||||
1910,60,2,1090697
|
||||
1910,65,1,850159
|
||||
1910,65,2,813868
|
||||
1910,70,1,557936
|
||||
1910,70,2,547623
|
||||
1910,75,1,322679
|
||||
1910,75,2,350900
|
||||
1910,80,1,161715
|
||||
1910,80,2,174315
|
||||
1910,85,1,59699
|
||||
1910,85,2,62725
|
||||
1910,90,1,23929
|
||||
1910,90,2,28965
|
||||
1920,0,1,5934792
|
||||
1920,0,2,5694244
|
||||
1920,5,1,5789008
|
||||
1920,5,2,5693960
|
||||
1920,10,1,5401156
|
||||
1920,10,2,5293057
|
||||
1920,15,1,4724365
|
||||
1920,15,2,4779936
|
||||
1920,20,1,4549411
|
||||
1920,20,2,4742632
|
||||
1920,25,1,4565066
|
||||
1920,25,2,4529382
|
||||
1920,30,1,4110771
|
||||
1920,30,2,3982426
|
||||
1920,35,1,4081543
|
||||
1920,35,2,3713810
|
||||
1920,40,1,3321923
|
||||
1920,40,2,3059757
|
||||
1920,45,1,3143891
|
||||
1920,45,2,2669089
|
||||
1920,50,1,2546035
|
||||
1920,50,2,2200491
|
||||
1920,55,1,1880975
|
||||
1920,55,2,1674672
|
||||
1920,60,1,1587549
|
||||
1920,60,2,1382877
|
||||
1920,65,1,1095956
|
||||
1920,65,2,989901
|
||||
1920,70,1,714618
|
||||
1920,70,2,690097
|
||||
1920,75,1,417292
|
||||
1920,75,2,439465
|
||||
1920,80,1,187000
|
||||
1920,80,2,211110
|
||||
1920,85,1,75991
|
||||
1920,85,2,92829
|
||||
1920,90,1,22398
|
||||
1920,90,2,32085
|
||||
1930,0,1,5875250
|
||||
1930,0,2,5662530
|
||||
1930,5,1,6542592
|
||||
1930,5,2,6129561
|
||||
1930,10,1,6064820
|
||||
1930,10,2,5986529
|
||||
1930,15,1,5709452
|
||||
1930,15,2,5769587
|
||||
1930,20,1,5305992
|
||||
1930,20,2,5565382
|
||||
1930,25,1,4929853
|
||||
1930,25,2,5050229
|
||||
1930,30,1,4424408
|
||||
1930,30,2,4455213
|
||||
1930,35,1,4576531
|
||||
1930,35,2,4593776
|
||||
1930,40,1,4075139
|
||||
1930,40,2,3754022
|
||||
1930,45,1,3633152
|
||||
1930,45,2,3396558
|
||||
1930,50,1,3128108
|
||||
1930,50,2,2809191
|
||||
1930,55,1,2434077
|
||||
1930,55,2,2298614
|
||||
1930,60,1,1927564
|
||||
1930,60,2,1783515
|
||||
1930,65,1,1397275
|
||||
1930,65,2,1307312
|
||||
1930,70,1,919045
|
||||
1930,70,2,918509
|
||||
1930,75,1,536375
|
||||
1930,75,2,522716
|
||||
1930,80,1,246708
|
||||
1930,80,2,283579
|
||||
1930,85,1,88978
|
||||
1930,85,2,109210
|
||||
1930,90,1,30338
|
||||
1930,90,2,43483
|
||||
1940,0,1,5294628
|
||||
1940,0,2,5124653
|
||||
1940,5,1,5468378
|
||||
1940,5,2,5359099
|
||||
1940,10,1,5960416
|
||||
1940,10,2,5868532
|
||||
1940,15,1,6165109
|
||||
1940,15,2,6193701
|
||||
1940,20,1,5682414
|
||||
1940,20,2,5896002
|
||||
1940,25,1,5438166
|
||||
1940,25,2,5664244
|
||||
1940,30,1,5040048
|
||||
1940,30,2,5171522
|
||||
1940,35,1,4724804
|
||||
1940,35,2,4791809
|
||||
1940,40,1,4437392
|
||||
1940,40,2,4394061
|
||||
1940,45,1,4190187
|
||||
1940,45,2,4050290
|
||||
1940,50,1,3785735
|
||||
1940,50,2,3488396
|
||||
1940,55,1,2972069
|
||||
1940,55,2,2810000
|
||||
1940,60,1,2370232
|
||||
1940,60,2,2317790
|
||||
1940,65,1,1897678
|
||||
1940,65,2,1911117
|
||||
1940,70,1,1280023
|
||||
1940,70,2,1287711
|
||||
1940,75,1,713875
|
||||
1940,75,2,764915
|
||||
1940,80,1,359418
|
||||
1940,80,2,414761
|
||||
1940,85,1,127303
|
||||
1940,85,2,152131
|
||||
1940,90,1,42263
|
||||
1940,90,2,58119
|
||||
1950,0,1,8211806
|
||||
1950,0,2,7862267
|
||||
1950,5,1,6706601
|
||||
1950,5,2,6450863
|
||||
1950,10,1,5629744
|
||||
1950,10,2,5430835
|
||||
1950,15,1,5264129
|
||||
1950,15,2,5288742
|
||||
1950,20,1,5573308
|
||||
1950,20,2,5854227
|
||||
1950,25,1,6007254
|
||||
1950,25,2,6317332
|
||||
1950,30,1,5676022
|
||||
1950,30,2,5895178
|
||||
1950,35,1,5511364
|
||||
1950,35,2,5696261
|
||||
1950,40,1,5076985
|
||||
1950,40,2,5199224
|
||||
1950,45,1,4533177
|
||||
1950,45,2,4595842
|
||||
1950,50,1,4199164
|
||||
1950,50,2,4147295
|
||||
1950,55,1,3667351
|
||||
1950,55,2,3595158
|
||||
1950,60,1,3035038
|
||||
1950,60,2,3009768
|
||||
1950,65,1,2421234
|
||||
1950,65,2,2548250
|
||||
1950,70,1,1627920
|
||||
1950,70,2,1786831
|
||||
1950,75,1,1006530
|
||||
1950,75,2,1148469
|
||||
1950,80,1,511727
|
||||
1950,80,2,637717
|
||||
1950,85,1,182821
|
||||
1950,85,2,242798
|
||||
1950,90,1,54836
|
||||
1950,90,2,90766
|
||||
1960,0,1,10374975
|
||||
1960,0,2,10146999
|
||||
1960,5,1,9495503
|
||||
1960,5,2,9250741
|
||||
1960,10,1,8563700
|
||||
1960,10,2,8310764
|
||||
1960,15,1,6620902
|
||||
1960,15,2,6617493
|
||||
1960,20,1,5268384
|
||||
1960,20,2,5513495
|
||||
1960,25,1,5311805
|
||||
1960,25,2,5548259
|
||||
1960,30,1,5801342
|
||||
1960,30,2,6090862
|
||||
1960,35,1,6063063
|
||||
1960,35,2,6431337
|
||||
1960,40,1,5657943
|
||||
1960,40,2,5940520
|
||||
1960,45,1,5345658
|
||||
1960,45,2,5516028
|
||||
1960,50,1,4763364
|
||||
1960,50,2,4928844
|
||||
1960,55,1,4170581
|
||||
1960,55,2,4402878
|
||||
1960,60,1,3405293
|
||||
1960,60,2,3723839
|
||||
1960,65,1,2859371
|
||||
1960,65,2,3268699
|
||||
1960,70,1,2115763
|
||||
1960,70,2,2516479
|
||||
1960,75,1,1308913
|
||||
1960,75,2,1641371
|
||||
1960,80,1,619923
|
||||
1960,80,2,856952
|
||||
1960,85,1,253245
|
||||
1960,85,2,384572
|
||||
1960,90,1,75908
|
||||
1960,90,2,135774
|
||||
1970,0,1,8685121
|
||||
1970,0,2,8326887
|
||||
1970,5,1,10411131
|
||||
1970,5,2,10003293
|
||||
1970,10,1,10756403
|
||||
1970,10,2,10343538
|
||||
1970,15,1,9605399
|
||||
1970,15,2,9414284
|
||||
1970,20,1,7729202
|
||||
1970,20,2,8341830
|
||||
1970,25,1,6539301
|
||||
1970,25,2,6903041
|
||||
1970,30,1,5519879
|
||||
1970,30,2,5851441
|
||||
1970,35,1,5396732
|
||||
1970,35,2,5708021
|
||||
1970,40,1,5718538
|
||||
1970,40,2,6129319
|
||||
1970,45,1,5794120
|
||||
1970,45,2,6198742
|
||||
1970,50,1,5298312
|
||||
1970,50,2,5783817
|
||||
1970,55,1,4762911
|
||||
1970,55,2,5222164
|
||||
1970,60,1,4037643
|
||||
1970,60,2,4577251
|
||||
1970,65,1,3142606
|
||||
1970,65,2,3894827
|
||||
1970,70,1,2340826
|
||||
1970,70,2,3138009
|
||||
1970,75,1,1599269
|
||||
1970,75,2,2293376
|
||||
1970,80,1,886155
|
||||
1970,80,2,1417553
|
||||
1970,85,1,371123
|
||||
1970,85,2,658511
|
||||
1970,90,1,186502
|
||||
1970,90,2,314929
|
||||
1980,0,1,8439366
|
||||
1980,0,2,8081854
|
||||
1980,5,1,8680730
|
||||
1980,5,2,8275881
|
||||
1980,10,1,9452338
|
||||
1980,10,2,9048483
|
||||
1980,15,1,10698856
|
||||
1980,15,2,10410271
|
||||
1980,20,1,10486776
|
||||
1980,20,2,10614947
|
||||
1980,25,1,9624053
|
||||
1980,25,2,9827903
|
||||
1980,30,1,8705835
|
||||
1980,30,2,8955225
|
||||
1980,35,1,6852069
|
||||
1980,35,2,7134239
|
||||
1980,40,1,5692148
|
||||
1980,40,2,5953910
|
||||
1980,45,1,5342469
|
||||
1980,45,2,5697543
|
||||
1980,50,1,5603709
|
||||
1980,50,2,6110117
|
||||
1980,55,1,5485098
|
||||
1980,55,2,6160229
|
||||
1980,60,1,4696140
|
||||
1980,60,2,5456885
|
||||
1980,65,1,3893510
|
||||
1980,65,2,4896947
|
||||
1980,70,1,2857774
|
||||
1980,70,2,3963441
|
||||
1980,75,1,1840438
|
||||
1980,75,2,2951759
|
||||
1980,80,1,1012886
|
||||
1980,80,2,1919292
|
||||
1980,85,1,472338
|
||||
1980,85,2,1023115
|
||||
1980,90,1,204148
|
||||
1980,90,2,499046
|
||||
1990,0,1,9307465
|
||||
1990,0,2,8894007
|
||||
1990,5,1,9274732
|
||||
1990,5,2,8799955
|
||||
1990,10,1,8782542
|
||||
1990,10,2,8337284
|
||||
1990,15,1,9020572
|
||||
1990,15,2,8590991
|
||||
1990,20,1,9436188
|
||||
1990,20,2,9152644
|
||||
1990,25,1,10658027
|
||||
1990,25,2,10587292
|
||||
1990,30,1,11028712
|
||||
1990,30,2,11105750
|
||||
1990,35,1,9853933
|
||||
1990,35,2,10038644
|
||||
1990,40,1,8712632
|
||||
1990,40,2,8928252
|
||||
1990,45,1,6848082
|
||||
1990,45,2,7115129
|
||||
1990,50,1,5553992
|
||||
1990,50,2,5899925
|
||||
1990,55,1,4981670
|
||||
1990,55,2,5460506
|
||||
1990,60,1,4953822
|
||||
1990,60,2,5663205
|
||||
1990,65,1,4538398
|
||||
1990,65,2,5594108
|
||||
1990,70,1,3429420
|
||||
1990,70,2,4610222
|
||||
1990,75,1,2344932
|
||||
1990,75,2,3723980
|
||||
1990,80,1,1342996
|
||||
1990,80,2,2545730
|
||||
1990,85,1,588790
|
||||
1990,85,2,1419494
|
||||
1990,90,1,238459
|
||||
1990,90,2,745146
|
||||
2000,0,1,9735380
|
||||
2000,0,2,9310714
|
||||
2000,5,1,10552146
|
||||
2000,5,2,10069564
|
||||
2000,10,1,10563233
|
||||
2000,10,2,10022524
|
||||
2000,15,1,10237419
|
||||
2000,15,2,9692669
|
||||
2000,20,1,9731315
|
||||
2000,20,2,9324244
|
||||
2000,25,1,9659493
|
||||
2000,25,2,9518507
|
||||
2000,30,1,10205879
|
||||
2000,30,2,10119296
|
||||
2000,35,1,11475182
|
||||
2000,35,2,11635647
|
||||
2000,40,1,11320252
|
||||
2000,40,2,11488578
|
||||
2000,45,1,9925006
|
||||
2000,45,2,10261253
|
||||
2000,50,1,8507934
|
||||
2000,50,2,8911133
|
||||
2000,55,1,6459082
|
||||
2000,55,2,6921268
|
||||
2000,60,1,5123399
|
||||
2000,60,2,5668961
|
||||
2000,65,1,4453623
|
||||
2000,65,2,4804784
|
||||
2000,70,1,3792145
|
||||
2000,70,2,5184855
|
||||
2000,75,1,2912655
|
||||
2000,75,2,4355644
|
||||
2000,80,1,1902638
|
||||
2000,80,2,3221898
|
||||
2000,85,1,970357
|
||||
2000,85,2,1981156
|
||||
2000,90,1,336303
|
||||
2000,90,2,1064581`;
|
||||
|
||||
const data = csv.split('\n').slice(1).map(str => {
|
||||
const [year, age, sex, people] = str.split(',').map(parseFloat);
|
||||
return { year, age, sex, people };
|
||||
});
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
---
|
||||
title: Quick comparison of pricing of Simple Storage Services
|
||||
date: 2022-04-26
|
||||
date: 2022-05-16
|
||||
author: Daniel Bulant
|
||||
authorIcon: /logo.png
|
||||
categories: [programming, storage, comparison, s3]
|
||||
description: There are all those ad-filled long articles comparing certain things (in this case, simple storage services, or S3), usually auto generated. So here's a note for my future self in a format I like now.
|
||||
---
|
||||
|
||||
<script>
|
||||
import Compare from "./_compare/Compare.svelte";
|
||||
</script>
|
||||
|
||||
I'm not sponsored or endorsed by any of the mentioned companies/products below, nor do I earn any commission when you get something from them.
|
||||
If you want to help me, say something nice in the comments (or create some discussion there).
|
||||
If you start using any of these after you read this post, you're obligated to say which one are you using (and preferably why).
|
||||
|
|
@ -130,3 +134,9 @@ Base plan is 5$/month.
|
|||
</details>
|
||||
|
||||
[Home page](https://storj.io) | [Pricing page](https://www.storj.io/pricing)
|
||||
|
||||
---
|
||||
|
||||
## Comparison
|
||||
|
||||
<Compare />
|
||||
|
|
@ -73,12 +73,20 @@ button {
|
|||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
transition: color .3s;
|
||||
}
|
||||
.dark button {
|
||||
color:rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.dark button:disabled {
|
||||
color: rgb(82, 82, 82);
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue