myfile
Untitled spreadsheet - Sheet2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data1 = [
//E1
{ axis: "Valence", value: 76.35, type: "E1" },
{ axis: "Arousal", value: 79.83, type: "E1" },
{ axis: "Pleasure", value: 64.00, type: "E1" },
{ axis: "Familiarity", value: 21.15, type: "E1" },
//E4
{ axis: "Valence", value: 69.52, type: "E4" },
{ axis: "Arousal", value: 66.68, type: "E4" },
{ axis: "Pleasure", value: 62.57, type: "E4" },
{ axis: "Familiarity", value: 17.98, type: "E4" }
];
data1.map(d => d.type) // you need to define the filter category which is by song, so in your data you need to have a song column do you can filter by that define it here
.filter((value, index, self) => self.indexOf(value) === index)
// added legend to filter by color category
//adapted from https://observablehq.com/d/f22a19c06db35249
viewof legend = {
const fontSize = 12;
const legendHeight = 100
const legendWidth = 200
const legendMargin = 10
const colors = data1.map(d => d.type) // you need to define the filter category which is by song, so in your data you need to have a song column do you can filter by that define it here
.filter((value, index, self) => self.indexOf(value) === index)
// Track which cuts are selected in the legend.
// This is a map from cut to a boolean for
// whether or not it the cut is selected.
// To start, all cuts are selected.
const selected = new Map(colors.map(d => [d, true]));
// function to toggle the legend
const toggleLegend = function(e, d) {
const isSelected = selected.get(d) // get value for if the square is in the selected or not
const square = d3.select(this) // variable for what was selected
square.attr('fill', d => isSelected ? 'white' : colorScaleFull(d)) // change the appearance of the square
selected.set(d, !isSelected) // change the selected for the dataset
svg.property('value', selected).dispatch('input');
}
const svg = d3.create('svg')
.attr('width', legendWidth)
.attr('height', legendHeight)
const legendY = d3.scaleBand()
.domain(colors)
.range([0, legendHeight])
.padding(0.2)
svg
.append('g')
.selectAll('legend_text')
.data(colors)
.join("text")
.attr('x', (1.5 * legendMargin) + legendY.bandwidth())
.attr('y', d => legendY(d) + legendMargin)
.text(d => d)
.attr('font-size', fontSize)
.attr('font-family', 'sans-serif')
.attr('dominant-baseline', 'middle')
.style('cursor', 'hand')
svg
.append('g')
.selectAll('rect')
.data(colors)
.join("rect")
.attr("x", d => legendMargin)
.attr("y", d => legendY(d))
.attr("width", legendY.bandwidth())
.attr("height", legendY.bandwidth())
.attr("fill", d => colorScaleFull(d)) //d.colorid // you need to define a color scale that will map to color category
.attr('stroke', d => colorScaleFull(d)) ///same here
.attr('stroke-width', 2)
.on('click', toggleLegend)
svg.property('value', selected).dispatch('input');
return svg.node();
}
cell = {
//////////////////////////////////////////////////////////////
//////////////////////// Set-Up //////////////////////////////
//////////////////////////////////////////////////////////////
////////////E1-E4//////////Tonal Joyful
var margin = { top: 100, right: 100, bottom: 100, left: 100 },
width = Math.min(500, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(
width,
window.innerHeight - margin.top - margin.bottom - 20
);
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
var data = [
// TONAL JOYFUL
// [
// //E1
// { axis: "Valence", value: 76.35, type: "E1" },
// { axis: "Arousal", value: 79.83, type: "E1" },
// { axis: "Pleasure", value: 64.00, type: "E1" },
// { axis: "Familiarity", value: 21.15, type: "E1" }
// ],
// [
// //E4
// { axis: "Valence", value: 69.52, type: "E4" },
// { axis: "Arousal", value: 66.68, type: "E4" },
// { axis: "Pleasure", value: 62.57, type: "E4" },
// { axis: "Familiarity", value: 17.98, type: "E4" }
// ],
// [
// //E2
// { axis: "Valence", value: 76.02 },
// { axis: "Arousal", value: 60.27 },
// { axis: "Pleasure", value: 61.42 },
// { axis: "Familiarity", value: 13.35 }
// ],
// [
// //E3
// { axis: "Valence", value: 67.40 },
// { axis: "Arousal", value: 52.05 },
// { axis: "Pleasure", value: 57.97 },
// { axis: "Familiarity", value: 18.62 }
// ]
// TONAL SAD
[
//E7
{ axis: "Valence", value: -41.05 },
{ axis: "Arousal", value: -46.97 },
{ axis: "Pleasure", value: -6.13 },
{ axis: "Familiarity", value: -23.83 }
],
[
//E14
{ axis: "Valence", value: -36.20 },
{ axis: "Arousal", value: -38.32 },
{ axis: "Pleasure", value: -12.57 },
{ axis: "Familiarity", value: -39.02 }
],
[
//E5
{ axis: "Valence", value: -32.08 },
{ axis: "Arousal", value: -40.05 },
{ axis: "Pleasure", value: 25.00 },
{ axis: "Familiarity", value: 0.63 }
],
[
//E6
{ axis: "Valence", value: -24.02 },
{ axis: "Arousal", value: -28.17 },
{ axis: "Pleasure", value: 45.10 },
{ axis: "Familiarity", value: 7.42 }
],
// ATONAL JOYFUL
// [
// //E8
// { axis: "Valence", value: -24.78 },
// { axis: "Arousal", value: -27.43 },
// { axis: "Pleasure", value: 37.25 },
// { axis: "Familiarity", value: 1.30 }
// ],
// [
// //E9
// { axis: "Valence", value: 57.93 },
// { axis: "Arousal", value: 74.00 },
// { axis: "Pleasure", value: 39.53 },
// { axis: "Familiarity", value: 2.75 }
// ],
// [
// //E10
// { axis: "Valence", value: 53.43 },
// { axis: "Arousal", value: 41.17 },
// { axis: "Pleasure", value: 31.57 },
// { axis: "Familiarity", value: -10.00 }
// ],
// [
// //E11
// { axis: "Valence", value: 59.83 },
// { axis: "Arousal", value: 61.45 },
// { axis: "Pleasure", value: 44.68 },
// { axis: "Familiarity", value: -6.23 }
// ],
// ATONAL SAD
// [
// //E12
// { axis: "Valence", value: 45.37 },
// { axis: "Arousal", value: 53.73 },
// { axis: "Pleasure", value: 14.57 },
// { axis: "Familiarity", value: -20.77 }
// ],
// [
// //E13
// { axis: "Valence", value: -46.87 },
// { axis: "Arousal", value: -1.07 },
// { axis: "Pleasure", value: -33.58 },
// { axis: "Familiarity", value: -51.20 }
// ],
// [
// //E15
// { axis: "Valence", value: -6.78 },
// { axis: "Arousal", value: -27.77 },
// { axis: "Pleasure", value: -5.75 },
// { axis: "Familiarity", value: -49.72 }
// ],
// [
// //E16
// { axis: "Valence", value: -8.72 },
// { axis: "Arousal", value: -40.95 },
// { axis: "Pleasure", value: 30.13 },
// { axis: "Familiarity", value: -30.38 }
// ]
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
// Assign colors - Hila test
// E1 - E4 - all
var color = d3.scaleOrdinal().range(["#f5da00", "#76d180", "#ef8e02", "#c1d500"]); //yellow, red, blue-green, green
// E1 - by song
// var color = d3.scaleOrdinal().range(["#f5da00", "#ffffff", "#ffffff", "#ffffff"]); //yellow, red, blue-green, green
// var color = d3.scaleOrdinal().range(["#ffffff", "#76d180", "#ffffff", "#ffffff"]); //yellow, red, blue-green, green
// var color = d3.scaleOrdinal().range(["#ffffff", "#ffffff", "#ef8e02", "#ffffff"]); //yellow, red, blue-green, green
// var color = d3.scaleOrdinal().range(["#ffffff", "#ffffff", "#ffffff", "#c1d500"]); //yellow, red, blue-green, green
// E5 - E8 - all
//var color = d3.scaleOrdinal().range(["#f5da00", "#76d180", "#ef8e02", "#c1d500"]); //yellow, red, blue-green, green
// E5 - E8 - by song
// var color = d3.scaleOrdinal().range(["#f5da00", "#ffffff", "#ffffff", "#ffffff"]); //yellow, red, blue-green, green
// var color = d3.scaleOrdinal().range(["#ffffff", "#76d180", "#ffffff", "#ffffff"]); //yellow, red, blue-green, green
// var color = d3.scaleOrdinal().range(["#ffffff", "#ffffff", "#ef8e02", "#ffffff"]); //yellow, red, blue-green, green
// var color = d3.scaleOrdinal().range(["#ffffff", "#ffffff", "#ffffff", "#c1d500"]); //yellow, red, blue-green, green
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color
};
//Call function to draw the Radar chart
return RadarChart(data, radarChartOptions);
}
Part C.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
colorScaleFull = d3.scaleOrdinal(d3.schemeCategory10)
.domain(data.map(d => d.type)
.filter((value, index, self) => self.indexOf(value) === index))
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
