CMT3 - Opdracht14

Developer
Karlien Huygels
Size
4,342 Kb
Views
12,144
  1. CMT3 - Opdracht14 Previews
  2. CMT3 - Opdracht14 HTML Codes
  3. CMT3 - Opdracht14 CSS Codes
  4. CMT3 - Opdracht14 JS Codes

How do I make an cmt3 - opdracht14?

What is a cmt3 - opdracht14? How do you make a cmt3 - opdracht14? This script and codes were developed by Karlien Huygels on 29 October 2022, Saturday.

CMT3 - Opdracht14 Previews
IQ Test

CMT3 - Opdracht14 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CMT3 - Opdracht14</title> <script type="text/javascript" src="https://rawgit.com/twitter/labella.js/master/dist/labella.js"></script>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="particles-js"></div>
<body class="harry-potter"> <header> <h1>Harry Potter</h1> <h2>film series</h2> </header> <div class="chart-container"> <div id="timeline"></div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CMT3 - Opdracht14 - Script Codes CSS Codes

/* ---- reset ---- */
body { margin: 0;
}
canvas { display: block; vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js { position: absolute; width: 100%; height: 100%;
}
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
body { font-family: 'Lato', Helvetica, Arial, sans-serif; background: #111; text-align: center;
}
h1{ font-family: 'Special Elite', cursive; text-transform: uppercase; color: white; margin-top: 50px;
}
h2{ font-family: 'Special Elite', cursive; color: white;
}
header { display: inline-block; width: 1000px; text-align: center; margin-bottom: 15px;
}
.chart-container { margin-top: -5px; text-align: center; width: 100%;
}
.chart-container svg { background: #eee; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+");
}
line.timeline { stroke-width: 2px; stroke: #87CEEB;
}
circle.dot { fill: #222;
}
body.harry-potter .chart-container svg { background: none;
}
body.harry-potter line.timeline { stroke-width: 2px; stroke: rgba(255,255,255,1);
}
body.harry-potter circle.dot { fill: white;
}
.form-control,
button.btn { border-radius: 0;
}
.form-control.short-input { width: 60px; text-align: center; display: inline-block;
}
select.form-control { display: inline-block; width: 180px;
}
.metrics-table { display: inline-block;
}
.metrics-table th { font-weight: 100; font-size: 1.2em;
}
.metrics-table td:first-child { padding-right: 10px;
}

CMT3 - Opdracht14 - Script Codes JS Codes

/* ---- particles.js config ---- */
particlesJS("particles-js", { "particles": { "number": { "value": 100, "density": { "enable": true, "value_area":1000 } }, "color": { "value": ["#EC186C", "#6D206E", "#141959", "#403BEF"] }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#fff" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 0.6, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 1, "sync": false } }, "size": { "value": 2, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 120, "color": "#ffffff", "opacity": 0.4, "width": 1 }, }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": false }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true
});
// ---------------------------------------------------
// Create dummy data
// ---------------------------------------------------
var data = [ {date: new Date(2001,10,16), name: 'Harry Potter and the Philosophers Stone'}, {date: new Date(2002,10,15), name: 'Harry Potter and the Chamber of Secrets'}, {date: new Date(2004,05,14), name: 'Harry Potter and the Prisoner of Azkaban'}, {date: new Date(2005,10,06), name: 'Harry Potter and the Goblet of Fire'}, {date: new Date(2007,06,06), name: 'Harry Potter and the Order of the Phoenix'}, {date: new Date(2009,06,07), name: 'Harry Potter and the Half-Blood Prince'}, {date: new Date(2010,10,19), name: 'Harry Potter and the Deathly Hallows part I'}, {date: new Date(2011,06,15), name: 'Harry Potter and the Deathly Hallows part II'},
];
var formatDate = d3.time.format('%x ');
var options = { margin: {left: 20, right: 20, top: 20, bottom: 20}, initialWidth: 1200, initialHeight: 400
};
var innerWidth = options.initialWidth - options.margin.left - options.margin.right;
var innerHeight = options.initialHeight - options.margin.top - options.margin.bottom;
var colorScale = d3.scale.category10();
var vis = d3.select('#timeline') .append('svg') .attr('width', options.initialWidth) .attr('height', options.initialHeight) .append('g') .attr('transform', 'translate('+(options.margin.left)+','+(options.margin.top)+')');
function labelText(d){ return formatDate(d.date) + ' - ' + d.name;
}
// compute labels dimension
var dummyText = vis.append('text');
var timeScale = d3.time.scale() .domain(d3.extent(data, function(d){return d.date;})) .range([0, innerWidth]) .nice();
var nodes = data.map(function(movie){ var bbox = dummyText.text(labelText(movie))[0][0].getBBox(); movie.h = bbox.height; movie.w = bbox.width; return new labella.Node(timeScale(movie.date), movie.w + 9, movie);
});
dummyText.remove();
// ---------------------------------------------------
// Draw dots on the timeline
// ---------------------------------------------------
vis.append('line') .classed('timeline', true) .attr('x2', innerWidth);
var linkLayer = vis.append('g');
var labelLayer = vis.append('g');
var dotLayer = vis.append('g');
dotLayer.selectAll('circle.dot') .data(nodes)
.enter().append('circle') .classed('dot', true) .attr('r', 3) .attr('cx', function(d){return d.getRoot().idealPos;});
function color(d,i){ return 'rgba(255,255,255,1)';
}
//---------------------------------------------------
// Labella has utility to help rendering
//---------------------------------------------------
var renderer = new labella.Renderer({ layerGap: 60, nodeHeight: nodes[0].data.h, direction: 'bottom'
});
function draw(nodes){ // Add x,y,dx,dy to node renderer.layout(nodes); // Draw label rectangles var sEnter = labelLayer.selectAll('rect.flag') .data(nodes) .enter().append('g') .attr('transform', function(d){return 'translate('+(d.x-d.width/2)+','+(d.y)+')';}); sEnter .append('rect') .classed('flag', true) .attr('width', function(d){ return d.data.w + 9; }) .attr('height', function(d){ return d.data.h + 4; }) .attr('rx', 2) .attr('ry', 2) .style('fill', color); sEnter.append('text') .attr('x', 4) .attr('y', 15) .style('fill', 'black') .text(function(d){return labelText(d.data);}); // Draw path from point on the timeline to the label rectangle linkLayer.selectAll('path.link') .data(nodes) .enter().append('path') .classed('link', true) .attr('d', function(d){return renderer.generatePath(d);}) .style('stroke', color) .style('stroke-width',2) .style('opacity', 0.6) .style('fill', 'none');
}
//---------------------------------------------------
// Use labella.Force to place the labels
//---------------------------------------------------
var force = new labella.Force({ minPos: -10, maxPos: innerWidth
}) .nodes(nodes) .compute();
draw(force.nodes());
CMT3 - Opdracht14 - Script Codes
CMT3 - Opdracht14 - Script Codes
Home Page Home
Developer Karlien Huygels
Username KarlienHuygels
Uploaded October 29, 2022
Rating 3
Size 4,342 Kb
Views 12,144
Do you need developer help for CMT3 - Opdracht14?

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!

Karlien Huygels (KarlienHuygels) Script Codes
Name
CMT3 - Opdracht7
IT3 - Opdracht6
IT3 - Opdracht4
Grid layout draft
CMT3 - Opdracht4
IT 3- Opdracht8
IT3 - Opdracht5
CMT3 - Opdracht10
IT3 - Opdracht3
IT3 - Opdracht2
Create amazing blog posts 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!