For our Javascript Libraries homework we were tasked with creating a project that uses JQuery and a second JS Library. For my homework, I'm going to do a data visualization of my schedule this semester. More specifically, the amount of time I devote to each of my tasks each day. To do so I'm going to use the D3.js library and, as mentioned, JQuery.
I'm taking an elective in data visualizations, so I wanted to explore D3's capabilities further, however it was somewhat difficult for me to define the appropriate scope for this project. I also had a bit of trouble figuring out what are the appropriate scenarios are for using d3 over JQuery and vice versa.
I decided to create a bubble chart based on one of the examples posted on the D3 website.
This example uses a .CVS file, so I had to create the database. As I mentioned before, I wanted to visualize my weekly schedule this semester, so the first step I had to take was to created the database I'd use. This is the database I created:
id,activity,amount,amount1 Monday,sleep,12,6 Monday,work,16,8 Monday,leisureOrTransit,8,4 Monday,homework,12,6 Monday,soccer,0,0 Monday,class,0,0 Monday,party,0,0 Tuesday,sleep,12,6 Tuesday,work,0,0 Tuesday,leisureOrTransit,8,4 Tuesday,homework,18,9 Tuesday,soccer,0,0 Tuesday,class,10,5 Tuesday,party,0,0 Wednesday,sleep,12,6 Wednesday,work,16,8 Wednesday,leisureOrTransit,8,4 Wednesday,homework,12,6 Wednesday,soccer,0,0 Wednesday,class,0,0 Wednesday,party,0,0 Thursday,sleep,12,6 Thursday,work,0,0 Thursday,leisureOrTransit,8,4 Thursday,homework,10,5 Thursday,soccer,0,0 Thursday,class,18,9 Thursday,party,0,0 Friday,sleep,22,11 Friday,work,0,0 Friday,leisureOrTransit,10,5 Friday,homework,8,4 Friday,soccer,0,0 Friday,class,0,0 Friday,party,8,4 Saturday,sleep,12,6 Saturday,work,0,0 Saturday,leisureOrTransit,8,4 Saturday,homework,18,9 Saturday,soccer,0,0 Saturday,class,10,5 Saturday,party,0,0 Sunday,sleep,18,9 Sunday,work,0,0 Sunday,leisureOrTransit,10,5 Sunday,homework,16,8 Sunday,soccer,4,2 Sunday,class,0,0 Sunday,party,0,0 Sunday,,,
With the database now in the correct format for D3, I went on to work on the code. I followed this tutorial, to help me streamline the basic structure. With the main code in place, I made some edits to fit the code with my data and add some design to the website. As I was short on time to finish my project, I decided to use JQuery as the legend for the bubble chart, so that the viewer can understand what the colors of the circles are. This what the final project looks like:
As you can see each color represents a day of the week, and each bubble represents one activity I do that week. The size of the circles represents the amount of time I have to invest to each activity that day.
This is the final Javascript code:
// Credit to sources:
// Create a jQuery Slide Menu (Side Pulling Content): https://www.youtube.com/watch?v=hxND35w0L2I
// This code is inspired in the work and tutorial of Jonathan Soma: https://www.youtube.com/watch?v=lPr60pexvEM
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
(function() {
var width = 1000,
height = 800;
var svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(0,0)")
var radiusScale = d3.scaleSqrt().domain([0, 22]).range([10,70])
var simulation = d3.forceSimulation()
.force("x", d3.forceX(width / 2).strength(0.085))
.force("y", d3.forceY(height / 2).strength(0.05))
.force("collide", d3.forceCollide(function(d){
return radiusScale(d.amount) + 2;
}))
var color = d3.scaleOrdinal(d3.schemeCategory20c);
d3.queue()
.defer(d3.csv, "schedule2.csv")
.await(ready)
function ready (error, datapoints){
var circles = svg.selectAll(".artist")
.attr("id", function(d) {
return d.id;
})
.data(datapoints)
.enter().append("circle")
.attr("class", "artist")
.attr("r", function(d) {
return radiusScale(d.amount)
})
.attr("fill", function(d) {
return color(d.id);
})
.on('click', function(d) {
console.log(d)
})
simulation.nodes(datapoints)
.on('tick', ticked)
function ticked() {
circles
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
}
}
})();