31:[] 2f:{"title":"Sales Volume by Music Format, 1973–2018","cells":[{"id":0,"value":"md`# Sales Volume by Music Format, 1973–2018\n\nData: [RIAA](https://www.riaa.com/u-s-sales-database/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"viewof showColors = checkbox({\n options: [{ value: 'on', label: \"Show categories\" }],\n value: 'on'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"legend = {\n const id = DOM.uid().id;\n return html`\n

${color.domain().map(\n name => html`\n

\n ${document.createTextNode(name)}\n \n peak: ${formatNumber(\n peaks.get(name).value\n )}\n / total: ${formatNumber(totals.get(name))}\n \n

`\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .join(\"g\")\n .attr(\"fill\", showColors ? ({ key }) => color(key) : 'steelblue')\n .call(g =>\n g\n .selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", d => x(d.data.year))\n .attr(\"y\", d => y(d[1]))\n .attr(\"width\", x.bandwidth() - 1)\n .attr(\"height\", d => y(d[0]) - y(d[1]))\n .append(\"title\")\n .text(\n d => `${d.data.name}, ${d.data.year}\n${formatNumber(d.data.value)}`\n )\n );\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = Object.assign(\n (await d3.csv(\n 'https://kb.twopointzero.us/datasets/riaa-music-sales-volume.csv',\n ({ Format, Year, [\"Value (For Charting)\"]: Value, Metric }) => ({\n name: Format,\n year: +Year,\n value: +Value * 1e6,\n metric: Metric\n })\n )).filter(r => r.metric === 'Units' && r.name),\n { y: \"Units (Billions)\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"colors = new Map([\n [\"LP/EP\", \"#2A5784\"],\n [\"Vinyl Single\", \"#43719F\"],\n [\"8 - Track\", \"#5B8DB8\"],\n [\"Cassette\", \"#7AAAD0\"],\n [\"Cassette Single\", \"#9BC7E4\"],\n [\"Other Tapes\", \"#BADDF1\"],\n [\"Kiosk\", \"#E1575A\"],\n [\"CD\", \"#EE7423\"],\n [\"CD Single\", \"#F59D3D\"],\n [\"SACD\", \"#FFC686\"],\n [\"DVD Audio\", \"#9D7760\"],\n [\"Music Video (Physical)\", \"#F1CF63\"],\n [\"Download Album\", \"#7C4D79\"],\n [\"Download Single\", \"#9B6A97\"],\n [\"Ringtones & Ringbacks\", \"#BE89AC\"],\n [\"Download Music Video\", \"#D5A5C4\"],\n // [\"Other Digital\", \"#EFC9E6\"],\n // [\"Synchronization\", \"#BBB1AC\"],\n [\"Paid Subscriptions\", \"#24693D\"],\n // [\"On-Demand Streaming (Ad-Supported)\", \"#398949\"],\n // [\"Other Ad-Supported Streaming\", \"#61AA57\"],\n // [\"SoundExchange Distributions\", \"#7DC470\"],\n // [\"Limited Tier Paid Subscription\", \"#B4E0A7\"]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"series = d3\n .stack()\n .keys(Array.from(colors.keys()).reverse())\n .value((group, key) => group.get(key).value)\n .order(d3.stackOrderReverse)(\n Array.from(d3.rollup(data, ([d]) => d, d => d.year, d => d.name).values())\n )\n .map(s => (s.forEach(d => (d.data = d.data.get(s.key))), s))","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.year))\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"color = d3.scaleOrdinal()\n .domain(Array.from(colors.keys()))\n .range(Array.from(colors.values()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x)\n .tickValues(d3.ticks(...d3.extent(x.domain()), width / 80))\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(x => (x / 1e9).toFixed(1)))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"formatNumber = x => (+(x / 1e9).toFixed(2) >= 1) \n ? `${(x / 1e9).toFixed(2)}B` \n : `${(x / 1e6).toFixed(0)}M`","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"totals = new Map(\n [...d3.group(data, d => d.name).entries()].map(([k, v]) => [\n k,\n v.reduce((acc, r) => r.value + acc, 0)\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"peaks = new Map(\n [...d3.group(data, d => d.name).entries()].map(([k, v]) => [\n k,\n v.reduce((max, r) => (r.value > max.value ? r : max), {\n value: 0,\n year: 'N/A'\n })\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"import { checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}