32:T426,chart1 = { const arcs = pie(data1); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg.append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color1(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.value.toLocaleString() + '%')); return svg.node(); }33:T426,chart2 = { const arcs = pie(data2); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg.append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color2(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.value.toLocaleString() + '%')); return svg.node(); }34:[{"id":"e4dd14f459e7c0c3993c532a56508150b35820542d36fcb5f19d438bcf9eced321696080dc1ec7712f1c6c6f118120cc899ca2ce3101a280fc27864a350f2916","href":"https://static.observableusercontent.com/files/e4dd14f459e7c0c3993c532a56508150b35820542d36fcb5f19d438bcf9eced321696080dc1ec7712f1c6c6f118120cc899ca2ce3101a280fc27864a350f2916","name":"groupedParticipateByReleaseDate@4.csv","type":"text/csv","lastModified":1606651946687.141,"size":120},{"id":"6e61409db5dfcd82af849ae491637c3720278eb716f62501af4ad2dd7bb69924184afcfa950fb2699ff56a2cb5ac441a219ac3d0b4c56c807d3e66bd7d370f93","href":"https://static.observableusercontent.com/files/6e61409db5dfcd82af849ae491637c3720278eb716f62501af4ad2dd7bb69924184afcfa950fb2699ff56a2cb5ac441a219ac3d0b4c56c807d3e66bd7d370f93","name":"groupedParticipateByReleaseDateAndMember-5.csv","type":"text/csv","lastModified":1606653176496.583,"size":851},{"id":"47bb47c8a28009c372aef4ffe0c3cf2091c30ba221c8fd4951d3d72312c13bfa7715973d64ccfbd8bea37ecddea09a009887fdbc018ee18af613b5b3a7c4c85f","href":"https://static.observableusercontent.com/files/47bb47c8a28009c372aef4ffe0c3cf2091c30ba221c8fd4951d3d72312c13bfa7715973d64ccfbd8bea37ecddea09a009887fdbc018ee18af613b5b3a7c4c85f","name":"participateWriterRatio-1.csv","type":"text/csv","lastModified":1606653301378.97,"size":53},{"id":"023031af2ab27af9ee4f79369338f0c737580b7c09d016523d1ee3b20079a77be2fc63290f0728695a668a7563d457f8ce7096996b59c5ff0f91c63dd8dbbc2c","href":"https://static.observableusercontent.com/files/023031af2ab27af9ee4f79369338f0c737580b7c09d016523d1ee3b20079a77be2fc63290f0728695a668a7563d457f8ce7096996b59c5ff0f91c63dd8dbbc2c","name":"participateCompositionRatio-1.csv","type":"text/csv","lastModified":1606653319172.257,"size":55},{"id":"14605004e6faba900a0864364e98685b34c0029e72ea5285c32ffa7102b59ea168946b2c5a90c36a8034fc883753bdb707a66b08993f92599ffa8068510a466d","href":"https://static.observableusercontent.com/files/14605004e6faba900a0864364e98685b34c0029e72ea5285c32ffa7102b59ea168946b2c5a90c36a8034fc883753bdb707a66b08993f92599ffa8068510a466d","name":"KakaoTalk_Photo_2020-08-14-19-49-48-1.jpeg","type":"image/jpeg","lastModified":1606651946687.141,"size":549841}] 30:{"title":"02-1. How much did BTS members participate in composing and writing lyrics","cells":[{"id":20,"value":"md`# 02-1. How much did BTS members participate in composing and writing lyrics `","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"html`

\n${await FileAttachment(\"KakaoTalk_Photo_2020-08-14-19-49-48-1.jpeg\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`How much did the BTS members participate in the song work? \n\nLet's take a look at the participation of BTS members, where most of the members are famous for their own composition and writing. This article was written based on the data of the officially released album with reference to vibe music and genie music, and please understand that the data for songs released in Japan may be insufficient.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\nIn order to find songs made by BTS members, I categorized them according to song characteristics. \n(For details of song classification, Check out the [*link*](https://observablehq.com/d/99222b6cfcf106f2) here) \n\nSongs created by member participation are counted based on only new song excluding duplicate songs. For example, duplicate song titles or songs in which existing songs are arranged are classified as duplicate songs and excluded. In addition, the arranged songs are also songs created with the participation of the members, but I will exclude them because I focus on composing/writing directly.\n\nExcluded songs are as follows. \n+ Foreign language version\n+ Remix version\n+ Featuring version\n+ Full Length Edition version\n+ Duplicated songs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`So, what is the rate of participation of BTS members in composition and lyrics of new songs? Let's check it through the chart below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`**BTS composition participation**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`**BTS lyrics participation**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`Of the total 286 songs, 124 songs were filtered. Excluding them - 162 songs (100%), 110 songs (51%) for \"member composition participation\" and 112 songs (52%) for \"member songwriting participation\". In other words, you can see that the BTS members have participated in the composition and lyrics of more than 70%. (If you include their mixtape data, this participation will increase even more.) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`Then, have the BTS members been participating in these many songs consistently? \n\"Yes, of cource\" \nFirst, for songs that even one BTS member participated in composing or writing lyrics, let's check the trend of the songs participated by year in the graph below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`**Number of BTS's composition/lyric participation by year (+ sumed by songs)**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"chart3 = {\n const svg3 = d3.select(DOM.svg(width, height3))\n .style(\"-webkit-tap-highlight-color\", \"transparent\")\n .style(\"overflow\", \"visible\")\n .style('max-width', '100%')\n .style('height', 'auto');\n\n svg3.append(\"g\")\n .call(xAxis3);\n\n svg3.append(\"g\")\n .call(yAxis3);\n \n svg3.append(\"path\")\n .datum(data3)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line3);\n\n const tooltip = svg3.append(\"g\");\n\n svg3.on(\"touchmove mousemove\", function() {\n const {date, value} = bisect3(d3.mouse(this)[0]);\n\n tooltip\n .attr(\"transform\", `translate(${x3(date)},${y3(value)})`)\n .call(callout3, `${value}\n${formatDate3(date)}`);\n });\n\n svg3.on(\"touchend mouseleave\", () => tooltip.call(callout3, null));\n\n return svg3.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md` \nThis time, let's look at the number of participation by member. Below is a chart of the number of times each BTS member participates in song writing/writing each year.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`**The number of times each BTS member participates in composing/writing by year**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"viewof selectedMember4 = DOM.select(data4.members)","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"chart4 = {\n const svg4 = d3.select(DOM.svg(width4, height4))\n .style('max-width', '100%')\n .style('height', 'auto');\n \n // Draw the x and y axes.\n svg4.append('g').call(xAxis4('Year'))\n svg4.append('g').call(yAxis4('Number of participation'))\n \n // Draw the grid lines.\n svg4.append('g').call(xGrid4)\n svg4.append('g').call(yGrid4)\n \n // Draw the lines.\n svg4.append('g')\n .selectAll('path')\n .data(data4.series)\n .join('path')\n .attr('d', (d) => line4(d.values))\n .style('stroke', (d, i) => color4[i % 10])\n .style('opacity', (d) => (selectedMember4 === 'All' || selectedMember4 === d.member) ? 1 : 0)\n \n return svg4.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md`By changing the selection list above the graph, you can check the number of participation of each member in detail. \n\nIn fact, looking at the number of BTS participation in the chart above, it is difficult to understand how steady and how much the participation rate is. In the next chapter, we will take a closer look at song participation compared to other groups.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`\nNext\n\n##### This article is based on the data of the album provided by Naver Vibe Music.\n##### The visualization chart was implemented by referring to the link below.\n##### - https://observablehq.com/@d3/line-chart\n##### - https://observablehq.com/@d3/pie-chart\n##### - https://observablehq.com/@jeantimex/multiple-line-charts-with-different-domain`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"color4 = d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"color1 = d3.scaleOrdinal()\n .domain(data1.map(d => d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data1.length).reverse())","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"color2 = d3.scaleOrdinal()\n .domain(data2.map(d => d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data2.length).reverse())","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"data1 = d3.csvParse(await FileAttachment(\"participateCompositionRatio-1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"data2 = d3.csvParse(await FileAttachment(\"participateWriterRatio-1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"height = Math.min(width, 300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"arcLabel = {\n const radius = Math.min(width, height) / 2 * 0.8;\n return d3.arc().innerRadius(radius).outerRadius(radius);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"pie = d3.pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"width3 = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"height3 = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"margin3 = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"data3 = Object.assign((d3.csvParse(await FileAttachment(\"groupedParticipateByReleaseDate@4.csv\").text(), d3.autoType)).map(({date, value}) => ({date, value})).sort((a, b) => d3.descending(a.date, b.date)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"x3 = d3.scaleUtc()\n .domain(d3.extent(data3, d => d.date))\n .range([margin3.left, width - margin3.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"y3 = d3.scaleLinear()\n .domain([0, d3.max(data3, d => d.value)]).nice()\n .range([height3 - margin3.bottom, margin3.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"line3 = d3.line()\n .x(d => x3(d.date))\n .y(d => y3(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"xAxis3 = g => g\n .attr(\"transform\", `translate(0,${height3 - margin3.bottom})`)\n .call(d3.axisBottom(x3).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"yAxis3 = g => g\n .attr(\"transform\", `translate(${margin3.left},0)`)\n .call(d3.axisLeft(y3))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data3.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"function formatDate3(date) {\n return date.toLocaleString(\"ko\", {\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"bisect3 = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x3.invert(mx);\n const index = bisect(data3, date, 1);\n const a = data3[index - 1];\n const b = data3[index];\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"callout3 = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"width4 = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"height4 = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"margin4 = ({top: 40, right: 20, bottom: 60, left: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"data4 = {\n const csv = d3.csvParse(await FileAttachment(\"groupedParticipateByReleaseDateAndMember-5.csv\").text(), d3.autoType)\n const memberMap = new Map()\n const datesSet = new Set()\n const series = [];\n csv.forEach(({date, member, value}) => {\n datesSet.add(date)\n if (!memberMap.has(member)) {\n memberMap.set(member, series.length)\n series.push({member, values: []})\n }\n series[memberMap.get(member)].values.push({date, value})\n })\n \n return {\n series,\n dates: Array.from(datesSet),\n members: ['All', ...Array.from(memberMap.keys()).sort()],\n memberMap,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"xScale4 = d3.scaleUtc()\n .domain(d3.extent(data4.dates)).nice()\n .range([margin4.left, width4 - margin4.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"yScale4 = {\n const scale = d3.scaleLinear().range([height4 - margin4.bottom, margin4.top])\n \n if (selectedMember4 === 'All') {\n scale.domain([0, d3.max(data4.series, (s) => d3.max(s.values, (d) => d.value))]).nice()\n } else {\n const slice = data4.series[data4.memberMap.get(selectedMember4)]\n scale.domain([0, d3.max(slice.values, (d) => d.value)]).nice()\n }\n \n return scale\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"xAxis4 = (label) => (g) => g\n .attr('transform', `translate(0,${height4 - margin4.bottom})`)\n .call(d3.axisBottom(xScale4))\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('x', margin4.left + (width4 - margin4.left - margin4.right) / 2)\n .attr('y', 50) // Relative to the x axis.","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"yAxis4 = (label) => (g) => g\n .attr('transform', `translate(${margin4.left},0)`)\n .call(d3.axisLeft(yScale4))\n // Add label\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('transform', 'rotate(-90)')\n .attr('x', -(margin4.top + (height4 - margin4.top - margin4.bottom) / 2))\n .attr('y', -60) // Relative to the y axis.","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"xGrid4 = (g) => g\n .attr('class', 'grid-lines')\n .selectAll('line')\n .data(xScale4.ticks())\n .join('line')\n .attr('x1', d => xScale4(d))\n .attr('x2', d => xScale4(d))\n .attr('y1', margin4.top)\n .attr('y2', height4 - margin4.bottom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"yGrid4 = (g) => g\n .attr('class', 'grid-lines')\n .selectAll('line')\n .data(yScale4.ticks())\n .join('line')\n .attr('x1', margin4.left)\n .attr('x2', width4 - margin4.right)\n .attr('y1', d => yScale4(d))\n .attr('y2', d => yScale4(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"line4 = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => xScale4(d.date))\n .y(d => yScale4(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"title4 = (label) => (g) => g\n .append('text')\n .attr('class', 'title')\n .text(label)\n .attr('x', width4 / 2)\n .attr('y', 20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}