Split spotifyvis code into different apps (#47)
Server is able to start, but none of the apps are linked together yet.
This commit is contained in:
@@ -1,8 +0,0 @@
|
||||
body {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
h1,p {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
/**
|
||||
* Draws the artist count graph as a bubble chart, and appends it the a designated parent element
|
||||
* @param artistData: the artist counts data as an array of objects, of the format {'name': artist name, 'num_songs': 50}
|
||||
* @param parentElem: the DOM element to append the artist graph to (as a string)
|
||||
*/
|
||||
function drawArtistGraph(artistData, parentElem) {
|
||||
let margin = {top: 20, right: 30, bottom: 30, left: 40};
|
||||
let width = 960 - margin.right - margin.left;
|
||||
let height = 540 - margin.top - margin.bottom;
|
||||
|
||||
let color = d3.scaleOrdinal(d3.schemeCategory10);
|
||||
let bubble = d3.pack(artistData)
|
||||
.size([width, height])
|
||||
.padding(1.5);
|
||||
|
||||
let svg = d3.select(parentElem)
|
||||
.append("svg")
|
||||
.attr("width", width + margin.right + margin.left)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.attr("class", "bubble");
|
||||
|
||||
let nodes = d3.hierarchy(artistData)
|
||||
.sum(function(d) { return d.num_songs; });
|
||||
|
||||
let node = svg.selectAll(".node")
|
||||
.data(bubble(nodes).descendants())
|
||||
.enter()
|
||||
.filter(function(d) {
|
||||
return !d.children;
|
||||
})
|
||||
.append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) {
|
||||
return "translate(" + d.x + "," + d.y + ")";
|
||||
});
|
||||
|
||||
node.append("title")
|
||||
.text(function(d) {
|
||||
return `${d.name}: ${d.num_songs}`;
|
||||
});
|
||||
|
||||
node.append("circle")
|
||||
.attr("r", function(d) {
|
||||
return d.r;
|
||||
})
|
||||
.style("fill", function(d,i) {
|
||||
return color(i);
|
||||
});
|
||||
|
||||
// artist name text
|
||||
node.append("text")
|
||||
.attr("dy", ".2em")
|
||||
.style("text-anchor", "middle")
|
||||
.text(function(d) {
|
||||
return d.data.name.substring(0, d.r / 3);
|
||||
})
|
||||
.attr("font-family", "sans-serif")
|
||||
.attr("font-size", function(d){
|
||||
return d.r/5;
|
||||
})
|
||||
.attr("fill", "white");
|
||||
|
||||
// artist song count text
|
||||
node.append("text")
|
||||
.attr("dy", "1.3em")
|
||||
.style("text-anchor", "middle")
|
||||
.text(function(d) {
|
||||
return d.data.num_songs;
|
||||
})
|
||||
.attr("font-family", "Gill Sans", "Gill Sans MT")
|
||||
.attr("font-size", function(d){
|
||||
return d.r/5;
|
||||
})
|
||||
.attr("fill", "white");
|
||||
|
||||
d3.select(self.frameElement)
|
||||
.style("height", height + "px");
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -1,137 +0,0 @@
|
||||
function create_genre_graph(data) {
|
||||
// convert strings to nums {{{ //
|
||||
|
||||
data.forEach(function(d) {
|
||||
d.num_songs = +d.num_songs;
|
||||
console.log(d.genre, d.num_songs);
|
||||
var artist_names = Object.keys(d.artists);
|
||||
artist_names.forEach(function(e) {
|
||||
d.artists[e] = +d.artists[e];
|
||||
console.log(e, d.artists[e]);
|
||||
//console.log(e, d.artists[e], d.artists[e] + 1);
|
||||
});
|
||||
});
|
||||
|
||||
// }}} convert strings to nums //
|
||||
|
||||
// domains {{{ //
|
||||
|
||||
data.sort(function(a, b) {
|
||||
return b.num_songs - a.num_songs;
|
||||
});
|
||||
x.domain(data.map(function(d) {
|
||||
return d.genre;
|
||||
}));
|
||||
//y.domain([0, d3.max(data, function(d) { return d.num_songs; }) * 1.25]).nice();
|
||||
y.domain([0, d3.max(data, function(d) {
|
||||
return d.num_songs;
|
||||
})]).nice();
|
||||
|
||||
// }}} domains //
|
||||
|
||||
// setup bar colors {{{ //
|
||||
|
||||
var max_artists = d3.max(data, function(d) {
|
||||
return Object.keys(d.artists).length;
|
||||
});
|
||||
var z = d3.scaleOrdinal().range(randomColor({
|
||||
count: max_artists,
|
||||
luminosity: 'light',
|
||||
}));
|
||||
|
||||
// }}} setup bar colors //
|
||||
|
||||
for (var genre_dict of data) {
|
||||
|
||||
// process artist breakdown {{{ //
|
||||
|
||||
var keys = Object.keys(genre_dict.artists);
|
||||
var stack = d3.stack()
|
||||
//.order(d3.stackOrderAscending)
|
||||
.order(d3.stackOrderDescending)
|
||||
.keys(keys)([genre_dict.artists])
|
||||
//unpack the column
|
||||
.map((d, i) => {
|
||||
return {
|
||||
key: keys[i],
|
||||
data: d[0]
|
||||
}
|
||||
});
|
||||
|
||||
// }}} process artist breakdown //
|
||||
|
||||
// add bars {{{ //
|
||||
|
||||
g.append("g")
|
||||
.selectAll("rect")
|
||||
.data(stack)
|
||||
.enter().append("rect")
|
||||
.attr("x", x(genre_dict.genre))
|
||||
.attr("y", function(d) {
|
||||
return y(d.data[1]);
|
||||
})
|
||||
.attr("height", d => y(d.data[0]) - y(d.data[1]))
|
||||
.attr("width", x.bandwidth())
|
||||
.attr('fill', (d, i) => z(i))
|
||||
.append('title').text(d => d.key + ': ' + (d.data[1] - d.data[0]));
|
||||
|
||||
// }}} add bars //
|
||||
|
||||
// x-axis {{{ //
|
||||
|
||||
g.append("g")
|
||||
.attr("class", "axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(d3.axisBottom(x))
|
||||
.selectAll(".tick text")
|
||||
.call(wrap, x.bandwidth());
|
||||
|
||||
// }}} x-axis //
|
||||
|
||||
// y-axis {{{ //
|
||||
|
||||
g.append("g")
|
||||
.attr("class", "axis")
|
||||
.call(d3.axisLeft(y).ticks(null, "s"))
|
||||
.append("text")
|
||||
.attr("x", 2)
|
||||
.attr("y", y(y.ticks().pop()) + 0.5)
|
||||
.attr("dy", "0.32em")
|
||||
.attr("fill", "#000")
|
||||
.attr("font-weight", "bold")
|
||||
.attr("text-anchor", "start")
|
||||
.text("Songs");
|
||||
|
||||
// }}} y-axis //
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// wrap text {{{ //
|
||||
|
||||
// https://gist.github.com/guypursey/f47d8cd11a8ff24854305505dbbd8c07#file-index-html
|
||||
function wrap(text, width) {
|
||||
text.each(function() {
|
||||
var text = d3.select(this),
|
||||
words = text.text().split(/\s+/).reverse(),
|
||||
word,
|
||||
line = [],
|
||||
lineNumber = 0,
|
||||
lineHeight = 1.1, // ems
|
||||
y = text.attr("y"),
|
||||
dy = parseFloat(text.attr("dy")),
|
||||
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em")
|
||||
while (word = words.pop()) {
|
||||
line.push(word)
|
||||
tspan.text(line.join(" "))
|
||||
if (tspan.node().getComputedTextLength() > width) {
|
||||
line.pop()
|
||||
tspan.text(line.join(" "))
|
||||
line = [word]
|
||||
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", `${++lineNumber * lineHeight + dy}em`).text(word)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// }}} wrap text //
|
||||
@@ -1,42 +0,0 @@
|
||||
document.getElementById("login-btn").addEventListener("click", function() {
|
||||
let httpRequest = new XMLHttpRequest();
|
||||
|
||||
/*
|
||||
* Handler for the response
|
||||
*/
|
||||
httpRequest.onreadystatechange = function() {
|
||||
if (httpRequest.readyState === XMLHttpRequest.DONE) {
|
||||
if (httpRequest.status === 200) {
|
||||
// hide the login button
|
||||
document.getElementById('login').setAttribute("display", "none");
|
||||
|
||||
let responseData = JSON.parse(httpRequest.responseText);
|
||||
let dataList = document.getElementById("data-list");
|
||||
|
||||
|
||||
for (let key in responseData) {
|
||||
let newLi = document.createElement("li");
|
||||
let innerList = document.createElement("ul");
|
||||
|
||||
let dataLabel = document.createElement("li");
|
||||
dataLabel.innerText = key;
|
||||
|
||||
let dataValue = document.createElement("li");
|
||||
dataValue.innerText = responseData[key];
|
||||
|
||||
innerList.appendChild(dataLabel);
|
||||
innerList.appendChild(dataValue);
|
||||
|
||||
newLi.appendChild(innerList);
|
||||
dataList.appendChild(newLi);
|
||||
}
|
||||
} else {
|
||||
alert("There was a problem with the login request, please try again!");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
httpRequest.open('GET', '/login', true);
|
||||
httpRequest.send();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user