Kut D3

Developer
Jelle Vrieswijk
Size
3,687 Kb
Views
24,288
  1. Kut D3 Previews
  2. Kut D3 HTML Codes
  3. Kut D3 JS Codes

How do I make an kut d3?

What is a kut d3? How do you make a kut d3? This script and codes were developed by Jelle Vrieswijk on 20 October 2022, Thursday.

Kut D3 Previews
IQ Test

Kut D3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Kut D3</title>
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src='https://codepen.io/jellevrswk/pen/YwKwbG?editors=001'></script> <script src="js/index.js"></script>
</body>
</html>

Kut D3 - Script Codes JS Codes

'use strict';
/** * This is a modified, commented, version of: * * https://bl.ocks.org/mbostock/3885304 */
/** * Define canvas size. */
var margin, width, height;
margin = { 'top': 20, 'right': 20, 'bottom': 30, 'left': 50
};
width = 960 - margin.left - margin.right;
height = 500 - margin.top - margin.bottom;
/** * Define scale for x-axis. * * The second parameters, `0.1`, simply states the * ammount of space between the bars. * * The `rangeRoundBands` function makes it easy to work * with thick bars instead of single pixel values. * * @see * https://github.com/mbostock/d3/wiki/ * Ordinal-Scales#ordinal * * @param {number} * @return {number} */
var x = d3.scale.ordinal() //hiermee krijg je een normale schaalverdeling .rangeRoundBands([0, width], 0.1);
/** * Define scale for y-axis. Pass it a number and it * will return an interpolated number between `height` * and `0`. * * @see * https://github.com/mbostock/d3/wiki/ * Quantitative-Scales#linear * * @param {number} * @return {number} */
var y = d3.scale.linear() //een lineaire schaal .range([height, 0]); //met de range height (zie regel 25) tot 0
/** * Define x-axis and y-axis. Axes automagically add fancy * ticks/info next to data. * * @see * https://github.com/mbostock/d3/wiki/ * SVG-Axes#axis * * @param {D3Selection} */
var xAxis = d3.svg.axis() .scale(x) //de x as krijgt de xschaal .orient('bottom'); //en wordt aan de onderkant geplaatst
var yAxis = d3.svg.axis() .scale(y) .orient('left') .ticks(10, '%'); //hoeveel ticks op de y as en wordt geformateerd als percentages
/** * Add an `<svg>` element to document's body, and a `<g>` * element to that `<svg>`. * * @type {Array} * * @see * https://github.com/mbostock/d3/wiki/Selections */
var $svg = d3.select('body') //selecteerde body .append('svg') //je voegt svg element toe .attr('width', width + margin.left + margin.right) //width (zie regel 24 en 25) .attr('height', height + margin.top + margin.bottom) //en height worden aan svg element toegevoegd .append('g') //je voegt een g element toe (fungeert als een groep) .attr( // met wat attributen 'transform', 'translate(' + margin.left + ',' + margin.top + ')' //je verplaatst het svg element een stukje naar boven en naar rechts anders staat het tegen de y-as aan (zie regel 17) );
/** * Clean data. Data is currently a list of objects, * each containing both `letter` and `frequency` * properties. * * Here we transform the `frequency` property (currently * `string`) to `number`s. */
function clean(d) { //functie clean krijgt straks een object d.frequency = Number(d.frequency); //van d.frequency maakt je een nummer return d; //hier return je de data
}
/** * Get the data. * * @see * https://github.com/mbostock/d3/wiki/CSV#tsv */
d3.tsv('bar.tsv', clean, function (exception, data) { //krijgt een stuk tekst uit het bestand, functie die je mee wilt geven aan de data uit het bestandje (clean), dan andere functie een callback /** * Handle error. */ if (exception) { throw exception; //eror dat houdt ie er mee op } /** * Add a domain for the x-axis. * * The `extent` function just returns the minimum * and maximum values in a list. * * The `domain` function simply sets the values to * interpolate between. * * @see * https://github.com/mbostock/d3/wiki/ * Ordinal-Scales#ordinal_domain */ x.domain(data.map(function (d) { //de x domein wordt gezet, we geven aan welke plekken er zijn op de x as omdat de data nu pas beschikbaar is return d.letter; //met map verander je de data en doe je er iets nieuws mee, a t/m z wordt gereturned en die geven we terug aan x.domain dus dan weet ie dat er op elke letter iets geplot gaat worden })); /** * Add a domain for the y-axis. * * The `extent` function just returns the minimum * and maximum values in a list. * * The `domain` function simply sets the values to * interpolate between. * * @see * https://github.com/mbostock/d3/wiki/ * Quantitative-Scales#linear_domain */ y.domain([0, d3.max(data, function (d) { // return d.frequency; })]); /** * Add the x-axis to `<svg>`. * * The `call` function is a convenience helper: * Both following examples are equal: * * f(g) * * g.call(f) * * @see * https://github.com/mbostock/d3/wiki/ * Selections#call */ $svg .append('g') //we voegen nog een groep toe aan het svg element .attr('class', 'axis axis-x') //met deze class die wordt aangesproken in de CSS .attr('transform', 'translate(0,' + height + ')') .call(xAxis); //de x as wordt hiermee geplot /** * Add the y-axis to `<svg>`. * * Additionally add a `frequency` label to this axis. * * @see * https://github.com/mbostock/d3/wiki/ * Selections#call */ $svg .append('g') //nog een groep toevoegen .attr('class', 'axis axis-y') //namelijk de y-as .call(yAxis) //de y as wordt hiermee geplot/geplaatst .append('text') //er wordt een tekst element aan toegevoegd .attr('transform', 'rotate(-90)') //dit tekst element heeft een transform .attr('y', 6) .attr('dy', '.71em') .style('text-anchor', 'end') .text('Frequency'); //de waarde frequency, voegt een label toe aan de y-as /** * Add the data. * * @see * https://github.com/mbostock/d3/wiki/ * Selections#data */ $svg //svg wordt weer geselecteerd (ook al is het er nog niet, dit is altijd met D3, je voegt het later pas toe) .selectAll('.bar') //alle barelementen zijn geselecteerd .data(data) //hier wordt data aan toegevoegd .enter() //voor alle nieuwe dingen die geenterd worden .append('rect') //er wordt een element toegevoegd .attr('class', 'bar') //die krijgt een class mee .attr('x', function (d) { //er wordt een x element return x(d.letter); }) .attr('width', x.rangeBand()) //rangeBand geeft aan hoeveel ruimte elke bar heeft .attr('y', function (d) { return y(d.frequency); }) .attr('height', function (d) { return height - y(d.frequency); });
});
Kut D3 - Script Codes
Kut D3 - Script Codes
Home Page Home
Developer Jelle Vrieswijk
Username jellevrswk
Uploaded October 20, 2022
Rating 3
Size 3,687 Kb
Views 24,288
Do you need developer help for Kut D3?

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
D3 Workshop Oefening 4
Datavis eindopdracht final
Clipping animations
Deeltoets 2
Datavis testje
Deeltoets I
Eindopdracht Datavisualisatie
A Pen by Jelle Vrieswijk
MyDataVis
Oefening 1
Create amazing sales emails 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!