diff --git a/graphs/static/graphs/css/graphs.css b/graphs/static/graphs/css/graphs.css new file mode 100644 index 0000000..61a2cc4 --- /dev/null +++ b/graphs/static/graphs/css/graphs.css @@ -0,0 +1,9 @@ +.chart { +height: 16rem; +position: relative; +} + +.chart > svg { +width: 100%; +height: 100%; +} diff --git a/graphs/static/graphs/scripts/audio_feat_graph.js b/graphs/static/graphs/scripts/audio_feat_graph.js index 1fab293..10d2f2d 100644 --- a/graphs/static/graphs/scripts/audio_feat_graph.js +++ b/graphs/static/graphs/scripts/audio_feat_graph.js @@ -24,7 +24,9 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec featureData[key] = 0; } // define the vertical scaling function - let vScale = d3.scaleLinear().range([height, 0]); + // let vScale = d3.scaleLinear().range([height, 0]); + let padding = 0.5; + let vScale = d3.scaleLinear().range([100 - 2*padding, padding]); d3.json(`/api/audio_features/${audioFeature}/${userSecret}`) .then(function(response) { @@ -52,12 +54,16 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec } vScale.domain([0, d3.max(dataSet)]).nice(); - let hScale = d3.scaleBand().domain(dataRanges).rangeRound([0, width]).padding(0.5); + let hScale = d3.scaleBand() + .domain(dataRanges) + // .rangeRound([0, width]) + .rangeRound([padding, 100 - 2*padding]) + .padding(0.5); let xAxis = d3.axisBottom().scale(hScale); let yAxis = d3.axisLeft().scale(vScale); - let featureSVG = d3.select(parentElem) + let featureSVG = d3.select('#' + parentElem) .append('svg').attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); @@ -102,4 +108,4 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec */ function capFeatureStr(audioFeature) { return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1); -} \ No newline at end of file +} diff --git a/graphs/templates/graphs/features_graphs.html b/graphs/templates/graphs/features_graphs.html index ea01793..ffe6717 100644 --- a/graphs/templates/graphs/features_graphs.html +++ b/graphs/templates/graphs/features_graphs.html @@ -10,28 +10,55 @@ User Spotify Data + + + + +
+
+
+
+
+
+ >
+
+
+
+
+
+
+
+