Curran Kelleher Course
https://vizhub.com/SimonPlanje/efa5c2b41280402f8678ddd19861f669
Zo wordt d3 aangeroepen in de html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Lets make a face :)</title>
<script src="https://unpkg.com/d3@6.2.0/dist/d3.min.js"></script>
//Latest version of d3 ^^
</head>
<body>
</body>
</html>circle.attr("r", height / 3);
//^^short for attribute
//r stands for radius wich is the attribute (first argument)
//value that gets assigned to that radius
circle.attr("cx", width / 2);
//width is 960, so 960 / 2 is in the middle
circle.attr("cy", height / 2);
//height is 500, so 500 / 2 is in the middle
//^^dit kan ook korter met "method chaining"
circle
.attr("r", height / 3)
.attr("cx", width / 2)
.attr("cy", height / 2);
//^^ en het kan ook zo (dit is de meest gebruikte d3 method)
const circle = svg
.append("circle")
.attr("r", height / 3)
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("fill", "lime")
.attr("stroke", "black");
import { select, arc } from "d3";
const svg = select("svg");
svg.style("background-color", "orange");
const height = +svg.attr("height");
const width = +svg.attr("width");
const g = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const circle = g
.append("circle")
.attr("r", height / 3)
.attr("fill", "lime")
.attr("stroke", "black");
const eyeSpacing = 130;
const eyeYOffset = -40;
const eyeRadius = 50;
const eyebrowWidth = 90;
const eyebrowHeight = 30;
const eyebrowYOffset = -150;
const eyesGroup = g
.append("g")
.attr("transform", `translate(0, ${eyeYOffset})`);
const rightEye = eyesGroup
.append("circle")
.attr("r", eyeRadius)
.attr("cx", -eyeSpacing)
.attr("cy", eyeYOffset);
const leftEye = eyesGroup
.append("circle")
.attr("r", eyeRadius)
.attr("cx", eyeSpacing)
.attr("cy", eyeYOffset);
const leftEyebrow = eyesGroup
.append("rect")
.attr("x", -eyeSpacing - eyebrowWidth / 2)
.attr("y", eyebrowYOffset)
.attr("width", eyebrowWidth)
.attr("height", eyebrowHeight);
const rightEyebrow = eyesGroup
.append("rect")
.attr("x", eyeSpacing - eyebrowWidth / 2)
.attr("y", eyebrowYOffset)
.attr("width", eyebrowWidth)
.attr("height", eyebrowHeight);
const mouth = g.append("path").attr(
"d",
arc()({
innerRadius: 90,
outerRadius: 100,
startAngle: Math.PI / 2,
endAngle: (Math.PI * 3) / 2,
})
);
https://vizhub.com/SimonPlanje/683eb473a3494bb28867dbc1da357df7?edit=files&file=index.js
Key elements of what i have learned:
scaleLinear is een build in functie van d3 die er voor zorgt dat je de domain: de hoogste en laagste waarde van de data, kan omzetten naar een range: de ruimte die er is op het scherm. Zo kan de data worden omgezet naar een representatieve schaal. Dit wordt in het voorbeeld door de volgende code gedaan:
const render = data => {
const xValue = d => d['population'];
//^^ hier wordt de 2e kolom opgehaald: de value
const yValue = d => d.country;
//^^ hier wordt de 1e kolom opgehaald: de property
const margin = { top: 50, right: 40, bottom: 77, left: 180 };
//^^ hier wordt de margin bepaald van die om de barchart heen komt
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;Het stukje hierboven met innerWidth en innerHeight wordt ervoor gezorgd dat de barchart niet over de randen van de margin heen gaat. Hij blijft binnen de hoogte en breedte van de barchart zelf door de margin er van af te halen.
Vervolgens wordt hier de linearScale bepaald. Hiervoor kan de innerWidth worden gebruikt van de svg die is bepaald in de html, hierdoor neemt de barchart altijd de hele svg in beslag. Mooi dynamisch dus :) De x en y value worden gebruikt om de waardes in te laden uit de data. Deze zou je dus ook om de barchart verticaal te krijgen.
const xScale = scaleLinear()
.domain([0, max(data, xValue)])
.range([0, innerWidth]);
const yScale = scaleBand()
.domain(data.map(yValue))
.range([0, innerHeight])
.padding(0.2);