A Pen by Sam Johnson.

data_calculator

<div id="sensor_data_calculator">
    <h3>How Much Data Will Your Sensors Generate?</h3>
    <p>I have <span data-var="devices" class="TKBigNumberField pull-right" data-size="12"> devices</span> with <span data-var="sensors" class="TKBigNumberField pull-right" data-size="12"> sensors each,</span></p>
    <p class="pull-right">collecting data <span data-var="collection_frequency" class="TKBigNumberField" data-size="2"> time(s)</span> every 
        <select data-var="collection_period" class="TKSelectField">
            <option value="second"> second</option>
            <option value="minute"> minute</option>
            <option value="hour">hour</option>
            <option value="day">day</option>
        </select>
    </p>
    <h4>Results:</h4>
    <table>
        <tr>
            <th></th>
            <th>Per Day</th>
            <th>Per Week</th>
            <th>Per Year</th>
            <th>Per 5 Years</th>
        </tr>
        <tr>
            <td><b>Data Points</b></td>
            <td data-var="data_points_day"></td>
            <td data-var="data_points_week"></td>
            <td data-var="data_points_year"></td>
            <td data-var="data_points_5_years"></td>
        </tr>
        <tr>
            <td><b>Storage Space</b></td>
            <td data-var="storage_day"></td>
            <td data-var="storage_week"></td>
            <td data-var="storage_year"></td>
            <td data-var="storage_5_years"></td>
        </tr>
        <tr>
            <td><b>Replicated Storage</b></td>
            <td data-var="replicated_storage_day"></td>
            <td data-var="replicated_storage_week"></td>
            <td data-var="replicated_storage_year"></td>
            <td data-var="replicated_storage_5_years"></td>
        </tr>
    </table>
</div>

script.js

var bytes_per_data_point = 43;
var compressed_bytes_per_data_point = 17;
var multipliers = {
    "second": {
        "day": 86400,
        "year": 31536000,
    },
    "minute": {
        "day": 1440,
        "year": 525600
    },
    "hour": {
        "day": 24,
        "year": 8760
    },
    "day": {
        "day": 1,
        "year": 365
    }
};

var tangle = new Tangle(document.getElementById("sensor_data_calculator"), {
    initialize: function () { 
        this.devices = 100; 
        this.sensors = 10;
        this.collection_frequency = 1;
        this.collection_period = "second";

    },
    update: function () { 
        var devices = ("" + this.devices).replace(/\D/g,'');
        var sensors = ("" + this.sensors).replace(/\D/g,'');
        var collection_frequency = ("" + this.collection_frequency).replace(/\D/g,'');

        var collection_factor = devices * sensors * collection_frequency;

        var data_points_day = collection_factor * multipliers[this.collection_period]["day"];
        var data_points_year = collection_factor * multipliers[this.collection_period]["year"];

        this.data_points_day = prettyround( data_points_day );
        this.data_points_week = prettyround( 7 * data_points_day );
        this.data_points_year = prettyround( data_points_year );
        this.data_points_5_years = prettyround( 5 * data_points_year);

        var storage_day = data_points_day * bytes_per_data_point;
        var storage_year = data_points_year * bytes_per_data_point;

        this.storage_day = prettyroundbytes( storage_day );
        this.storage_week = prettyroundbytes( 7 * storage_day );
        this.storage_year = prettyroundbytes( storage_year );
        this.storage_5_years = prettyroundbytes( 5 * storage_year );

        this.replicated_storage_day = prettyroundbytes( 3 * storage_day );
        this.replicated_storage_week = prettyroundbytes( 3 * 7 * storage_day );
        this.replicated_storage_year = prettyroundbytes( 3 * storage_year );
        this.replicated_storage_5_years = prettyroundbytes( 3 * 5 * storage_year );
    }
});

style.css

#sensor_data_calculator {
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 20px;
    width: 570px;
    background-color: #F3F6FB;
    padding: 1px 15px 25px 15px;
}

#sensor_data_calculator p, input, select, table, th, td {
    font-family: inherit;
}

#sensor_data_calculator input {
    text-align: right;
    font-size: .8em;
    border-radius: 4px;
    line-height: 2em;
    vertical-align: middle;
    padding-right: 5px;
    border: 1px solid #cccccc;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#sensor_data_calculator select {
    font-size: 1em;
    border-radius: 4px;
    height: 32px;
    background-color: white;
    border: 1px solid #cccccc;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#sensor_data_calculator table {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

#sensor_data_calculator th, td {
    padding: 5px 10px;
    border: 1px solid rgb(221, 221, 221);
}

#sensor_data_calculator th {
    font-weight: normal;
    background-color: rgb(65, 112, 189);
    border-bottom-color: rgb(221, 221, 221);
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-collapse: collapse;
    border-top-color: rgb(255, 255, 255);
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: white;
}

#sensor_data_calculator td {
    text-align: right;
}

xdksu.markdown

xdksu

A Pen by Sam Johnson on CodePen.

License.