mirror of
https://github.com/danbulant/design
synced 2026-07-05 19:10:47 +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",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@sveltejs/pancake": "^0.0.18",
|
||||||
"katex": "0.15.2",
|
"katex": "0.15.2",
|
||||||
"luxon": "2.3.1",
|
"luxon": "2.3.1",
|
||||||
"rehype-autolink-headings": "6.1.1",
|
"rehype-autolink-headings": "6.1.1",
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ lockfileVersion: 5.3
|
||||||
specifiers:
|
specifiers:
|
||||||
'@sveltejs/adapter-static': 1.0.0-next.28
|
'@sveltejs/adapter-static': 1.0.0-next.28
|
||||||
'@sveltejs/kit': 1.0.0-next.291
|
'@sveltejs/kit': 1.0.0-next.291
|
||||||
|
'@sveltejs/pancake': ^0.0.18
|
||||||
katex: 0.15.2
|
katex: 0.15.2
|
||||||
luxon: 2.3.1
|
luxon: 2.3.1
|
||||||
mdsvex: 0.10.5
|
mdsvex: 0.10.5
|
||||||
|
|
@ -19,6 +20,7 @@ specifiers:
|
||||||
xterm: 4.18.0
|
xterm: 4.18.0
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@sveltejs/pancake': 0.0.18
|
||||||
katex: 0.15.2
|
katex: 0.15.2
|
||||||
luxon: 2.3.1
|
luxon: 2.3.1
|
||||||
rehype-autolink-headings: 6.1.1
|
rehype-autolink-headings: 6.1.1
|
||||||
|
|
@ -73,6 +75,12 @@ packages:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
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:
|
/@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==}
|
resolution: {integrity: sha512-gnvvcAW2LK+KnUn8lKb2ypcXKwSp2K57mem5C4VNKfjxdRpM6+XwNavWwVf6otnDhz3qPYl/TKKW6/dRr6eeAw==}
|
||||||
engines: {node: ^14.13.1 || >= 16}
|
engines: {node: ^14.13.1 || >= 16}
|
||||||
|
|
@ -1712,6 +1720,10 @@ packages:
|
||||||
resolution: {integrity: sha512-JQoc1S0dti6SQfI0bK1AZvGnAxH4MVw45ZPFSO6FHTInAiau3Ix77fSxNx3mX4eh9OL4AYa8+4C8f5UvnSfppQ==}
|
resolution: {integrity: sha512-JQoc1S0dti6SQfI0bK1AZvGnAxH4MVw45ZPFSO6FHTInAiau3Ix77fSxNx3mX4eh9OL4AYa8+4C8f5UvnSfppQ==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/yootils/0.0.16:
|
||||||
|
resolution: {integrity: sha512-aIVecm5ucOzwhtKbl0zkfg0ZSOUR9c2da0k8cIc9umjjzkvVCWUUX/UHZ1CLPsv4wmJLqt0aWeLB7p9n9JDwYQ==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/zwitch/1.0.5:
|
/zwitch/1.0.5:
|
||||||
resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}
|
resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}
|
||||||
dev: false
|
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
|
title: Quick comparison of pricing of Simple Storage Services
|
||||||
date: 2022-04-26
|
date: 2022-05-16
|
||||||
author: Daniel Bulant
|
author: Daniel Bulant
|
||||||
authorIcon: /logo.png
|
authorIcon: /logo.png
|
||||||
categories: [programming, storage, comparison, s3]
|
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.
|
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.
|
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 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).
|
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>
|
</details>
|
||||||
|
|
||||||
[Home page](https://storj.io) | [Pricing page](https://www.storj.io/pricing)
|
[Home page](https://storj.io) | [Pricing page](https://www.storj.io/pricing)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Comparison
|
||||||
|
|
||||||
|
<Compare />
|
||||||
|
|
@ -73,12 +73,20 @@ button {
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
transition: color .3s;
|
||||||
|
}
|
||||||
|
.dark button {
|
||||||
|
color:rgb(191, 191, 191);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:disabled {
|
button:disabled {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dark button:disabled {
|
||||||
|
color: rgb(82, 82, 82);
|
||||||
|
}
|
||||||
|
|
||||||
button:not(:disabled):active {
|
button:not(:disabled):active {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue