Skip to content
Permalink
Browse files

vizualizacio commit

  • Loading branch information...
RapaErik committed Apr 28, 2018
1 parent d85e4c3 commit 6da1c86d0c5a2bc9a9bb64be5d2bf0f19c768832
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jo pofa</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lobster|Signika" rel="stylesheet">
<script>function type(){
typeWriter3("asszony","Azt tudja-e Kent, hogy miért élnek többet az asszonyok mint mű?",0,"Mert nekik nincs feleségük!");
MakeVisualisation([16,"#d41328",84,"#000"]);
}</script>
<script src="main.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>


<link rel="stylesheet" type="text/css" href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="content">
<div class="left-img">
<img src="gezaba.png" width="350px;">
</div>
<div class="pistaName">
<p>G. Bá</p>
</div>
<div class="pistaText">
<p>Ez Rapa Erik által írt template</p>
<a href="index.html" style="text-decoration:none; color:#000; position: absolute;top:190px" > <i class="fas fa-arrow-left"></i> Menu</a>
</div>
<div class="arrow_box" style="margin-top:40px">
<p id="asszony"></p>
<p id="asszony1"></p>
</div>
<div class="post">
<div class="cont" >
<p style="font-size:26px">Házassági arány 16.25965%</p>
</div>
<div class="cont" id="vizualizacio">
</div>
<div class="cont">
<p>Az adatok szerint 8003 ember vállalta fel azt, hogy házas. Ez az összes adathoz viszonyitva 16.25965%</p>
</div>
<div class="detalies">
<p><a href="#" style="text-decoration:none; color:black"><i class="fas fa-male" style="font-size:30px;color: #d41328"></i> Házas</a></p>
<p><i class="fas fa-male" style="font-size:30px;color:#000"></i> Házatlan</p>
</div>
</div>
<div class="right-bottom-img" style="top:265px">
<img src="asszony.png" width="200px;">
</div>
</div>
</body>
</html>
Binary file not shown.
@@ -0,0 +1,108 @@
<!DOCTYPE html>

<head>
<title>JopoFA</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script>function type(){typeWriter3("szakma",'És még azt es megmutatom, hogy honnót vannak űk',0)}</script>

<script src="main.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "none",
"dataProvider": [ {
"country": "Balánbánya",
"litres": 13
}, {
"country": "Barót",
"litres": 28
}, {
"country": "Csikszereda",
"litres": 63
}, {
"country": "Gyergyószentmiklós",
"litres": 38
}, {
"country": "Kézdivásárhely",
"litres": 54
}, {
"country": "Kolozsvár",
"litres": 85
}, {
"country": "Kovászna",
"litres": 101
}, {
"country": "Maroshévíz",
"litres": 27
}, {
"country": "Marosvásárhely",
"litres": 131
}, {
"country": "Parajd",
"litres": 7
}, {
"country": "Segesvár",
"litres": 32
}, {
"country": "Sepsiszentgyörgy",
"litres": 80
}, {
"country": "Szászrégen",
"litres": 67
}, {
"country": "Székelykeresztúr",
"litres": 31
}, {
"country": "Székelyudvarhely",
"litres": 50
},{
"country": "Szentegyháza",
"litres": 19
},{
"country": "Szováta",
"litres": 11
} ],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
</script>

</head>
<body>
<div class="content">
<div class="left-img" style="margin-left:0px">
<img src="huszar.png" width="150px;">
</div>
<div class="pistaName">
<p>A Vitéz</p>
</div>
<div class="pistaText">
<p>AMCHART segitségével történt vizualizáció</p>
<a href="index.html" style="text-decoration:none; color:#000; position: absolute;top:190px" > <i class="fas fa-arrow-left"></i> Menu</a>
</div>
<div class="arrow_box" style="margin-top:30px">
<p id="szakma"></p>
<p id="szakma1"></p>
</div>
<div class="post">
<div id="chartdiv"></div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jo pofa</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lobster|Signika" rel="stylesheet">
<script>function type(){typeWriter3("egyetem",'Ide jártak a gyermekek okoskodni.',0)}</script>
<script src="main.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>


<link rel="stylesheet" type="text/css" href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="content">
<div class="left-img">
<img src="pistaba.png" width="350px;">
</div>
<div class="pistaName">
<p>Pista Bá</p>
</div>
<div class="pistaText">
<p>Ezt a vizualizációt CHARTIST segitségével hoztuk létre</p>
<a href="index.html" style="text-decoration:none; color:black; position: absolute;top:190px" > <i class="fas fa-arrow-left"></i> Menu</a>
</div>
<div class="arrow_box">
<p id="egyetem"></p>
<p id="egyetem1"></p>
</div>
<div class="post">
<div style="width:20%; top:40%; position: absolute;">
<div class="postitem">
<div class="chart-point-item" style="background:#32dbd388"></div>
<p>BBTE</p>
</div>
<div class="postitem">
<div class="chart-point-item"style="background:#000"></div>
<p>MOGYE</p>
</div>
<div class="postitem">
<div class="chart-point-item"style="background:rgb(230, 115, 0)"></div>
<p>Transilvania Brasso</p>
</div>
<div class="postitem">
<div class="chart-point-item"style="background:#e24c7e"></div>
<p>UTCN</p>
</div>
<div class="postitem">
<div class="chart-point-item"style="background:#5557d3"></div>
<p>Petru Maior</p>
</div>
<div class="postitem">
<div class="chart-point-item"style="background:#59922b"></div>
<p>Sapientia EMTE</p>
</div>
</div>
<div style="width:80%; padding-left: 20%">
<div class="ct-chart" id="chart"></div>
<script type="text/javascript" src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.js"></script>

<script>
var chart = new Chartist.Line('.ct-chart', {
labels: ['2003','2004','2005','2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'],
series: [
[3 ,1, 10, 5, 9, 9, 10, 17, 12, 24, 18],//umf
[31,45,52,58,60,139,117,138,104,108,110],//ubb
[4,4,7,9,14,10,10,29,18,23,12],//transilvania
[2,1,3,5,3,5,13,17,28,2,21],//utcn
[1,4,16,6,9,16,29,15,31,16,14],//petru
[2,1,11,7,29,26,32,34,31,23,16 ]//sapi
]
}, {
low: 0,
axisY: {
onlyInteger: true
}
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
delays = 20,
durations = 100;
// Once the chart is fully created we reset the sequence
chart.on('created', function() {
seq = 0;
});
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
seq++;
if(data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays + 1000,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if(data.type === 'label' && data.axis === 'x') {
data.element.animate({
y: {
begin: seq * delays,
dur: durations,
from: data.y + 100,
to: data.y,
// We can specify an easing function from Chartist.Svg.Easing
easing: 'easeOutQuart'
}
});
} else if(data.type === 'label' && data.axis === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'grid') {
// Using data.axis we get x or y which we can use to construct our animation definition objects
var pos1Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '1'] - 30,
to: data[data.axis.units.pos + '1'],
easing: 'easeOutQuart'
};
var pos2Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '2'] - 100,
to: data[data.axis.units.pos + '2'],
easing: 'easeOutQuart'
};
var animations = {};
animations[data.axis.units.pos + '1'] = pos1Animation;
animations[data.axis.units.pos + '2'] = pos2Animation;
animations['opacity'] = {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
};
data.element.animate(animations);
}
});
</script>
</div>
</div>
<div class="right-bottom-img">
<img src="kolyok.png" width="200px;">
</div>
</div>
</body>
</html>
Binary file not shown.
Oops, something went wrong.

0 comments on commit 6da1c86

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.