3f:null 40:["$","title",null,{"children":"Spotify Top Charts | itsmeri | Observable"}] 46:T1ed4,// create RBW Chart (second mode) function addRBWchart(d) { /*----------------------Params-------------------------------*/ let step = 5, heightKoef = 2.7, margin = { top: 70, bottom: 24, left: width / 3, right: 40 }, width_chart = 600, height = 700, max = 100, // max value of all parameters delta = 20, // height of rectangle transition param = "", // default paramerter -> 'danceability' duration = 150, delay = duration * 0.05; opt.length > 1 ? (param = opt[opt.length - 1]) : (param = opt[0]); /*----------------------SVG-------------------------------*/ var svg = d3 .select('svg') .attr('class', 'rbw-svg') .append('g') .attr('class', 'mySvgChart') .attr('width', width_chart) .attr('height', height) .attr('class', 'rbw-svg') .attr('class', 'g-top') .attr('height', height) .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); //remove PlotlyChart d3.select('.polar').remove(); d3.select('.modebar-container').remove(); /*----------------------Filters-------------------------------*/ function setFilter(selection, id) { var defs = selection.append('defs'); var filter = defs.append('filter').attr('id', id); filter .append('feGaussianBlur') .attr('stdDeviation', 2) .attr('result', 'coloredBlur'); var feMerge = filter.append('feMerge'); //add glow-blur filter to bottom part of the chart id == 'glow_blur' ? feMerge.append('feMergeNode').attr('in', 'coloredBlur') : ""; feMerge.append('feMergeNode').attr('in', 'SourceGraphic'); } setFilter(svg, 'glow'); /*----------------------AXIS-------------------------------*/ var x = d3 .scaleBand() .domain( dataArraySongs.map(function(d) { return d.title; }) ) .range([0, width_chart]) .padding(.01); var y = d3 .scaleBand() .domain(d3.range(step, max + delta, step)) .range([height / heightKoef, 0]) .padding(.1); svg .selectAll(null) .data(y.domain()) .enter() .append('text') .attr('x', -2) .style('text-anchor', 'end') .attr('y', function(d) { return +y(d) + 3; }) .style('fill', '#e9e9e9') .style('font-size', '10px'); /*----------------------Columns-------------------------------*/ var cols = svg .selectAll(null) .data(dataArraySongs) .enter() .append('g') .attr('class', "cols") .attr('transform', function(d) { return 'translate(' + x(d.title) / 3 + ',' + 0 + ')'; }) .each(buildBars); // create a column /*----------------------Text-Label-------------------------------*/ //get width of a column (rectangle) let colWidth = ""; if (cols) { if (cols._groups[0]) { if (cols._groups[0][0]) { if (cols._groups[0][0].childNodes[0]) { colWidth = cols._groups[0][0].childNodes[0].width.animVal.valueAsString; } } } colWidth ? "" : (colWidth = 0); cols .append('text') .style('font-size', '10px') .style('fill', 'black') .text((d, i) => d[param]) .attr('class', 'rbw-text') .attr( 'transform', // set text on the middle of column 'translate(' + (colWidth - 15) / 2 + ',' + height / heightKoef + ')' ) .attr('opacity', 0); } /*----------------------Listeners-------------------------------*/ // mouse events function addMouseListeners() { d3.selectAll('.rbw-rect') .on('mouseenter', function(d) { // RBW top part animation -> up d3.selectAll('.up') .transition() .duration(duration) .delay((d, i) => Math.abs(i) * delay) .attr('transform', 'translate(0, ' + -delta + ')') .ease(d3.easeBounce); // RBW bottom part animation -> down d3.selectAll('.down') .transition() .duration(duration) .delay((d, i) => Math.abs(i) * delay) .attr('transform', 'translate(0, ' + delta + ')') .ease(d3.easeBounce); // RBW text opacity animation -> from 0 to 1 d3.selectAll('.rbw-text') .transition() .duration(duration) .delay((d, i) => Math.abs(i) * delay) .attr('opacity', 1); }) .on('mouseleave', function() { // RBW top part animation -> down d3.selectAll('.up') .transition() .duration(duration) .delay((d, i) => Math.abs(i) * delay) .attr('transform', 'translate(0, 0)'); // RBW bottom part animation -> up d3.selectAll(`.down`) .transition() .duration(duration) .delay((d, i) => Math.abs(i) * delay) .attr('transform', 'translate(0, 0)'); // RBW text opacity animation -> from 1 to 0 d3.selectAll('.rbw-text') .transition() .duration(duration) .delay((d, i) => Math.abs(i) * delay) .attr('opacity', 0); }); } // create RBW Chart columns with rectangles function buildBars(d, i) { let this_param = d[param]; let blockData = d3.range(step, +d[param] + step, step); let varColor = getTraceColor(i); d3.select(this) .selectAll(null) .data(blockData) .enter() .append('rect') .attr('class', 'rbw-rect up') .attr('width', x.bandwidth() / 4) .attr('height', function(d, i) { if ( // if this is the last rectangle of a column and this value is smaller than step value (default 5) this_param < blockData[blockData.length - 1] && i == blockData.length - 1 ) { //calculate new height let dif = blockData[blockData.length - 1] - this_param; d3.select(this).classed('endCol', true); return (y.bandwidth() / step) * (step - dif); } return y.bandwidth(); }) .attr('x', 0) .attr('y', function(d, i) { if ( //if this is the last rectangle of a column and this value is smaller than step value (default 5) this_param < blockData[blockData.length - 1] && i == blockData.length - 1 ) { //calculate new y coordinate let dif = blockData[blockData.length - 1] - this_param; let hn = y(d) - y.bandwidth() / 2; return hn + (y.bandwidth() / step) * dif; } return y(d) - y.bandwidth() / 2; }) .attr('rx', 2) .attr('ry', 2) .style('fill', function(d) { return varColor; }) .style('filter', 'url(#glow)'); } /*---------------------- Clone Chart-------------------------------*/ setTimeout(function() { // clone a chart let mirror = d3.select('.g-top').clone('.g-top'); // add mirror background let mirrorBackgr = d3 .select('.rbw-svg') .append('rect') .attr('x', 0) .attr('y', height / 2 - margin.bottom) .attr('width', width) .attr('height', height / 2 + margin.bottom) .attr('class', 'mirrorBackground'); setFilter(mirror, 'glow_blur'); // reverse columns let rect_h = 0, rect_margin = 500; mirror .selectAll('.rbw-rect') .attr('y', function() { // if last rect of column if (d3.select(this).classed('endCol')) { return ( rect_margin - d3.select(this).attr("y") + rect_h - this.height.baseVal.value ); } // get height of rect rect_h = this.height.baseVal.value; return rect_margin - d3.select(this).attr('y'); }) .attr('transform', 'translate(0,0)') .attr('class', 'rbw-rect down') .style('filter', 'url(#glow_blur)'); // add mouse event listeners to new columns addMouseListeners(); }, 100); return svg; }47:T1c28,// add delete buttons to all traces function addSVGElements() { /*-----------------------Clear-Old-Data--------------------*/ // delete old data on reload d3.selectAll('.delete-button').remove(); d3.selectAll('#legend').remove(); d3.selectAll('.tooltip-box').remove(); /*----------------------Params----------------------------*/ const tooltip = { width: width, height: 50, margin: 13, data: ["Artist", "Genre", "Year"], coords: [20, width / 2.5, width - 50] }; /*-----------------------Update----------------------------*/ function updateChart(x, i) { let newData, title, newSimilarData; // enable input d3.selectAll('input').attr('disabled', null); // update (find similar songs) if (i != -1) { newData = findSimilarSongs(i); title = "Similar Songs: " + dataArraySongs[i].title; // restart } else { newData = getDefaultData(); title = getTitle(); } newSimilarData = createSongArray(newData); const layout = getLayout(title); // delete old data from traces dataSongs.splice(0, dataSongs.length); dataArraySongs.splice(0, dataArraySongs.length); // add new data to traces for (let n of newData) { dataArraySongs.push(n); } // update (find similar songs) if (i != -1) { // redraw PlotlyChart Plotly.react('myDiv', newSimilarData, layout).then(gd => { //disable double click event to isolate one trace gd.on('plotly_legendclick', () => false); }); // restart } else { // create new PlotlyChart Plotly.newPlot('myDiv', newSimilarData, layout).then(gd => { gd.on('plotly_legendclick', () => false); }); } addSVGElements(); // if mode2 -> redraw RBWChart if (r1 != 1) { d3.select('.rbw-svg').html(''); addRBWchart(); } //remove restart button d3.selectAll('.restart').remove(); } setTimeout(function() { /*---------------------------Tooltip----------------------------*/ // add tooltip box let mainbox = d3.selectAll('svg.main-svg'); let tool = mainbox.append('g').attr('class', 'tooltip-box'); let tooltop = tool.append('g'); let rect_title_ttip = tooltop .append('rect') .attr('class', 'tool-top') .attr('x', 0) .attr('y', tooltip.margin * 2); let tooldown = tool.append('g'); let rect_title_down = tooldown .append('rect') .attr('class', 'tool-down') .attr('x', 0) .attr('y', tooltip.margin * 2 + tooltip.height / 2); let title_ttip = tooltop .append('text') .attr('class', 'row-ttip') .text("Title") .attr('y', tooltip.margin * 2 + tooltip.height / 3) .attr('x', tooltip.coords[0]); let data_ttip = tooldown .selectAll('text') .data(tooltip.data) .enter() .append('text') .attr('class', 'info-ttip') .text(function(d) { return d; }) .attr('y', tooltip.height * 1.5 - tooltip.margin / 2) .attr('x', (x, i) => tooltip.coords[i]); tool.classed('hidden', true); /*-------------------------Legend----------------------------*/ // add legend let info = d3.selectAll('.infolayer'); let leg = info.append('g').attr('id', 'legend'); leg .append('path') .attr('d', button_path[0].path) .attr('transform', 'translate(' + width / 1.3 + ',' + height / 1.7 + ')'); leg .append('text') .attr('font-size', '10px') .text(" - delete song from chart") .attr( 'transform', 'translate(' + width / 1.265 + ',' + height / 1.66 + ')' ); leg .append('text') .attr('font-size', "10px") .text("title - show similar songs") .attr('transform', 'translate(' + width / 1.3 + ',' + height / 1.6 + ')'); leg .append('text') .attr('font-size', "10px") .text("double-click to zoom back out") .attr( 'transform', 'translate(' + width / 1.3 + ',' + height / 1.55 + ')' ); /*-------------------------Title-Events---------------------------*/ let elem = "", name = d3.selectAll('.legendtoggle'); elem = d3.selectAll('g.traces'); name .on('click', function(x, i) { // find similar songs updateChart(x, i); }) .on('mouseover', function(x, i) { //show tooltip tool.classed('hidden', false); let song = dataArraySongs[i]; let d = [song['artist'], song['topgenre'], song['year']]; // update tooltip info title_ttip.text(song['title']); rect_title_down.attr('fill', getTraceColor(i)); data_ttip.data(d).text(x => x); }) .on('mouseout', function(x, i) { //hide tooltip tool.classed('hidden', true); }); /*-------------------------Delete-Buttons--------------------------*/ if (elem) { // create delete button elem .append('path') .attr('class', 'delete-button') .attr('d', button_path[0].path); elem .append('rect') .attr('class', 'bground') .on('click', function() { // get title of selected song let selectedSong = this.closest('.traces') ? this.closest('.traces').querySelector('.legendtext') ? this.closest('.traces').querySelector('.legendtext').innerHTML : 0 : 0; let allTraces = document.querySelectorAll('.legendtext'), tracesToArr = Array.from(allTraces), mySongsArr = tracesToArr.map(x => x.innerHTML), // find and delete selected song in array match = mySongsArr.map(function(x, i) { if (x.includes(selectedSong)) { // delete trace from chart Plotly.deleteTraces('myDiv', i); dataArraySongs.splice(i, 1); if (r1 != 1) { // redraw RBWChart d3.select('.rbw-svg').html(''); addRBWchart(); } // chart is empty if (allTraces.length <= 1 || allTraces.length == undefined) { // clear chart let myDiv = d3.selectAll('#myDiv'); myDiv.html(''); // clear search table data d3.selectAll('#myList').html(''); d3.select('#msg').html(''); // disable all input fields d3.selectAll('input').attr('disabled', 'true'); // show message myDiv .append('text') .attr('class', 'restart') .text("Chart is empty! "); // create a restart button myDiv .append('button') .attr('class', 'restart') .text('restart') .on('click', function() { // restart chart with a default data updateChart(-1, -1); }); } } }); }); } }, 100); }48:Ted5,{ /*------------------Search-------------------------*/ if (search_res) { // max number of songs var max_traces = 15; let list = d3.select('#myList'); // clear old table on reload list.html(""); let msg = d3.select('#msg'), msgString = ""; if (search_res.length > 0) { /*------------------Table-------------------------*/ // create table of search results let table = list.select('table'), tablebody; //if table not exists if (table.empty()) { table = list.append('table').attr('width', width); const header = table.append('thead').append('tr'); header .selectAll('th') .data(["Title", "Artist", "Genre", "Year"]) .enter() .append("th") .attr('class', 'row-header') .text(function(d) { return d; }); tablebody = table.append('tbody'); } //if table exists else { tablebody = table.select('tbody'); } /*------------------Table-Rows-------------------------*/ // add table rows var rows = tablebody.selectAll('tr').data(search_res); rows .enter() .append('tr') .attr('class', 'row-table') .on('click', function(s) { let allTraces = document.querySelectorAll('.traces'); if (allTraces) { if (allTraces.length < max_traces) { if (!dataArraySongs.includes(s)) { // add new song to chart let i = allTraces.length; dataArraySongs.push(s); // create new song object let newSong = createNewSongObjekt(s, i); // add new trace to PlotlyChart Plotly.addTraces('myDiv', newSong); if (r1 != 1) { // if mode2 ->redraw RBWChart d3.select('.rbw-svg').html(''); addRBWchart(); } // update title let update = { title: getTitle() }; Plotly.relayout('myDiv', update); addSVGElements(); // show success message msgString = "+ " + s.title; msg.attr('class', 'green'); } else { // show error message msgString = s.title + " has already been added!"; msg.attr('class', 'red'); } } else { // show max_length error message msgString = "Too many songs! Please delete any song from the chart!"; msg.attr('class', 'red'); } } msg.html('').text(msgString); }) // append new data into table .selectAll('td') .data(function(d) { return [d['title'], d['artist'], d['topgenre'], d['year']]; }) .enter() .append('td') .text(function(d) { return d; }); // remove rows on exit rows.exit().remove(); /*------------------Table-Cells------------------------*/ var cells = rows .selectAll('td') .data(function(d) { return [d['title'], d['artist'], d['topgenre'], d['year']]; }) .text(function(d) { return d; }); cells .enter() .append('td') .text(function(d) { return d; }); // remove cells on exit cells.exit().remove(); } else { d3.select('#myList').text("Nothing was found"); d3.select('#msg').html(''); } } else { // search input is empty d3.select('#myList').html(""); d3.select('#msg').html(''); } return ""; }49:Tb8b,html``4a:T570,options = [ { name: "nrgy", title: "Energy", description: "The energy of a song represents a perceptual measure of intensity and activity. Typically, energetic tracks feel fast, loud, and noisy." }, { name: "dnce", title: "Danceability", description: "The higher the value, the easier it is to dance to this song" }, { name: "live", title: "Liveness", description: "The higher the value, the more likely the song is a live recording" }, { name: "val", title: "Valence", description: "Tracks with high valence sound more positive, while tracks with low valence sound more negative" }, { name: "acous", title: "Acousticness", description: "This value describes how acoustic a song is. A score of 1.0 means the song is most likely to be an acoustic one" }, { name: "spch", title: "Speechiness", description: "Speechiness detects the presence of spoken words in a track. If the speechiness of a song is above 0.66, it is probably made of spoken words, a score between 0.33 and 0.66 is a song that may contain both music and words, and a score below 0.33 means the song does not have any speech" }, { name: "pop", title: "Popularity", description: "Tracks with high valence sound more positive, while tracks with low valence sound more negative" } ]4b:T2283,chart = { /*-------------------------------------------------CHART---------------------------------------------*/ const svg = d3.select(DOM.svg(width, boxChartHeight)); //data join with corresponding selection var g = svg .append("g") .selectAll("g") .data(bins) .join("g"); //distribution path (vertical black line) g.append("path") .attr("stroke", "black") .attr("d", d => d3.line()([ [ x(new Date(String(d.x0))), attribute === "BPM" ? yBPM(d.range[1]) : yBoxChart(d.range[1]) ], [ x(new Date(String(d.x0))), attribute === "BPM" ? yBPM(d.range[0]) : yBoxChart(d.range[0]) ] ]) ); //standardized quartile (grey box) g.append("rect") .attr("fill", "#ddd") .attr("opacity", 1) .attr("x", d => x(new Date(String(d.x0))) - boxWidth / 2) .attr("y", d => attribute === "BPM" ? yBPM(d.quartiles[2]) : yBoxChart(d.quartiles[2]) ) .attr("width", boxWidth) .attr("height", d => attribute === "BPM" ? yBPM(d.quartiles[0]) - yBPM(d.quartiles[2]) : yBoxChart(d.quartiles[0]) - yBoxChart(d.quartiles[2]) ); //Median (horizontal black line in grey box) g.append("path") .attr("stroke", "black") .attr("d", d => d3.line()([ [ x(new Date(String(d.x0))) - boxWidth / 2, attribute === "BPM" ? yBPM(d.quartiles[1]) : yBoxChart(d.quartiles[1]) ], [ x(new Date(String(d.x0))) + boxWidth / 2, attribute === "BPM" ? yBPM(d.quartiles[1]) : yBoxChart(d.quartiles[1]) ] ]) ); //single data points (dots/circles) var points = g .append("g") .attr("fill", "currentColor") .attr("fill-opacity", 0.7) .attr("stroke", "none") .selectAll("circle") .data(d => d) .join("circle") .attr("r", radius) .attr('class', 'points') .attr( "cx", d => x(new Date(String(d.year))) + (Math.random() - 0.5) * jitterWidth ) .attr("cy", d => { let param = featureSelectionData.filter(x => x.name == attribute)[0] ? featureSelectionData.filter(x => x.name == attribute)[0].param : ""; return param == 'bpm' ? yBPM(d[param]) : yBoxChart(d[param]); }) //normalsing the "rank" (X-th most popular song) of each datapoint within its year to a value between 0 and 1 to get a corresponding color from the interpolated scheme below. .attr("fill", d => { return colorScheme(getRankInYear(d) / nrOfBinElements[d.year - 2010]); }); //xAxis var xAxisChart = svg.append("g").call(xAxis); //yAxis var yAxisChart; attribute === "BPM" ? (yAxisChart = svg.append("g").call(yAxisBPM)) : (yAxisChart = svg.append("g").call(yAxis)); /*-------------------------------------------ZOOM---------------------------------------------------------*/ //Zoom behaviour and limits svg.call( d3 .zoom() .extent([[0, 0], [width, boxChartHeight]]) .translateExtent([[0, 0], [width, boxChartHeight]]) .scaleExtent([1, 30]) .on("zoom", zoomed) ); //onZoom function function zoomed() { g.attr("transform", d3.event.transform); var newX = d3.event.transform.rescaleX(x); var newY; attribute === "BPM" ? (newY = d3.event.transform.rescaleY(yBPM)) //.call(g => g.select(".domain").remove()) : (newY = d3.event.transform.rescaleY(yBoxChart)); //.call(g => g.select(".domain").remove()); //(xz) // update axes with these new boundaries xAxisChart.call(d3.axisBottom(newX).tickFormat(d3.timeFormat("%Y"))); yAxisChart.call(d3.axisLeft(newY)); } /*--------------------------CORNER TOOLTIP ---------------------------------------*/ const tooltip2 = d3 .select("body") .append("div") .attr("fill", "grey") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "25px") .style("font-weight", "bold") .style("width", width - 300 + "px") .style("height", boxChartHeight - 50 + "px"); //add a box for a "faded" background effect var fadeRect = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width + 120) .attr("height", boxChartHeight + 150) .attr("fill", "lightgrey") .attr("opacity", 0.8) .attr("id", "fadeRec") .attr("visibility", "hidden"); //explanation of meaning of colors let red_circle = svg .append("circle") .attr("id", "startColor") .attr("fill", colorScheme(0)) .attr("r", 15) .attr("cx", 100) .attr("cy", boxChartHeight - 150) .attr("visibility", "hidden"); let blue_circle = svg .append("circle") .attr("id", "endColor") .attr("fill", colorScheme(1)) .attr("r", 15) .attr("cx", 100) .attr("cy", boxChartHeight - 100) .attr("visibility", "hidden"); let red_circle_text = svg .append("text") .attr("id", "startColorText") .attr("fill", "black") .attr("x", 125) .attr("y", boxChartHeight - 143) .attr("visibility", "hidden") .style("font-color", "black") .style("font-size", "25px") .text("= \"hot\" Songs (most popular)"); let blue_circle_text = svg .append("text") .attr("id", "endColorText") .attr("fill", "black") .attr("x", 125) .attr("y", boxChartHeight - 93) .attr("visibility", "hidden") .style("font-color", "black") .style("font-size", "25px") .text("= \"cold\" Songs (less popular)"); //tooltip circle in top right corner. use of ellipse instead of circle, to not use tooltip function below. svg .append("ellipse") .attr("cx", width - 20) .attr("cy", 20) .attr("rx", 20) .attr("ry", 20) .attr("fill", "lightgrey") .attr("stroke", "black") .attr("id", "cornerEllipse") //change color and make tooltip visible .on("mouseover", function() { d3.select(this).attr("fill", ccfc); fadeRect.attr("visibility", "visible"); red_circle.attr("visibility", "visible"); blue_circle.attr("visibility", "visible"); red_circle_text.attr("visibility", "visible"); blue_circle_text.attr("visibility", "visible"); //show "fade"-effect d3.select("#fadeRec").attr("visibility", "visible"); //initiate tooltip for corner ellipse based on the feature selected tooltip2.style("visibility", "visible").html(function() { return featureSelectionData.filter(x => x.name == attribute)[0] ? featureSelectionData.filter(x => x.name == attribute)[0].description : 0; }); }) //update tooltip position based in mouse position .on("mousemove", function() { tooltip2 .style("top", d3.event.pageY + 50 + "px") .style("left", d3.event.pageX - (width - 200) + "px"); }) //reset circle color and hide tooltip as well as "fade"-rectangle .on("mouseout", function() { d3.select(this).attr("fill", "lightgrey"); tooltip2.style("visibility", "hidden"); red_circle.attr("visibility", "hidden"); blue_circle.attr("visibility", "hidden"); red_circle_text.attr("visibility", "hidden"); blue_circle_text.attr("visibility", "hidden"); d3.select("#fadeRec").attr("visibility", "hidden"); }); //add the question mark to circle in corner svg .append("text") .attr("id", "questionmark") .attr("fill", "black") .attr("x", width - 25) .attr("y", 28) .style("font-color", "black") .style("font-size", "25px") .text("?") .on("mouseover", function(d) { d3.select(this).attr("fill", ccfc); d3.select("#fadeRec").attr("visibility", "visible"); red_circle.attr("visibility", "visible"); blue_circle.attr("visibility", "visible"); red_circle_text.attr("visibility", "visible"); blue_circle_text.attr("visibility", "visible"); tooltip2.style("visibility", "visible").html(function() { return featureSelectionData.filter(x => x.name == attribute)[0] ? featureSelectionData.filter(x => x.name == attribute)[0].description : ""; }); }) .on("mousemove", function() { tooltip2 .style("top", d3.event.pageY + 50 + "px") .style("left", d3.event.pageX - (width - 200) + "px"); }) .on("mouseout", function() { d3.select(this).attr("fill", "black"); tooltip2.style("visibility", "hidden"); d3.select("#fadeRec").attr("visibility", "hidden"); red_circle.attr("visibility", "hidden"); blue_circle.attr("visibility", "hidden"); red_circle_text.attr("visibility", "hidden"); blue_circle_text.attr("visibility", "hidden"); }); /*-------------------------------------------RETURN GRAPH---------------------------------------------------------*/ return svg; }4c:Tcd2,DataTooltip = { chart; //tooltip that shows further info on the circles const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "20px") .style("font-weight", "bold"); setTimeout(function() { d3.selectAll("circle.points") //change color and make tooltip visible .on("mouseover", function(d) { d3.select(this).attr("fill", ccfc); tooltip.style("visibility", "visible").html(getTooltipText(d)); }) /*update tooltip position based position. X can easily be updated via the year attribute, since it is the same for all features. to have one function for possible Y-attributes, the function is based on the mouse coordinates. y-coordinates of 440 is roughly equal to an attribute value of 25. */ .on("mousemove", function(d) { if (d.year > 2015) { if (d3.mouse(this)[1] > 440) { tooltip .style("top", d3.event.pageY - 100 + "px") .style("left", d3.event.pageX - 200 + "px"); } else { tooltip .style("top", d3.event.pageY + 20 + "px") .style("left", d3.event.pageX - 200 + "px"); } } else { if (d3.mouse(this)[1] > 440) { tooltip .style("top", d3.event.pageY - 100 + "px") .style("left", d3.event.pageX + 10 + "px"); } else { tooltip .style("top", d3.event.pageY + 20 + "px") .style("left", d3.event.pageX + 10 + "px"); } } }) //reset circle color and hide tooltip .on("mouseout", function(d) { d3.select(this).attr("fill", d => { if (parseInt(d.id) < IDYBP[1]) { return colorScheme(d.id / nrOfBinElements[0]); } else if (d.id < IDYBP[2]) { return colorScheme((d.id - IDYBP[1] - 1) / nrOfBinElements[1]); } else if (d.id < IDYBP[3]) { return colorScheme((d.id - IDYBP[2] - 1) / nrOfBinElements[2]); } else if (d.id < IDYBP[4]) { return colorScheme((d.id - IDYBP[3] - 1) / nrOfBinElements[3]); } else if (d.id < IDYBP[5]) { return colorScheme((d.id - IDYBP[4] - 1) / nrOfBinElements[4]); } else if (d.id < IDYBP[6]) { return colorScheme((d.id - IDYBP[5] - 1) / nrOfBinElements[5]); } else if (d.id < IDYBP[7]) { return colorScheme((d.id - IDYBP[6] - 1) / nrOfBinElements[6]); } else if (d.id < IDYBP[8]) { return colorScheme((d.id - IDYBP[7] - 1) / nrOfBinElements[7]); } else if (d.id < IDYBP[9]) { return colorScheme((d.id - IDYBP[8] - 1) / nrOfBinElements[8]); } else if (d.id <= IDYBP[10]) { return colorScheme((d.id - IDYBP[9] - 1) / nrOfBinElements[9]); } }); tooltip.style("visibility", "hidden"); }); }, 100); function underThirty(d) { var selAttr, param; param = featureSelectionData.filter(x => x.name == attribute)[0] ? featureSelectionData.filter(x => x.name == attribute)[0].param : 0; selAttr = param ? d[param] : 0; return selAttr <= 30 ? true : false; } }4d:T997,featureSelectionData = [ { name: "Danceability", param: 'dnce', description: "Danceability describes how suitable a track is for dancing based on a combination of musical elements including tempo, rhythm stability, beat strength, and overall regularity. A value of 0 is least danceable and 100 is most danceable." }, { name: "Energy", param: 'nrgy', description: "Energy is a measure from 0 to 100 and represents a perceptual measure of intensity and activity. Typically, energetic tracks feel fast, loud, and noisy. For example, death metal has high energy, while a Bach prelude scores low on the scale. Perceptual features contributing to this attribute include dynamic range, perceived loudness, timbre, onset rate, and general entropy." }, { name: "BPM", param: 'bpm', description: "The overall estimated tempo of a track in beats per minute (BPM). In musical terminology, tempo is the speed or pace of a given piece and derives directly from the average beat duration." }, { name: "Liveness", param: 'live', description: "Liveness detects the presence of an audience in the recording. Higher liveness values represent an increased probability that the track was performed live. A value above 80 provides strong likelihood that the track is live." }, { name: "Valence", param: 'val', description: "Valence is a measure from 0 to 100 describing the musical positiveness conveyed by a track. Tracks with high valence sound more positive (e.g. happy, cheerful, euphoric), while tracks with low valence sound more negative (e.g. sad, depressed, angry)." }, { name: "Acousticness", param: 'acous', description: "Acousticness is a confidence measure from 0 to 100 of whether the track is acoustic. 100 represents high confidence the track is acoustic." }, { name: "Speechiness", param: 'spch', description: "Speechiness detects the presence of spoken words in a track. The more exclusively speech-like the recording (e.g. talk show, audio book, poetry), the closer to 100 the attribute value. Values above 66 describe tracks that are probably made entirely of spoken words. Values between 33 and 66 describe tracks that may contain both music and speech, either in sections or layered, including such cases as rap music. Values below 33 most likely represent music and other non-speech-like tracks." } ]4e:T462,//adaptation of bin usage as seen in @MikeBostocks/box-plot bins = d3 .histogram() .domain([2010, 2020]) .thresholds(10) .value(d => d.year)(filedata) .map(bin => { bin.sort((a, b) => { let param = featureSelectionData.filter(x => x.name == attribute)[0] ? featureSelectionData.filter(x => x.name == attribute)[0].param : ""; return a[param] - b[param]; }); const values = bin.map(d => { let param = featureSelectionData.filter(x => x.name == attribute)[0] ? featureSelectionData.filter(x => x.name == attribute)[0].param : ""; return d[param]; }); const min = values[0]; const max = values[values.length - 1]; const q1 = d3.quantile(values, 0.25); const q2 = d3.quantile(values, 0.50); const q3 = d3.quantile(values, 0.75); const iqr = q3 - q1; // interquartile range const r0 = Math.max(min, q1 - iqr * 1.5); const r1 = Math.min(max, q3 + iqr * 1.5); bin.quartiles = [q1, q2, q3]; bin.range = [r0, r1]; //bin.outliers = bin.filter(v => v.dnce < r0 || v.dnce > r1); // TODO return bin; })4f:T1d11,topChart = { function collapse(d) { if (d.children) { d._children = d.children; d._children.forEach(collapse); d.children = null; } } const radius = 6; const root = d3.hierarchy(topListData); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); const svg = d3 .create("svg") .style("font", "10px sans-serif") .style("user-select", "none") .attr("viewBox", [-dendogramMargin.left, -dendogramMargin.top, width, dx]); const gLink = svg .append("g") .attr("id", "allNodes") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg .append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + dendogramMargin.top + dendogramMargin.bottom; const transition = svg .transition() .duration(duration) .attr("viewBox", [ -dendogramMargin.left, left.x - dendogramMargin.top, width, height ]) .tween( "resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle") ); // Update the nodes… const node = gNode.selectAll("g").data(nodes, d => d.id); nodes.forEach(function(d) { d.y = d.depth * 180; }); // Enter any new nodes at the parent's previous position. const nodeEnter = node .enter() .append("g") .attr('class', 'node') .attr("transform", d => `translate(${source.y0},${source.x0})`) //.attr("fill-opacity", 0) //.attr("stroke-opacity", 0) .on("click", d => { if (d.height === 0) return; d.children = d.children ? null : d._children; update(d); }) .on("mouseover", mouseover) .on("mouseout", mouseout); nodeEnter .append("circle") .attr("class", "node") .attr("r", 3) //.attr("fill", d => d._children ? "#555" : "#999") //.attr("stroke-width", 10) .style("fill", d => { return d._children ? "#4fb9b5" : "#fff"; }); nodeEnter .append("text") .attr("dy", "0.35em") .attr("x", d => (d._children ? -13 : 13)) .attr("text-anchor", d => (d._children ? "end" : "start")) .attr("font-family", "Open Sans") .text(d => d.data.name) .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node .merge(nodeEnter) .transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); nodeUpdate .select("circle.node") .attr('r', radius) .style("fill", function(d) { return d._children ? "#4fb9b5" : "#fff"; }); // Transition exiting nodes to the parent's new position. const nodeExit = node .exit() .transition(transition) .remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path").data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link .enter() .append("path") .attr("d", d => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); // Transition links to their new position. link .merge(linkEnter) .transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link .exit() .transition(transition) .remove() .attr("d", d => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } //***********************ToolTip********************************// const toolTipG = svg.append("g"); const toolTipRect = toolTipG .append("rect") .attr("id", "rectTooltip") .attr("rx", 5) .style("visibility", "hidden"); const toolTipText = toolTipG .append("text") .attr("id", "textTooltip") .style("visibility", "hidden"); const atristText = toolTipText.append("tspan"); const genreText = toolTipText.append("tspan"); const popText = toolTipText.append("tspan"); const bpmText = toolTipText.append("tspan"); function mouseover(d) { if (d.data.toolTipData) { const el = d3.select(this).select(".node"); el.style("r", radius * 1.5).style("fill", "#ff8f34"); toolTipText.style("visibility", "visible"); const data = d.data.toolTipData; atristText .attr("x", d.y + 35) .attr("y", d.x - 22) .text(() => { return `Artist: ${data.artist}.`; }); let maxTextWidth = atristText.node().getBBox().width; genreText .attr("x", d.y + 35) .attr("y", d.x - 2) .text(() => { return `Genre: ${data.topgenre}.`; }); const genreTextWidth = genreText.node().getBBox().width; if (genreTextWidth >= maxTextWidth) { maxTextWidth = genreTextWidth; } popText .attr("x", d.y + 35) .attr("y", d.x + 18) .text(() => { return `Popularity: ${data.pop}.`; }); bpmText .attr("x", d.y + 35) .attr("y", d.x + 38) .text(() => { return `BPM: ${data.bpm}.`; }); toolTipRect .attr("x", d.y + 30) .attr("y", d.x - 42) .attr("width", maxTextWidth + 10) .style("visibility", "visible"); } } function mouseout(d) { //svg.selectAll(".node").style("opacity", 0.9); //svg.selectAll("path").style("opacity", 0.9); if (d.data.toolTipData) { const circle = d3.select(this).select(".node"); circle.style("r", radius).style("fill", "#fff"); //toolTipG.style("opacity", 0); toolTipRect.style("visibility", "hidden"); toolTipText.style("visibility", "hidden"); } } //***********************Buttons*******************************// function collapseAll() { root.children.forEach(collapse); collapse(root.children); update(root); } const collapsButtonG = svg.append("g").on("click", collapseAll); const collapsButton = collapsButtonG .append("rect") .attr('class', 'button') .attr("x", -85) .attr("y", -170) .attr("rx", 5); const collapsButtonText = collapsButtonG .append("text") .attr('class', 'button') .attr("x", -34) .attr("y", -153) .attr("font-size", "13px") .style("fill", "black") .attr("text-anchor", "middle") .text("Collapse all"); update(root); return svg; }50:[{"id":"4fd9f48c32413def884ac7995f3997e4abef8557764e9ce68ab78b495ec29dca97a0d8c88f02b546701e52aec1f0f0ba7cfd12e7da7ce3603fd3bb08e8ede9c7","href":"https://static.observableusercontent.com/files/4fd9f48c32413def884ac7995f3997e4abef8557764e9ce68ab78b495ec29dca97a0d8c88f02b546701e52aec1f0f0ba7cfd12e7da7ce3603fd3bb08e8ede9c7","name":"geometry.png","type":"image/png","lastModified":1597858967388.627,"size":580},{"id":"76639594c505d52b58293adf539feddd7b92c26c3f46ca98b6db9d175715bc4e57611bb9fe69634a906d91b5ced1b24d078007c7105c6c10d32bc3b8a99aea01","href":"https://static.observableusercontent.com/files/76639594c505d52b58293adf539feddd7b92c26c3f46ca98b6db9d175715bc4e57611bb9fe69634a906d91b5ced1b24d078007c7105c6c10d32bc3b8a99aea01","name":"farbe.png","type":"image/png","lastModified":1597861819579.371,"size":711},{"id":"cdf79cb93d0fb1066c61503cac85cb0cd9abbac89ae5a9b083018845d3221c323d9cb0600b2791d7c0027761c0db098416850aa8f1efe70d581798a6bef07fe0","href":"https://static.observableusercontent.com/files/cdf79cb93d0fb1066c61503cac85cb0cd9abbac89ae5a9b083018845d3221c323d9cb0600b2791d7c0027761c0db098416850aa8f1efe70d581798a6bef07fe0","name":"top10UTFID-2.csv","type":"text/csv","lastModified":1598871213917.837,"size":53848}] 44:{"id":"056aec905e596c4b","slug":"radar-plot","title":"Spotify Top Charts","thumbnail":"a52dca1fcc6c0a884df90f51be4950c244f851d77380a3b1bc59ca87607ce26a","access_level":"public","create_time":"$D2020-07-28T16:42:53.837Z","update_time":"$D2020-08-31T19:36:36.424Z","view_time":null,"first_public_time":"$D2020-08-20T21:04:04.050Z","has_unpublished_edits":null,"fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"dcf220f50c569efb","login":"itsmeri","name":"itsmeri","avatar_url":"https://avatars-next.observableusercontent.com/3ee9dc462d7cc2c43c487e70ac76533a4c66e98dcae0ece8b392d472fb439ca4","tier":"starter_2024","bio":"","following":false},"version":5382,"publish_version":5382,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8cd06e84904c918","login":"itsmeri","name":"itsmeri","avatar_url":"https://avatars-next.observableusercontent.com/3ee9dc462d7cc2c43c487e70ac76533a4c66e98dcae0ece8b392d472fb439ca4","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a8cd06e84904c918","login":"itsmeri","name":"itsmeri","avatar_url":"https://avatars-next.observableusercontent.com/3ee9dc462d7cc2c43c487e70ac76533a4c66e98dcae0ece8b392d472fb439ca4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":23,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Spotify Top Charts","cells":[{"id":5108,"value":"md`# Spotify Top Charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5331,"value":"md`This Notebook was made by Maximilian Schlenczek, Ahmad Alebbou and Margaryta Tairova. \n\nIt visualizes the top Spotify songs between 2010-2019 using [this Dataset](https://www.kaggle.com/leonardopena/top-spotify-songs-from-20102019-by-year).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## 1. Spotify plotly`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5334,"value":"md`Starting with a spider graph, you can find out more about your favourite Songs by diving into there audio features as defined by Spotify. Hovering over the data point will give you its corresponding value. You can also choose up to 15 different songs to compare them to one another. Simply search for them. If no results are found, your song of choice unfortunately was not in the top songs within those years! You may also click on any song title, which will yield the 9 most similar songs, based on their audio features. \nIt is your choice what features you would like to be relevant for the comparison. Simply select/deselect via the checkboxes above the chart.\n\nAnother option in this visualization is to change to an animated bar chart. By changing the mode, only one feature will be choosable to compare for your favourite songs. Hovering over any bar will display the actual value for the feature to see, where they differ from one another!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"viewof search = text({\n placeholder: \"\",\n description: \"Enter The Song Name, Artist, Year Or Genre Here\",\n submit: \"Search\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3266,"value":"viewof r1 = radio({\n title: \"Mode\",\n description: \"Select Your Preferred Mode\",\n options: [\n {\n label: html`

`,\n value: '1'\n },\n {\n label: html`

`,\n value: '2'\n }\n ],\n value: '1'\n})\n\n// Images:\n/*

Icons made by Freepik from www.flaticon.com

\n \n

Icons erstellt von Freepik from www.flaticon.com

\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2889,"value":"// if mode 2 -> set a limit for just one available option\nviewof opt = setLimit(\n checkbox({\n description: \"Select Options Here\",\n options: options.map(function(x) {\n return {\n value: x.name,\n label: x.title\n };\n }),\n value:\n r1 == 1\n ? options.map(function(x) {\n return x.name;\n })\n : ['dnce'],\n submit: true\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"// create PlotlyChart (first mode)\nradarPlot = {\n /*------------------Layout-------------------------*/\n const title = getTitle();\n const layout = getLayout(title);\n\n /*------------------DIV-----------------------------*/\n const div = DOM.element('div');\n div.setAttribute('id', 'myDiv');\n\n /*-----------------Search-Table-Form---------------*/\n const form = d3.select('form');\n form.append('span').attr('id', 'msg');\n form.append('div').attr('id', 'myList');\n\n /*------------------Chart---------------------------*/\n drawChart(div, layout);\n addSVGElements();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5137,"value":"md`## 2. Spotify Audio Feature Comparison`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5338,"value":"md`Next up is a box-and-whisker-plot, showing the quantitive distribution of the selected audio feature per year. Here you can explore every single top track and compare it to the rest of the top tracks. \n\nThe horizontal line is the median (\"the middle\"-value), that divides the data into a lower and an upper population and the vertical black line denotes at least 97,5% of all data.\nThe Grey box is drawn from the median of the upper population to the median of the lower population, inhabiting 50% of all available Datapoints.\n\nUsing the graphical reprensentation, outliers can easily be spotted and tendencies can be formulated.\nFurthermore, each data point is colored according to its popularity rank. The \"hot\" tracks are colored red, the not as popular tracks are colored blue. Everything in between is a mix between red and blue.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5140,"value":"viewof attribute = radio({\n title: \"Audio-Features: \",\n description: \"Please pick a feature to be shown\",\n options: featureSelectionData.map(x => x.name),\n value: \"Danceability\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5145,"value":"chart.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5124,"value":"md`## 3. Spotify Top Lists (2010-2019) Dendrogram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5341,"value":"md`Last but not least is a Dendrogram. In a tree like structure, you can either list the top artists or the top songs during the years. Both are measured by popularity.\nClicking on any node will open up the subbranch.\n\nAnd if the list ever gets too long for you, simply click the button and collapse it back to its original state!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5128,"value":"viewof range = radio({\n title: 'Top scale ',\n description: 'Pick your top scale',\n options: [\n {\n label: \"Top 5\",\n value: '5'\n },\n {\n label: \"Top 10\",\n value: '10'\n },\n {\n label: \"Top 20\",\n value: '20'\n }\n ],\n value: '10'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5214,"value":"viewof dataType = radio({\n title: 'Top List ',\n description: 'Pick your top list',\n options: [\n {\n label: \"Top Artists\",\n value: '1'\n },\n {\n label: \"Top Songs\",\n value: '0'\n }\n ],\n value: '1'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5152,"value":"topChart.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5164,"value":"md`## Spotify plotly preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3666,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4793,"value":"function drawChart(div, layout) {\n // create RBWChart\n if (r1 != 1) {\n // timeout cause plotly traces must be created first\n setTimeout(function() {\n opt.length > 0 ? addRBWchart() : \"\";\n }, 100);\n }\n // create PlotlyChart\n opt.length > 0\n ? Plotly.react(div, dataSongs, layout, { showTips: false }).then(gd => {\n //disable default-double click event to isolate one trace\n //because of this event, the first song on the chart was hidden\n gd.on('plotly_legendclick', () => false);\n })\n : \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3714,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3697,"value":"// create an array of data for PlotlyChart\nfunction createSongArray(arr) {\n return arr.map((s, i) => createNewSongObjekt(s, i));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3879,"value":"// returns an array of 1 original and 9 similar songs\nfunction similarSongs(mySong) {\n let myValues = getSongValues(mySong);\n var arr = unq_filedata\n .map(function(x) {\n // calculate the euclidean distance between a given song and all others in data array\n return {\n id: x['id'],\n dist: eucDistance(myValues, getSongValues(x))\n };\n })\n .sort(function(x, y) {\n return d3.ascending(x.dist, y.dist);\n })\n .slice(0, 10)\n .map(function(d) {\n // find songs in data array by id\n return unq_filedata.filter(x => x['id'] == d.id)[0];\n });\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3864,"value":"// from https://supunkavinda.blog/js-euclidean-distance\nfunction eucDistance(a, b) {\n return (\n a\n .map((x, i) => Math.abs(x - b[i]) ** 2) // square the difference\n .reduce((sum, now) => sum + now) ** // sum\n (1 / 2)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3860,"value":"function findSimilarSongs(i) {\n let song = dataArraySongs[i];\n return similarSongs(song);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3643,"value":"// returns a new color\nsequentialScale = d3\n .scaleSequential()\n .domain([0, dataArraySongs.length])\n .interpolator(d3.interpolateRainbow)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3326,"value":"// set limit for r1 options (for RBWChart)\nsetLimit = widget => {\n if (r1 != 1) {\n const allnodes = widget.querySelectorAll('input[type=\"checkbox\"]');\n for (let i = 0; i < allnodes.length; i++) {\n if (i != 1) {\n allnodes[i].disabled = true;\n }\n }\n widget.addEventListener('change', function onchange() {\n const checked = widget.querySelectorAll('input[type=\"checkbox\"]:checked');\n if (checked.length > 1) {\n checked[0].checked = false;\n }\n const unchecked = widget.querySelectorAll(\n 'input[type=\"checkbox\"]:not(:checked)'\n );\n for (const n of unchecked) n.disabled = checked.length >= 1;\n });\n }\n return widget;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3815,"value":"// checks whether title is too long\nfunction checkNameLength(name) {\n let max = 30;\n name ? (name.length > max ? (name = name.substr(0, max) + '...') : \"\") : \"\";\n return name;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3692,"value":"// make a new song object (PlotlyChart)\nfunction createNewSongObjekt(song, i) {\n // selected options\n let temp = options.filter(x => opt.includes(x.name));\n\n if (temp.length > 0) {\n temp.push(temp[0]);\n let array = temp.map(x => x.title);\n return {\n type: 'scatterpolar',\n r: getSongValues(song),\n mode: \"lines+markers\",\n theta: array,\n fill: 'toself',\n name: checkNameLength(song.title),\n showlegend: true,\n hoverinfo: \"r\",\n hoverlabel: {\n font: { color: 'black' }\n },\n line: {\n shape: 'spline',\n color: colors[i],\n smoothing: 1\n },\n marker: {\n symbol: \"circle-dot\",\n size: 8\n },\n toggle: \"show\"\n };\n }\n return \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4351,"value":"function getTraceColor(i) {\n let traces = d3.selectAll('.js-line')._groups[0];\n if (traces) {\n if (traces[i]) {\n return traces[i].style.stroke;\n }\n if (colors[i]) {\n return colors[i];\n }\n return \"#000\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4169,"value":"// PlotlyChart Layout\nfunction getLayout(title) {\n return {\n title: {\n text: title,\n y: 0.99\n },\n font: {\n size: 10,\n color: '#000'\n },\n legend: {\n font: { size: 13, color: '#333' }\n },\n width: width,\n height: (width / 3) * 2,\n polar: {\n angularaxis: {\n linewidth: 1,\n color: 'gray',\n showline: false,\n rotation: 90,\n direction: 'clockwise'\n },\n radialaxis: {\n gridcolor: 'white',\n gridwidth: 2,\n visible: true,\n range: [0, 100],\n color: 'gray',\n angle: -13,\n showline: true\n },\n bgcolor: 'rgb(235,235,235)'\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4800,"value":"// returns a title of chart\nfunction getTitle() {\n let title;\n r1 == 1\n ? (title = \"Spotify Plotly Chart\")\n : opt.length > 0\n ? (title = options.filter(x => x.name == opt[0])[0].title)\n : (title = \"\");\n return title;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4803,"value":"// returns an array with selected values of a given song\ngetSongValues = song => {\n let values = [];\n let temp = options.filter(x => opt.includes(x.name));\n temp.push(temp[0]);\n temp.map(x => values.push(song[x.name] ? song[x.name] : 0));\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4863,"value":"function getDefaultData() {\n return d3\n .nest()\n .key(function(d) {\n return d.year;\n })\n .entries(unq_filedata)\n .map(x => x.values[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4116,"value":"//returns unique data values\nfunction f(_) {\n let uniqX = new Set();\n return _.filter(({ title }) => !uniqX.has(title) && uniqX.add(title));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5173,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3659,"value":"md`### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`### Data prepearing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3709,"value":"// search results\nsearch_res = {\n if (search) {\n return unq_filedata.filter(\n x =>\n x['title'].toLowerCase().includes(search.toLowerCase()) ||\n x['artist'].toLowerCase().includes(search.toLowerCase()) ||\n x['year'].toLowerCase().includes(search.toLowerCase()) ||\n x['topgenre'].toLowerCase().includes(search.toLowerCase())\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3702,"value":"// array of song objects\ndataSongs = createSongArray(dataArraySongs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3705,"value":"// array of songs from filedata\ndataArraySongs = getDefaultData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// all data\nunq_filedata = f(filedata) //d3.csvParse(await FileAttachment(\"top10UTF.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@5', 'd3-array@2') //","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import { RadarChart } from \"@rayraegah/radar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"import { text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2884,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3046,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3724,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"md`### Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"button_path = [\n {\n name: \"delete\",\n path:\n \"M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4869,"value":"colors = dataArraySongs.map((x, i) => sequentialScale(i))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4880,"value":"md`## Spotify Audio Feature Comparison preparations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4885,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4891,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4895,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5357,"value":"margin = ({ top: 20, right: 20, bottom: 20, left: 25 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4900,"value":"IDYBP = [1,52,105,140,211,269,364,444,509,573, 603]; // id's of year breakpoints in filedata","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4902,"value":"nrOfBinElements = [IDYBP[1]-IDYBP[0], IDYBP[2]-IDYBP[1], IDYBP[3]-IDYBP[2], IDYBP[4]-IDYBP[3], IDYBP[5]-IDYBP[4], IDYBP[6]-IDYBP[5], IDYBP[7]-IDYBP[6], IDYBP[8]-IDYBP[7], IDYBP[9]-IDYBP[8], 603-IDYBP[9]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4904,"value":"radius = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4907,"value":"jitterWidth = 35; //og value: 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4908,"value":"ccfc = \"orange\"; //chosen circle fill color","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5361,"value":"boxChartHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5218,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5365,"value":"boxPadding = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5369,"value":"boxWidth = (width -\n margin.right -\n margin.left -\n boxPadding * (years.length - 2)) /\n years.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4915,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4927,"value":"yBoxChart = d3\n .scaleLinear()\n .domain([0, 100])\n .nice()\n .range([boxChartHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4929,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yBoxChart).ticks(null, \"s\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4930,"value":"//establishing different values for the BPM data. Explanation see under \"yAxisBPM\"-Cell\n\nyBPM = d3.scaleLinear()\n .domain([0, 210])\n .range([boxChartHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4932,"value":"//BPM gets its own axis since it is the only universally accepted audio feature. Normalising it to a value between 0 and 100 would dminish its meaning and potentially confuse musically practiced viewers. \n\nyAxisBPM = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yBPM).ticks(null, \"s\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4934,"value":"x = d3.scaleTime()\n .domain([new Date(\"2009\"), new Date(\"2019\")])\n .range([margin.left, width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4936,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${boxChartHeight - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(d3.timeFormat(\"%Y\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5345,"value":"getTooltipText = function(d) {\n var featureValue, feature;\n\n feature = featureSelectionData.filter(x => x.name == attribute)[0];\n feature ? (featureValue = d[feature.param]) : (featureValue = \"\");\n\n if (featureValue) {\n return (\n \"Title: \" +\n d.title +\n \"
\" +\n \"Artist: \" +\n d.artist +\n \"
\" +\n feature.name +\n \": \" +\n featureValue +\n \"
\" +\n \"Popularity-Rank: \" +\n getRankInYear(d)\n );\n }\n return \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5349,"value":"getRankInYear = function(d) {\n if (d.id < IDYBP[1]) {\n return d.id;\n } else if (d.id < IDYBP[2]) {\n return d.id - IDYBP[1] + 1;\n } else if (d.id < IDYBP[3]) {\n return d.id - IDYBP[2] + 1;\n } else if (d.id < IDYBP[4]) {\n return d.id - IDYBP[3] + 1;\n } else if (d.id < IDYBP[5]) {\n return d.id - IDYBP[4] + 1;\n } else if (d.id < IDYBP[6]) {\n return d.id - IDYBP[5] + 1;\n } else if (d.id < IDYBP[7]) {\n return d.id - IDYBP[6] + 1;\n } else if (d.id < IDYBP[8]) {\n return d.id - IDYBP[7] + 1;\n } else if (d.id < IDYBP[9]) {\n return d.id - IDYBP[8] + 1;\n } else if (d.id <= IDYBP[10]) {\n return d.id - IDYBP[9] + 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5353,"value":"//color scale from red (\"hot\") for more popular songs to blue (\"cold\") for less popular ones.\ncolorScheme = d3.interpolate(\"#fc0303\", \"#0384fc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4942,"value":"md`### Bins`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4944,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4953,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4955,"value":"filedata = d3.csvParse(await FileAttachment(\"top10UTFID-2.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5373,"value":"years = [\n \"2010\",\n \"2011\",\n \"2012\",\n \"2013\",\n \"2014\",\n \"2015\",\n \"2016\",\n \"2017\",\n \"2018\",\n \"2019\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5012,"value":"md`## Spotify Top Lists (2010-2019) Dendrogram preparations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5023,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5026,"value":"md`### Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5027,"value":"topListData = {\n let obj;\n if (dataType === '1') {\n return (obj = {\n name: \"Top Artists\",\n children: topArtistsTreeStruture\n });\n }\n if (dataType === '0') {\n return (obj = {\n name: \"Top Songs\",\n children: topSongsWithArtistsTreeStruture\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5030,"value":"md`### Data Preparing `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5031,"value":"topSongsWithArtistsTreeStruture = topSongs.map( x => {\n let obj = {\n name: x.name,\n children: x.children.map( element => {\n let childrenObj = {\n name: element.key,\n toolTipData: element.values[0]\n }\n return childrenObj\n })\n }\n return obj\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5033,"value":"topSongs = getTopList(topSongsWithInfo, range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5035,"value":"topSongsWithInfo = d3\n .nest()\n .key(function(d) {\n return d.year;\n })\n .key(function(d) {\n return d.title;\n })\n\n .entries(filedata)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5037,"value":"topArtistsTreeStruture = topArtists.map( x => {\n let obj = {\n name: x.name,\n children: x.children.map( element => {\n let childrenObj = {\n name: element.key,\n children: element.values.map ( el => {\n let songsListObj = {\n name:el.title,\n toolTipData: el\n }\n return songsListObj})\n\n }\n return childrenObj\n })\n }\n return obj\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5039,"value":"topArtists = getTopList(topArtistsWithInfo,range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5041,"value":"topArtistsWithInfo = d3\n .nest()\n .key(function(d) {\n return d.year;\n })\n .key(function(d) {\n return d.artist;\n })\n .entries(filedata)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5043,"value":"function getTopList(list,range) {\n if( range <= 21) {\n return list.map( x => {\n let obj = { name: x.key,\n children: x.values.slice(0, range)\n } \n return obj;\n });\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5045,"value":"md`#### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5047,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5049,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5051,"value":"duration = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5054,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5056,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5058,"value":"dx = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5060,"value":"dy = width / 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5062,"value":"dendogramMargin = ({ top: 40, right: 90, bottom: 30, left: 90 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 45:"$44:body"