Deeltoets 2

Developer
Jelle Vrieswijk
Size
4,127 Kb
Views
12,144
  1. Deeltoets 2 Previews
  2. Deeltoets 2 HTML Codes
  3. Deeltoets 2 CSS Codes
  4. Deeltoets 2 JS Codes

How do I make an deeltoets 2?

Een verwoede poging iets met D3 te doen.. What is a deeltoets 2? How do you make a deeltoets 2? This script and codes were developed by Jelle Vrieswijk on 20 October 2022, Thursday.

Deeltoets 2 Previews
IQ Test

Deeltoets 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Deeltoets 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Het slaapritme van Jelle Vrieswijk</h1>
<p>Omdat ik vrij onregelmatig slaap en, in de weekenden, midden in de nacht moet werken leek het me interessant om te kijken hoelang ik slaap en wat de slaapkwaliteit is van elke slaap. Ik heb dit gemeten met de app Sleep Cycle voor iPhone.</p> <div class="graph"></div> <div class="legenda"> <h2>Legenda:</h2> <div class="groen">Slaapkwaliteit 80% of hoger</div> <div class="blauw">Slaapkwaliteit tussen 60% en 80%</div> <div class="rood">Slaapkwaliteit 60% of lager</div> </div> <script src='js/ywkwbg.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=11'></script> <script src="js/index.js"></script>
</body>
</html>

Deeltoets 2 - Script Codes CSS Codes

body { font-family: 'Open Sans', sans-serif; font-size: 1em; color: #212121; background: #fefefe;
}
.graph { display: inline-block; margin: 0 auto; text-align: center;
}
.goed { fill: #2ECC71;
}
.slecht { fill: #E74C3C;
}
.middelmatig { fill: #3498DB;
}
.axis { shape-rendering: crispEdges;
}
.axis path { fill: none; stroke: #212121;
}
.axis text { fill: #212121; font-size: 1em;
}
h1 { font-size: 2em; font-weight: 300; text-align: left; margin-bottom: 1em;
}
h2 { text-align: left; font-weight: 300;
}
p { line-height: 1.8em;
}
.legenda { display: inline-block; text-align: center; font-size: 1em; padding: 0.7em;
}
.groen, .blauw, .rood { padding: 0.7em; margin: 0.3em;
}
.groen { border: 3px solid #2ECC71;
}
.blauw { border: 3px solid #3498DB;
}
.rood { border: 3px solid #E74C3C;
}

Deeltoets 2 - Script Codes JS Codes

// De margins worden gedefinieerd om de assen goed te positioneren. Vervolgens word er met de variabelen width en height het 'canvas' gedefinieerd.
var margin = { top: 20, right: 30, bottom: 40, left: 40 }, width = 1100 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;
// De schaal van de x-as definiëren. d3.scale.ordinal zorgt voor een normale rangtelling. .domain fungeert als input voor functies, het verklaart de grenzen waarbinnen de data ligt. .data fungeert als output, het verklaart de grenzen waarbinnen de originele data kunnen worden omgezet De tweede parameters, '0.2', verklaart de ruimte tussen de bars.
var x = d3.scale.ordinal() .domain(data.map(function(d) { return d.datum; })) .rangeRoundBands([0, width], 0.2);
// De schaal van de y-as definiëren. d3.scale.linear zorgt voor een lineare (omhooglopende) schaal.
var y = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.slaapuren; })]) .range([height, 0]);
// De x- en y-as definiëren. Beide assen krijgen hun schaal mee en worden aan de onderkant of aan de linkerkant geplaatst.
var xAxis = d3.svg.axis() .scale(x) .orient("bottom");
var yAxis = d3.svg.axis() .scale(y) .orient("left");
// Een <svg> element wordt toegevoegd aan het element met de class ".graph" en de hoogte en breedte wordt hiervast vastgesteld. Daarnaast wordt er een <g> element toegevoegd aan die <svg> met een aantal attributen.
var svg = d3.select(".graph") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Het nog niet bestaande <svg> element wordt geselecteerd en daarbinnen alle rect elementen. Aan deze elementen wordt vervolgens data toegevoegd en zij krijgen een class mee. Vervolgens wordt het rect element toegevoegd en wordt er per rect element een class toegevoegd voor de slaapkwaliteit (slecht, middelmatig of goed) d.m.v. een function die telkens de waarde van 'slaapkwaliteit' checkt.
svg.selectAll("rect") .data(data) .enter() //voor elke tekst een nieuw item .append("g") .attr("class", "bar") .append("rect") .attr("class", function(d) { //Als de slaapkwaliteit hoger is dan 0.8 dan is de slaapkwaliteit goed. if (d.slaapkwaliteit > 0.8) { return "goed"; //Als de slaapkwaliteit niet goed is dan wordt er gecheckt of deze kleiner is dan of gelijk is aan 0.6, in dat geval is de slaapkwaliteit slecht } else if (d.slaapkwaliteit <= 0.6) { return "slecht"; //Als de slaapkwaliteit niet goed is of slecht wordt er gecheckt of deze kleiner is dan of gelijk is aan 0.8, in dit geval is de slaapkwaliteit middelmatig } else if (d.slaapkwaliteit <= 0.8) { return "middelmatig"; } })
// De hoogte en de breedte worden bepaald van de x- en y-as
.attr("x", function(d) { return x(d.datum); }) .attr("y", function(d) { return y(d.slaapuren); }) .attr("height", function(d) { return height - y(d.slaapuren); }) .attr("width", x.rangeBand())
// De y-as wordt toegevoegd aan het <svg> element. Met .call(yAxis) wordt de y-as geplot. Vervolgens wordt er tekst toegevoegd, wordt deze zijwaarts gedraaid en gepositioneerd. Ten slotte wordt de daadwerkelijke tekst toegevoegd "Aantal uren slaap".
svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 16) .attr("y", -margin.bottom) .attr("dy", ".71em") .style("text-anchor", "end") .text("Aantal uren slaap");
// De x-as wordt toegevoegd aan het <svg> element. Met .call(xAxis) wordt de x-as geplot.
svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis)
//Greensock
var tl = new TimelineMax();
tl.from(('.axis path'), 3, { opacity: 0, drawSVG: "0%", ease: Power3.easeOut }) .staggerFrom(('.axis text'), 0.5, { scale: 0.6, opacity: 0, transformOrigin: 'bottom', ease: Power2.easeInOut }, 0.15) .staggerFrom(('.bar'), 1, { scale: 0.6, opacity: 0, transformOrigin: 'bottom', ease: Power2.easeInOut }, 0.15);
Deeltoets 2 - Script Codes
Deeltoets 2 - Script Codes
Home Page Home
Developer Jelle Vrieswijk
Username jellevrswk
Uploaded October 20, 2022
Rating 3
Size 4,127 Kb
Views 12,144
Do you need developer help for Deeltoets 2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jelle Vrieswijk (jellevrswk) Script Codes
Name
Clipping animations
Oefening 1
D3 Workshop Oefening 4
Test
Aantekeningen D3.js
Deeltoets I
Datavis testje
Datavis eindopdracht final
MyDataVis
Motion Design Eindopdracht
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!