On Wednesday, I took the time to introduce myself to the java-based data visualization library d3.js. After talking to some data visualization engineers, it turned out that htis will be my main tool for what I intend to do. Based on that, I consider it as crucial to get to know my tools I will use for this project as soon as possible. I have been working with Processing and basic JavaScript, when it was necessary while coding with HTML and CSS, but I never found the time to really dig into this.

Since I also want to use the time of this seminar to start a profound research, not only theoretical, but also use the opportunity to do this practically, I set myself the goal for this week to get some basic understanding of d3.js and eventually come up with a rough pretotype of the digital visualization. This pretotype should serve mainly to get familiar with the syntax, a few of the used methods and functions,a s well as trying some tutorials.

After building the spatial pretotype and thus, redefining my research question, which is now fousing more on the question of enhancing the perception and understanding of a data set through a spatial component, I also focused more on the problem of researchers to show sequentiality. Since this problem sounds like it has a huge pontential in terms of spatial installation, I now decided to go in this direction. To do so, I turned away from the geo collocation data set and towards a data set, which deals with birth reports.It is the essence of the analysis of 14.000 birth reports found online. What Noah Bubenhofer did so far is creating a digital 3d sphere, in which he arranged the statements according to their occurance within the history (https://www.bubenhofer.com/sprechtakel/2017/02/19/die-serielle-singularitaet-vierzehntausend-geburtsgeschichten/). What strikes the viewer is the way of talking about a birth. Although it is a very personal moment, women (and also men) tend to use the same words and even constellations of sentences. For instance, over the half of the histories begin with the factual information such as the calculated due date of the baby, the time and date. If you go one step further now, you can compare all those short stories and visualize them based on frequency of similar sentences. What you get from that is a highly psychological and sensitive image of becoming mothers. This could help to learn more about their needs and feelings in the moment of birth. For that purpose, it is extremely important to be able to perceive and understand the whole process of a birth in every single phase. This can only happen through sequentiality, which is at the moment hard to depict in an understandable way.

‍

PRACTICAL WORK

My first goal for this day was to recreate the visualization of Noah Bubenhofer in a very crucial way in order to get the data set to know, and, connected with wih the introductory phase mentioned above, start to develop a routine for working with data, especially CSV- or JSON files.

The dat set contains several snippets of occuring sentences, a value for the frequency in the texts, several ID's, an analysis of the word types, and so on. The first visual result was a basic visualization of the data type clusterGroup, since it provided the best numeric values to start with. What you can see here is a visualization of the value in the coordinate system of the browser and the respective numeric value to it. The lower the y-value the more on top it is placed and the lower the x-value the more left it is placed.

CODE PRETOTYPE #01

//loading data from csv file and display it in console for debugging and checking
d3.csv("geburtsberichte_ngrams.csv", function(data) {
for (var i = 0; i < data.length; i++) {
}

//setting size of svg
var width = 1920;
var height = 1080;

//creating color value based on numbers of clusterGroup
// get min and max of data
var colorDomainMin = d3.min(data, function(d){
return d.clusterGroups;
});

var colorDomainMax = d3.max(data, function(d){
return d.clusterGroups;
});

// reading the min and max values from clusterGroup into console
console.log(d3.min(data, function(d) { return "min: " + d.clusterGroup; }));
console.log(d3.max(data, function(d) { return "max: " + d.clusterGroup; }));
var fill = d3.scaleLinear()
.domain(d3.min(data, function(d) {
return "min: " + d.clusterGroup
}),
d3.max(data, function(d) {
return "max: " + d.clusterGroup })
)

// .interpolate(d3.interpolateHcl)
.range(["green", "red"]);

// create svg and drawing it onto body DOM
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);

//group all grasped elemets into var g and assign "data" to it
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g");

// draw a circle at the position of data set for x and y
g.append("circle")
.attr("cx", function(d, i) {
return 25 + i * d.clusterGroup;
})
.attr("cy", function(d, i) {
return d.clusterGroup + 10
})
.attr("r", 10)
.attr("fill", function(d, i){
return fill[i];
})

// append text from data set
g.append("text")
.attr("x", function(d, i) {
return 22 + i * d.clusterGroup;
})
.attr("y", function(d, i) {
return d.clusterGroup + 13;
})
.attr("fill", "white")
.attr("font-size", "10")
.attr("font-family", "Helvetica")
.text(function(d) {
return d.clusterGroup;
})
});

‍

Based on that, I managed pretty fast to size the points according to their frequency in the texts and to use the example sentences as a label to these points.

‍

CODE IMPROVEMENTS PRETOTYPE #02

// use frequency to define size of the circles
.attr("r", function(d, i){
return d.frequency;
})

//changing fill color to red and label for points to be the example text
.attr("fill", "red")
.attr("font-size", "10")
.attr("font-family", "Helvetica")
.text(function(d) {
return d.example;