Add gradient and first try to load csv file
This commit is contained in:
parent
11c35a787b
commit
acc42e8b46
5 changed files with 88 additions and 3 deletions
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"editor.formatOnSave": true
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
54
main.js
|
|
@ -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
26
world_data_v1.csv
Normal 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
|
||||||
|
Loading…
Reference in a new issue