Week 1

Maandag 16-10-2023 - Introductieles

Vandaag is de eerste dag van het nieuwe blok van de minor Information Design: Blok Tech. Ik heb voor dit blok gekozen omdat ik coderen leuk vind en mij beter ligt dan het ontwerpen van de visualisaties.

Tijdens deze les werd er uitgelegd wat tijdens dit blok konden verwachten en welke vaardigheden er nodig zijn om dit blok succesvol af te ronden. Aan het begin van de les hebben we enquete ingevuld. Veel van deze vragen werden op verschillende wijze gesteld, wat ervoor zorgde dat er een dataset ontstond met waardes die op verschillende wijze werden weergegeven (data, etc..). Hierna werd toegelicht dat wij straks ook onze dataset kunnen opschonen d.m.v. onze geschreven code.

Dinsdag 17-10-2023 - Huiswerk opdrachten

Opdracht 1:

function convertArrayStringsToNumbers() {
	/* Your code here should convert the data array to an array containing only numbers and no strings and log the code to the console. */
	arrayNumbers = data.map(function(str) {
		return parseInt(str, 10);
	});

	console.log(arrayNumbers);
}

convertArrayStringsToNumbers();

Opdracht 2:

function convertArrayStringsToCapitalized() {
	newData = data.map(item => item.charAt(0).toUpperCase() + item.substr(1).toLowerCase());
	console.log(newData);
}
 
convertArrayStringsToCapitalized();

Opdracht 3:

function transformArrOfObj() {
	  
	const newData = data.map(({ work, ...rest }) => ({
		...rest,
		residence: rest.residence.charAt(0).toUpperCase() + rest.residence.slice(1)
	  }));

console.log(newData);
}

transformArrOfObj();

Woensdag 18-10-2023 - Javascript bordspel

Vandaag zijn we de les begonnen met een bordspel genaamd 'Monkey Island'. Dit spel liet de werking tussen functies in Javascript zien. De klas werd in groepjes onderverdeeld en ieder kreeg een eigen rol toegewezen. Zo was er iemand een spelleider, dobbelsteen en waren er 4 pionnen. Elke rol had een specifieke functie in de code. De spelleider gaf commando's en riep de functies hardop aan. Erg leerzaam, want hierdoor zie je de interactie tussen functies er goed in.

Donderdag 19-10-2023 - Huiswerk opdrachten

Opdracht 1:

function generateTable() {

	var table = document.querySelector('table');
	var thead = document.querySelector('thead tr');
	var tbody = document.querySelector('tbody');

	let columns = Object.keys(data[0]);

	columns.forEach(key => {
		let newHeading = document.createElement('th');
		newHeading.textContent = key;
		thead.appendChild(newHeading);
	});
	
	data.forEach(obj => {
		tr = document.createElement('tr');
		tbody.appendChild(tr);



		for(key in obj) {
			td = document.createElement('td');
			td.textContent = obj[key];
			tr.appendChild(td);
		}
	});
}

generateTable()

Opdracht 2:

function changeArrayData(data){
	return data.map(obj => ({
		id: parseInt(obj.id),
		name: obj.name.charAt(0).toUpperCase() + obj.name.slice(1).toLowerCase(),
		kaas: String(obj.kaas),
		lat_coords: parseFloat(obj.coords.lat),
		long_coords: `Long: ${obj.coords.long}`
	}));
}

const newData = changeArrayData(data);
console.log(newData);

function generateTable() {

	var table = document.querySelector('table');
	var thead = document.querySelector('thead tr');
	var tbody = document.querySelector('tbody');

	let columns = Object.keys(newData[0]);
	console.log(columns);

	columns.forEach(key => {
		let newHeading = document.createElement('th');
		newHeading.textContent = key;
		thead.appendChild(newHeading);
	});
	
	newData.forEach(obj => {
		tr = document.createElement('tr');
		tbody.appendChild(tr);

		for(key in obj) {
			td = document.createElement('td');
			td.textContent = obj[key];
			tr.appendChild(td);
		}
		
	});
}

generateTable()

Vrijdag 20-10-2023 - SVG's

Vandaag kregen we introductie tot het maken van een eigen SVG. Nooit aan gedacht dat dit natuurlijk ook puur met code gedaan kan worden en geen ondersteunende factor van tools zoals Photoshop of Illustrator nodig heeft. In deze les heb ik geleerd wat een SVG is in de code en hoe de structuur hierachter werkt.

Eindresultaat SVG opdracht:

https://codepen.io/Martijn-Kooijman/pen/eYxLXvm