From 73223ac355c55dc48d2ec60f5698c1da4b0a52c2 Mon Sep 17 00:00:00 2001 From: Kevin Mok Date: Sat, 17 Nov 2018 20:47:00 -0500 Subject: [PATCH] Put features graphs into Bootstrap columns d3 ranges based on the column size. --- graphs/static/graphs/css/graphs.css | 9 ++++ .../static/graphs/scripts/audio_feat_graph.js | 14 ++++-- graphs/templates/graphs/features_graphs.html | 43 +++++++++++++++---- 3 files changed, 54 insertions(+), 12 deletions(-) create mode 100644 graphs/static/graphs/css/graphs.css 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 + + + + +
+
+
+
+
+
+ >
+
+
+
+
+
+
+
+