2c:null 2d:["$","title",null,{"children":"The Sound of Love | Ryan Irilli | Observable"}] 32:T4c8,{ const svgEl = d3.select(loveSongsByDecade); const margin = {top: 10, right: 20, bottom: 50, left: 40}; const width = +svgEl.attr('width') - margin.left - margin.right; const height = +svgEl.attr('height') - margin.top - margin.bottom; const x = d3.scaleBand().rangeRound([0, width]).padding(0.1); const y = d3.scaleLinear().rangeRound([height, 0]); const g = svgEl.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); x.domain(songsByYear.map(d => +d.year)); y.domain([0, d3.max(songsByYear, d => d.songs.length)]); g.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", 10) .attr("x", -10) .style("text-anchor", "start"); g.append('g') .attr('class', 'axis axis--y') .call(d3.axisLeft(y).ticks(10)); g.selectAll('.bar') .data(songsByYear) .enter().append('rect') .attr('class', 'bar') .attr('x', d => x(+d.year)) .attr('y', d => y(d.songs.length)) .attr('rx', '4px') .attr('width', x.bandwidth()) .attr('height', d => height - y(d.songs.length)); return 'Init Songs By year' }33:T5f6,html` (stylesheet)`34:[] 30:{"id":"6565b8a176057945","slug":"the-sound-of-love","title":"The Sound of Love","thumbnail":"52804315a30c8a3558d7cef43e77ed4fb5ca14e6f57dbe4d3723cfce3e75b978","access_level":"public","create_time":"$D2018-04-12T14:16:33.660Z","update_time":"$D2018-04-21T03:26:11.060Z","view_time":null,"first_public_time":"$D2018-04-16T01:36:12.593Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"387725eaa4571818","login":"ryanirilli","name":"Ryan Irilli","avatar_url":"https://avatars-next.observableusercontent.com/26956949d655fe26519df3d9953b95ad1fda251f2522555f381d5e902d7ff194","tier":"starter_2024","bio":"I am a graphic design nerd and UI Engineer currently @facebook previously @uber"},"version":435,"publish_version":435,"role":null,"authored":false,"authors":[{"type":"individual","id":"3f32c1a3ed7143bf","login":"ryanirilli","name":"Ryan Irilli","avatar_url":"https://avatars-next.observableusercontent.com/26956949d655fe26519df3d9953b95ad1fda251f2522555f381d5e902d7ff194","tier":null,"bio":"I am a graphic design nerd and UI Engineer currently @facebook previously @uber"}],"members":[{"type":"individual","id":"3f32c1a3ed7143bf","login":"ryanirilli","name":"Ryan Irilli","avatar_url":"https://avatars-next.observableusercontent.com/26956949d655fe26519df3d9953b95ad1fda251f2522555f381d5e902d7ff194","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Sound of Love","cells":[{"id":60,"value":"md`\n# The Sound of Love\n\nMusic has an incredible power to bring people together. It can create an energy that spreads into our very bones, giving us agency and the gumption to bust a move. That move may be the Harlem Shake or the Charelston, or perhaps a swing of the leg in the spirit of Michael Jackson. Whatever it may be, much of what is created musically is sourced from love, and it started to take hold right around the 1960s. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"html `
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"\nloveSongsByDecade = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md `# American Life in the Early 60's`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"html`\n

At my door the leaves are falling
\nA cold wild wind will come
\nSweethearts walk by together
\nAnd I still miss someone

At the turn of the decade, Johnny Cash was crooning a somber song about a love lost. Back in 1958, that timeless voice captured the hurt of a man who had once had the woman of his dreams only to become a faint memory and subject of this sad song.

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"sixtiesSVG = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"{\n const svg = d3.select(sixtiesSVG);\n const margin = {top: 20, right: 20, bottom: 30, left: 50};\n const width = +svg.attr(\"width\") - margin.left - margin.right;\n const height = +svg.attr(\"height\") - margin.top - margin.bottom;\n const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);\n \n \n \n return `Init 60's Chart`;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"getSpotifyTrackId = item => {\n const url = item[12][0];\n return url.substr(url.lastIndexOf('/') + 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"songsOfTheFifties = {\n return songsByYear\n .find(item => item.year === 1950)\n .songs.sort((x, y) => d3.ascending(+x[11], +y[11]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"TopArtistsOfTheSixties = {\n const songs = songsByYear\n .find(item => item.year === 1960).songs;\n const songsByArtist = [];\n songs.forEach(song => {\n const artist = songsByArtist.find(artist => artist.name === song[10]);\n if(artist) {\n artist.songs.push(song);\n } else {\n songsByArtist.push({\n name: song[10],\n songs: [song]\n });\n }\n })\n const songsByArtistByCount = new Map();\n songsByArtist.forEach(artist => {\n const artists = songsByArtistByCount.get(artist.songs.length);\n if(artists) {\n artists.push(artist);\n } else {\n songsByArtistByCount.set(artist.songs.length, [artist])\n }\n });\n \n return songsByArtistByCount;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"popular = {\n const MIN_SONGS = 5;\n const arr = [];\n const entries = songsByArtist.entries();\n let item = entries.next().value\n while(item) {\n if(item[1].length >= MIN_SONGS) {\n arr.push({\n artist: item[0],\n songs: item[1]\n })\n }\n item = entries.next().value\n }\n return arr.sort(function(x, y){\n return d3.ascending(y.songs.length, x.songs.length);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"songsByArtist = byDimension(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"songsByYear = {\n const arr = [];\n const entries = byDimension(11).entries();\n let item = entries.next().value;\n while(item) {\n arr.push({\n year: item[0],\n songs: item[1],\n });\n item = entries.next().value;\n }\n \n const decades = new Map();\n arr.forEach(item => {\n const decade = Math.floor(item.year/10)*10\n const songs = decades.get(decade);\n if(songs) {\n decades.set(decade, songs.concat(item.songs))\n } else {\n decades.set(decade, item.songs)\n }\n });\n \n const decadesArr = [];\n const decadeEntries = decades.entries();\n let decade = decadeEntries.next().value;\n while(decade) {\n decadesArr.push({\n year: decade[0],\n songs: decade[1],\n });\n decade = decadeEntries.next().value;\n }\n \n \n return decadesArr.sort((x, y) => d3.ascending(+x.year, +y.year));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"byDimension = {\n return dimensionIndex => {\n const map = new Map();\n data.data.forEach(item => {\n const songs = map.get(item[dimensionIndex])\n if(songs) {\n songs.push(item)\n } else {\n map.set(item[dimensionIndex], [item])\n }\n });\n return map\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"data = d3.json('https://dl.dropboxusercontent.com/s/59844y93u26w6hy/love-songs-data.json?dl=0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"d3Layout = require('d3-cloud')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"lodash = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"