Kevin-Mok/spotify-lib-vis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'chris/wip' into vis-page

Browse Source
This commit is contained in:
Kevin Mok
2018-11-17 21:34:14 -05:00
parent 73223ac355 cc071d621c
commit a7e4c151cf
10 changed files with 249 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
graphs/templates/graphs/features_graphs.html
View File

@@ -43,22 +43,38 @@
<script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script>
<script type="text/javascript">
let userSecret = "{{ user_secret }}";
drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0],
'acoustic-column', userSecret);
drawAudioFeatGraph("danceability", [0, 0.25, 0.5, 0.75, 1.0],
'dance-column', userSecret);
drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0],
'energy-column', userSecret);
drawAudioFeatGraph("instrumentalness", [0, 0.25, 0.5, 0.75, 1.0],
'instr-column', userSecret);
drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0],
'loud-column', userSecret);
drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0],
'speech-column', userSecret);
drawAudioFeatGraph("tempo", [0, 40, 80, 120, 160, 200],
'tempo-column', userSecret);
drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0],
'valence-column', userSecret);
let graphParams = {
"acousticness": {
intervalEndPoints: {begin: 0, end: 1.0, step: 0.20},
colId: 'acoustic-column'},
"danceability": {
intervalEndPoints: {begin: 0, end: 1.0, step: 0.20},
colId: 'dance-column'},
"energy": {
intervalEndPoints: {begin: 0, end: 1.0, step: 0.20},
colId: 'energy-column'},
"instrumentalness": {
intervalEndPoints: {begin: 0, end: 1.0, step: 0.20},
colId: 'instr-column'},
"loudness": {
intervalEndPoints: {begin: -60, end: 0, step: 12},
colId: 'loud-column'},
"speechiness": {
intervalEndPoints: {begin: 0, end: 1.0, step: 0.20},
colId: 'speech-column'},
"tempo": {
intervalEndPoints: {begin: 0, end: 200, step: 40},
colId: 'tempo-column'},
"valence": {
intervalEndPoints: {begin: 0, end: 1.0, step: 0.20},
colId: 'valence-column'},
};
for(var featureKey in graphParams) {
let params = graphParams[featureKey];
drawAudioFeatGraph(featureKey, params.intervalEndPoints,
params.colId, userSecret);
}
</script>
</body>
</html>

11
graphs/templates/graphs/genre_graph.html
View File

@@ -13,7 +13,7 @@
<title>Test DB Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">
{# <link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">#}
</head>
<!-- }}} header -->
@@ -34,16 +34,17 @@
perserveAspectRatio="xMinYMid">
</svg>
<script>
var svg = d3.select("svg"),
let svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
let x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.paddingInner(0.1)
.paddingOuter(0.7)
.align(0.1);
var y = d3.scaleLinear()
let y = d3.scaleLinear()
.rangeRound([height, 0]);
d3.json("{% url "api:get_genre_data" user_secret %}").then(create_genre_graph);