Add gradient and first try to load csv file

This commit is contained in:
hodasemi 2018-10-21 12:18:16 +02:00
parent 11c35a787b
commit acc42e8b46
5 changed files with 88 additions and 3 deletions

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

View file

@ -1,6 +1,6 @@
/* Add a black background color to the top navigation */ /* Add a black background color to the top navigation */
.topnav { .topnav {
background-color: #333; background-image: linear-gradient(grey, lightgrey);
overflow: hidden; overflow: hidden;
} }

View file

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="main.js"></script> <script type="text/javascript" src="main.js"></script>
</head> </head>
<body> <body>
@ -20,6 +20,8 @@
<p>Fourth</p> <p>Fourth</p>
</ul> </ul>
</nav> </nav>
<input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv">
</body> </body>
</html> </html>

54
main.js
View file

@ -0,0 +1,54 @@
// Source: https://blog.mounirmesselmeni.de/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/
// Source: https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-javascript-html5/
function handleFiles(files) {
// Check for the various File API support.
if (window.FileReader) {
// FileReader are supported.
getAsText(files[0]);
} else {
alert('FileReader are not supported in this browser.');
}
}
function getAsText(fileToRead) {
var reader = new FileReader();
// Read file into memory as UTF-8
reader.readAsText(fileToRead);
// Handle errors load
reader.onload = loadHandler;
reader.onerror = errorHandler;
}
function loadHandler(event) {
var csv = event.target.result;
processData(csv);
}
function processData(csv) {
var table = "<table class='table'>";
var allTextLines = csv.split(/\r\n|\n/);
for (var i = 0; i < allTextLines.length; i++) {
var data = allTextLines[i].split(';');
table += "<tr>";
for (var j = 0; j < data.length; j++) {
table += "<td>";
table += data[j];
table += "</th>";
}
table += "</tr>";
}
table += "</table>";
$("#parsed_csv_list").html(table);
}
function errorHandler(evt) {
if (evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}

26
world_data_v1.csv Normal file
View file

@ -0,0 +1,26 @@
id ,name ,birth rate per 1000,cell phones per 100,children per woman,electricity consumption per capita,gdp_per_capita,gdp_per_capita_growth,inflation annual,internet user per 100,life expectancy,military expenditure percent of gdp,gps_lat ,gps_long
001,Brazil ,16.405 ,90.01936334 ,1.862 ,2201.808724 ,4424.758692 ,-1.520402823 ,8.228535058 ,39.22 ,74 ,1.615173655 ,-14.235004000,-51.925280000
002,Canada ,10.625 ,70.70997244 ,1.668 ,15119.76414 ,25069.86915 ,-3.953353186 ,2.944408564 ,80.17086651 ,80.9 ,1.415710422 ,56.130366000 ,-106.346771000
003,Chile ,15.04 ,97.01862561 ,1.873 ,3276.06449 ,6451.631126 ,-2.610485847 ,7.47050527 ,38.8 ,78.8 ,3.064076139 ,-35.675147000,71.542969000
004,China ,13.536 ,55.97490921 ,1.642 ,2632.724637 ,2208.403948 ,8.648414427 ,6.684109668 ,28.97659939 ,75.6 ,2.24110794 ,35.86166000 ,104.19539700
005,Colombia ,20.605 ,92.34584564 ,2.405 ,1041.994137 ,3137.695335 ,0.2081538559 ,3.666941163 ,30 ,75.3 ,3.833780372 ,4.570868000 ,-74.297333000
006,Ecuador ,20.989 ,92.84925653 ,2.69 ,1078.038961 ,1692.067197 ,-1.079538461 ,7.595866872 ,24.6 ,74.1 ,3.746501879 ,-1.831239000 ,-78.183406000
007,Egypt ,24.83 ,69.43661504 ,2.919 ,1607.918763 ,1911.964501 ,2.856917581 ,10.10750976 ,24.28 ,70.2 ,2.137305699 ,26.820553000 ,30.802498000
008,Finland ,11.127 ,144.1530224 ,1.86 ,15241.61194 ,26205.68832 ,-8.791558776 ,0.4277308694 ,82.53133098 ,79.7 ,1.501872268 ,61.924110000 ,25.748151000
009,France ,12.21 ,95.44434226 ,1.978 ,7339.946832 ,22508.76261 ,-3.264056248 ,1.050366124 ,69.0633593 ,81 ,2.55313249 ,46.22763800 ,2.21374900
010,Germany ,8.136 ,127.4188883 ,1.376 ,6753.05764 ,24368.19561 ,-4.886323581 ,0.5959234322 ,79.48523153 ,80 ,1.438871341 ,51.165691000 ,10.451526000
011,Iceland ,14.738 ,107.6604456 ,2.123 ,51259.18763 ,35310.97441 ,-6.990418561 ,6.900703626 ,92.13686385 ,82.2 ,0.0820538039 ,64.9630510000,-19.0208350000
012,Iraq ,31.585 ,65.47478839 ,4.276 ,1086.323768 ,752.1833548 ,1.141874289 ,25.22442136 ,1.047516616 ,68.1 ,4.621383386 ,33.223191000 ,43.679291000
013,Japan ,8.201 ,91.8955442 ,1.359 ,7838.005685 ,38242.02429 ,-6.180260885 ,-2.08543109 ,77.38468963 ,82.8 ,1.019445017 ,36.204824000 ,138.252924000
014,Kazakhstan ,19.775 ,107.7147692 ,2.537 ,4447.142293 ,2345.86415 ,-1.437812068 ,19.5422854 ,17.91457965 ,66.6 ,1.105385125 ,48.019573000 ,66.923684000
015,Mexico ,19.091 ,74.25785259 ,2.313 ,1869.82352 ,5875.619997 ,-7.417438847 ,4.033645258 ,26.34 ,75.5 ,0.5396656609 ,23.6345010000,-102.5527840000
016,New Zealand ,13.831 ,108.7301521 ,2.125 ,9375.550304 ,14778.16393 ,-1.552308788 ,3.486782259 ,79.82609287 ,80.3 ,1.140562366 ,-40.900557000,174.885971000
017,Nigeria ,40.134 ,48.23561006 ,6.021 ,119.8151486 ,513.5003377 ,4.3526073 ,9.313146383 ,20 ,58.5 ,0.8924302789 ,9.0819990000 ,8.6752770000
018,Peru ,21.342 ,85.86901405 ,2.545 ,1043.052601 ,2955.186222 ,-0.2228977721 ,4.49134447 ,31.4 ,76.7 ,1.348875763 ,-9.189967000 ,-75.015152000
019,Russia ,10.828 ,161.1162887 ,1.537 ,6132.978648 ,2806.41483 ,-7.749103694 ,11.60398093 ,29.23584146 ,68.3 ,4.36259042 ,61.52401000 ,105.31875600
020,Saudi Arabia ,23.569 ,167.3474553 ,2.898 ,7430.743897 ,9294.355996 ,-2.242127204 ,14.36222827 ,38 ,77.6 ,10.95653405 ,23.88594200 ,45.07916200
021,South Africa ,22.113 ,93.33587369 ,2.5 ,4532.021902 ,3697.67368 ,-2.732989408 ,7.861608575 ,10.08745979 ,55.8 ,1.394530379 ,-30.559482000,22.937506000
022,Sweden ,11.72 ,112.1241184 ,1.937 ,14143.01101 ,30885.45914 ,-5.976535294 ,1.022227082 ,91.12326108 ,81.2 ,1.247701873 ,60.128161000 ,18.643501000
023,United Arab Emirates,14.027 ,153.7997194 ,1.903 ,9998.291079 ,22507.00157 ,-11.99171952 ,8.549032358 ,64 ,76.1 ,5.834881976 ,23.424076000 ,53.847818000
024,United Kingdom ,12.195 ,130.1742603 ,1.89 ,5685.635995 ,27933.77767 ,-5.019251823 ,2.861406642 ,77.79971962 ,79.7 ,2.667209048 ,52.355517700 ,-1.174319700
025,United States ,14.191 ,89.14911634 ,2.002 ,12913.71143 ,36539.22823 ,-4.342271218 ,1.152326348 ,71.21181627 ,78.3 ,4.822730027 ,37.090240000 ,-95.712891000
1 id name birth rate per 1000 cell phones per 100 children per woman electricity consumption per capita gdp_per_capita gdp_per_capita_growth inflation annual internet user per 100 life expectancy military expenditure percent of gdp gps_lat gps_long
2 001 Brazil 16.405 90.01936334 1.862 2201.808724 4424.758692 -1.520402823 8.228535058 39.22 74 1.615173655 -14.235004000 -51.925280000
3 002 Canada 10.625 70.70997244 1.668 15119.76414 25069.86915 -3.953353186 2.944408564 80.17086651 80.9 1.415710422 56.130366000 -106.346771000
4 003 Chile 15.04 97.01862561 1.873 3276.06449 6451.631126 -2.610485847 7.47050527 38.8 78.8 3.064076139 -35.675147000 71.542969000
5 004 China 13.536 55.97490921 1.642 2632.724637 2208.403948 8.648414427 6.684109668 28.97659939 75.6 2.24110794 35.86166000 104.19539700
6 005 Colombia 20.605 92.34584564 2.405 1041.994137 3137.695335 0.2081538559 3.666941163 30 75.3 3.833780372 4.570868000 -74.297333000
7 006 Ecuador 20.989 92.84925653 2.69 1078.038961 1692.067197 -1.079538461 7.595866872 24.6 74.1 3.746501879 -1.831239000 -78.183406000
8 007 Egypt 24.83 69.43661504 2.919 1607.918763 1911.964501 2.856917581 10.10750976 24.28 70.2 2.137305699 26.820553000 30.802498000
9 008 Finland 11.127 144.1530224 1.86 15241.61194 26205.68832 -8.791558776 0.4277308694 82.53133098 79.7 1.501872268 61.924110000 25.748151000
10 009 France 12.21 95.44434226 1.978 7339.946832 22508.76261 -3.264056248 1.050366124 69.0633593 81 2.55313249 46.22763800 2.21374900
11 010 Germany 8.136 127.4188883 1.376 6753.05764 24368.19561 -4.886323581 0.5959234322 79.48523153 80 1.438871341 51.165691000 10.451526000
12 011 Iceland 14.738 107.6604456 2.123 51259.18763 35310.97441 -6.990418561 6.900703626 92.13686385 82.2 0.0820538039 64.9630510000 -19.0208350000
13 012 Iraq 31.585 65.47478839 4.276 1086.323768 752.1833548 1.141874289 25.22442136 1.047516616 68.1 4.621383386 33.223191000 43.679291000
14 013 Japan 8.201 91.8955442 1.359 7838.005685 38242.02429 -6.180260885 -2.08543109 77.38468963 82.8 1.019445017 36.204824000 138.252924000
15 014 Kazakhstan 19.775 107.7147692 2.537 4447.142293 2345.86415 -1.437812068 19.5422854 17.91457965 66.6 1.105385125 48.019573000 66.923684000
16 015 Mexico 19.091 74.25785259 2.313 1869.82352 5875.619997 -7.417438847 4.033645258 26.34 75.5 0.5396656609 23.6345010000 -102.5527840000
17 016 New Zealand 13.831 108.7301521 2.125 9375.550304 14778.16393 -1.552308788 3.486782259 79.82609287 80.3 1.140562366 -40.900557000 174.885971000
18 017 Nigeria 40.134 48.23561006 6.021 119.8151486 513.5003377 4.3526073 9.313146383 20 58.5 0.8924302789 9.0819990000 8.6752770000
19 018 Peru 21.342 85.86901405 2.545 1043.052601 2955.186222 -0.2228977721 4.49134447 31.4 76.7 1.348875763 -9.189967000 -75.015152000
20 019 Russia 10.828 161.1162887 1.537 6132.978648 2806.41483 -7.749103694 11.60398093 29.23584146 68.3 4.36259042 61.52401000 105.31875600
21 020 Saudi Arabia 23.569 167.3474553 2.898 7430.743897 9294.355996 -2.242127204 14.36222827 38 77.6 10.95653405 23.88594200 45.07916200
22 021 South Africa 22.113 93.33587369 2.5 4532.021902 3697.67368 -2.732989408 7.861608575 10.08745979 55.8 1.394530379 -30.559482000 22.937506000
23 022 Sweden 11.72 112.1241184 1.937 14143.01101 30885.45914 -5.976535294 1.022227082 91.12326108 81.2 1.247701873 60.128161000 18.643501000
24 023 United Arab Emirates 14.027 153.7997194 1.903 9998.291079 22507.00157 -11.99171952 8.549032358 64 76.1 5.834881976 23.424076000 53.847818000
25 024 United Kingdom 12.195 130.1742603 1.89 5685.635995 27933.77767 -5.019251823 2.861406642 77.79971962 79.7 2.667209048 52.355517700 -1.174319700
26 025 United States 14.191 89.14911634 2.002 12913.71143 36539.22823 -4.342271218 1.152326348 71.21181627 78.3 4.822730027 37.090240000 -95.712891000