3 - Spotify API: Danceability (SVG version) / H Scheidl

Passionate about art, creativity, data... and programming! Using ObservableHQ for data visualizations with p5js, SVG and d3.

Workspace

Published

Spotify APIs

Edited

Jun 30, 2022

Fork of 2 - Spotify API: Danceability (p5.js version)

•

2 forks

Spotify APIs

1 - Spotify API Basics 2 - Spotify API: Danceability (p5.js version)

3 - Spotify API: Danceability (SVG version)

4 - Spotify API: Danceability (d3 charts)5 - Spotify API: My top songs vs Global top

featureList = Object.keys(features[0]).slice(0, 11)

function getPattern(color1, color2, width, whichFeature) {

let n = 7;

let scl = width / n;

let pattern = svg``;

let featureSeries = features.map((d) => d[whichFeature]);

let max = Math.max(...featureSeries);

let min = Math.min(...featureSeries);

let featuresNormalized = featureSeries.map((v) => (v - min) / (max - min));

console.log(featureSeries);

features.forEach((d, i) => {

let x = (i * scl) % width;

let y = Math.floor(i / n) * scl;

//k.myarc(x, y, r, d.danceability * d.danceability, 1, -Math.PI);

const value = featuresNormalized[i];

const measure = value * value;

pattern = svg`${pattern} ${tile(

scl,

measure,

rainbow(measure),

d.name,

d.href

)}`;

});

return svg`<g transform="translate(${scl / 2},${scl / 2})">

${pattern}</g>`;

}

rainbow = function (t, alpha) {

const TAU = Math.PI * 2;

let v = { x: 0, y: 2, z: 1 };

let r = Math.sqrt(Math.sin((t + v.x / 3) * TAU) * 0.5 + 0.5) * 255;

let g = Math.sqrt(Math.sin((t + v.y / 3) * TAU) * 0.5 + 0.5) * 255;

let b = Math.sqrt(Math.sin((t + v.z / 3) * TAU) * 0.5 + 0.5) * 255;

return `rgb(${r} , ${g}, ${b})`;

}

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.

Learn more