Add title to audio feature graphs

Audio feature bar graphs now have titles.
7 years ago · 840152b99e
1 changed files with 29 additions and 4 deletions
--- a/spotifyvis/templates/spotifyvis/user_data.html
+++ b/spotifyvis/templates/spotifyvis/user_data.html
@ -20,6 +20,13 @@
        <script src="{% static "spotifyvis/scripts/user_data.js" %}"></script>
        <script type="text/javascript">

+            /** Queries the backend for audio feature data, draws the bar chart
+             *  illustrating the frequencies of values, and appends the chart to
+             *  <body></body>
+             *
+             *  @param audioFeature: the name of the audio feature
+             *  @return None
+             */
            function drawAudioFeatGraph(audioFeature) {
                let margin = {top: 20, right: 30, bottom: 30, left: 40};
                let width = 720 - margin.left - margin.right,
@ -62,15 +69,16 @@
                    }
                    vScale.domain([0, d3.max(dataSet)]);

-                    let hScale = d3.scaleBand().domain(dataRanges).rangeRound([0, width]).padding(0.4);
+                    let hScale = d3.scaleBand().domain(dataRanges).rangeRound([0, width]).padding(0.5);

                    let xAxis = d3.axisBottom().scale(hScale);
                    let yAxis = d3.axisLeft().scale(vScale);

-                    let featureGraph = d3.select('body')
+                    let featureSVG = d3.select('body')
                        .append('svg').attr('width', width + margin.left + margin.right)
-                        .attr('height', height + margin.top + margin.bottom)
-                        .append("g")
+                        .attr('height', height + margin.top + margin.bottom);
+
+                    let featureGraph = featureSVG.append("g")
                        .attr("transform", `translate(${margin.left}, ${margin.top})`)
                        .attr("fill", "teal");

@ -93,9 +101,26 @@
                    featureGraph.append('g')
                        .attr('class', 'axis')
                        .call(yAxis);
+
+                    featureSVG.append("text")
+                        .attr('x', (width / 2))
+                        .attr('y', (margin.top / 2))
+                        .attr('text-anchor', 'middle')
+                        .style('font-size', '14px')
+                        .text(`${capFeatureStr(audioFeature)} distribution`);
+
                });
            }

+            /**
+             * Returns the audio feature name string with the first letter capitalized
+             * @param audioFeature: the name of the audio feature
+             * @returns the audio feature name string with the first letter capitalized
+             */
+            function capFeatureStr(audioFeature) {
+                return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1);
+            }
+
            drawAudioFeatGraph("instrumentalness");
            drawAudioFeatGraph("valence");
            drawAudioFeatGraph("energy");