journal
The day started with an introduction to the course about D3.js and what it actually manipulates, SVG. And for that reason Vincent gave a talk about SVG, what it is, what the benefits are, and that we should have some basic understanding of it.
For that he asked us to make three assignments.
- code your own SVG.
- Style your own SVG.
- Think about what you want to create with your own dataset and sketch it.
As per recommendation of the guy from frontmen I set the app up as a react application but with all the extra's from next.js. I will later add a page or a section why I am using next.js above react.
After the class I started setting up the project to continue the assignment of making an SVG, playing around with it and creating an animation with it. The first thing I created was a face from a game called Minecraft. It is a WIP.
Today before I started working with the actual content of the course, I was playing around with nextjs / react/ static external data and rendering it on a page. eventually I got it working with all the linting and extra fixings to render external images. see 91aa03f
With the tutorial from Samuel Gratzl I started my journey with D3.js. I first started the basic stuff such as document selection, adding styling, and elements.
for (let index = 0; index < 3; index++) {
let coords = Math.round(Math.random()*100)
svg.append('circle')
.attr("r", 10)
.attr("cx", coords*2)
.attr("cy", coords)
.style("stroke-width", 2)
.style("stroke", "black")
.style("fill", '#ffcc00')
}I began to grasp the concept of how D3 works, I have to approach it like just regular old DOM manipulation but with some cute syntax and add individual attributes.
Vandaag heeb ik twee lessen gevolgd, een basis van scales en het maken van de grafieken en vervolgens ook een les van suwi over build tools, specifiek gezien webpack. beide waren in mijn opinie erg waardevol ondanks dat ik er bijvoorbeeld over heb gelezen.
De build tools les was voor mij vooral van waarde omdat weebpack altijd een grote rots was.
Uiteindelijk aan het einde van de dag heb ik ook na wat debuggen eigen data in de bar chart kunnen tekenen. mijn vervolg stap hierop zal dus de restante elementen genereren zoals X en Y axis, titels, een legenda, scales toepassen zodat de rectangles een waarde weergeven en dan staat de basis.
Mijn vervolg stap daarop zou dan het interactief maken van deze data en verdere visualisaties experimenteren.
Als extra zou ik willen kijken hoe ik de les van Suwi kan implementeren in de statische variant en in mijn react variant.
Today I had a horrible morning which kind of slapped me in the face to do not much. I helped Kiara debugging the weird things that are happening when she is rewriting her code from vizhub to a local instance...
The issue? The way the SVG is created, the variables use a defined height and width from an SVG that is made in the HTML rather being created with d3.js. after that I was like "Ugh never again".
Besides the hellish debugging I refactored my code in separate functions that each do a part in the SVG.
I decided to continue further at home, truth be told, I started in the evening, went through the documentation and started refactoring code as I learned the library more. my code is now async'ed, shortened, commented (like a spaghetti ball) but it is 100% understood.
Short code 1 - reusability 0.
(async () => {
d3.select('body')
.append('svg')
.attr('height', '80vh')
.attr('width', '100%')
.style('border', '1px solid black')
.append('g')
.attr('transform', 'translate(20, 20)')
.selectAll('rect')
.data(await retrieveData())
.join(
(enter) => {
const rectangle = enter.append('rect')
.attr('x', 0)
rectangle.append('title')
return rectangle
}
)
.attr('height', dimensions.barHeight)
.attr('width', d => d.rating * 5)
.attr('y', (d,i) => i*(dimensions.barHeight+5))
.attr('class', 'bars')
.select('title').text(d => d.rating)
})();I Was playing around with scales and wanting it to be correctly formed. after f****** around I decided to restart.
Commit before I restarted: 1c40124
After redoing all the code for a basic bar chart I also started experimenting with colour and the scales. I got a normal looking scale except it isnt't correct with the values yet. but the colouring was interesting...
//The following code resulted in a christmas looking graph..
const cscale = d3.scaleOrdinal().domain(d3.extent(await dataset, d=> d.rating)).range(['green', 'red']);
After some incredibly dirty editing and googling I found out how to create the Y axis with names and center the ticks with the bar.
The issue I had first is using the right scale. Instead of scaleOrdinal() or scaleLinear() for labels with names I have to use scaleBand(). This creates an SVG with all names staggered ontop of eachother, instead of on two positions.
After that I had a stabbing pain in the heart from the positioning of the ticks in comparison to the bars.
As you might know, this does look like shit 💩. But with some manual labor I can center the label with the bar. But this is bad practice.
