30:Td6f,chart2 = { const width2 = width; const height = width2 / 1.618 / 2; const marginTop = height / 10; const marginRight = width / 10; const marginBottom = height / 20; const marginLeft = width / 8; const titleCounts = d3.rollup( dataset, (v) => v.length, (d) => d.country ); const uniqueAttributes = Array.from(new Set(dataset.map((d) => d.country))); const sortedAttributes = uniqueAttributes.sort((a, b) => { const countA = titleCounts.get(a) || 0; const countB = titleCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() // scaleBand を y 軸に使用 .domain(sortedAttributes) .range([marginTop, height - marginBottom]) // y 軸の範囲を入れ替え .padding(0.1); const x = d3 .scaleLinear() // scaleLinear を x 軸に使用 .domain([0, d3.max(titleCounts.values())]) .nice() .rangeRound([marginLeft, width2 - marginRight]); const svg = d3 .create("svg") .attr("width", width2) .attr("height", height) .attr("viewBox", [0, 0, width2, height]) .attr("style", "max-width:100%; height: auto;") .style("font-family", "ヒラギノ角ゴ ProN"); svg .append("g") .append("rect") .attr("width", width2) .attr("height", height) .attr("fill", "#f9f8f9"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)); svg .append("g") .attr("font-weight", "bold") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call( (g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -(height - marginTop * 2.5)) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") //.text("attribute") ); const text = svg .append("g") .selectAll("text") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("text") .attr("opacity", 1.0) .attr("y", (d) => y(d[0]) + height / 15) .attr("x", (d) => x(d[1]) + width / 100) .text((d) => d[1]) .attr("font-size", height / 20) .attr("fill", "blacK"); svg .append("g") .selectAll("rect") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("rect") .attr("y", (d) => y(d[0])) // y 軸を使用する .attr("x", (d) => marginLeft) // x 軸の始点を指定 .attr("height", y.bandwidth()) // y 軸のバンド幅を使用する .attr("width", (d) => x(d[1]) - marginLeft) // x 軸の値を使用する .attr("font-size", height / 40) .attr("fill", "black") .attr("opacity", 1.0); /* .on("mouseover", function (event, d) { d3.select(this) .attr("fill", (d) => colorScale(d[0])) .attr("opacity", 1.0); svg .selectAll("text") .filter((textData) => textData[0] === d[0]) .attr("opacity", 1.0); }) .on("mouseout", function (event, d) { d3.select(this).attr("fill", "black").attr("opacity", 1.0); svg .selectAll("text") .filter((textData) => textData[0] === d[0]) .attr("opacity", 1.0); }); */ return svg.node(); }31:Te6e,bubble_chart2 = { const height = width / 2; const margin = 100; const format = d3.format(",d"); let selectedData; const rollupData = d3.rollup( dataset, // Filtering based on company_attribute existence (v) => { // Calculate the sum of Views for each group const viewsTotal = d3.sum(v, (d) => d.Views || 0); return { value: viewsTotal, // Use the sum of Views as the value Artist: v[0].Artist, // Fix the typo here AI: v[0].AI, Views: v[0].Views, year2: v[0].year2, //attribute: v[0].attribute }; }, (d) => d.Artist ); // Build the hierarchy using d3.hierarchy const root = d3 .hierarchy({ children: Array.from(rollupData, ([attribute, data]) => ({ attribute, ...data })) }) .sum((d) => d.value); const pack = d3 .pack() .size([width - margin, height - margin]) .padding(20); pack(root); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;") .attr("text-anchor", "middle"); // Create a g element for the tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "mytooltip") .style("position", "absolute") .style("visibility", "hidden") .style("padding", "5px") .style("color", "white") // Set text color to white .style("background", "rgba(0, 0, 0, 0.6)") .style("border-radius", "5px") .style("font-family", "ヒラギノ角ゴ ProN") .style("pointer-events", "none"); const sortedData = root.leaves().sort((a, b) => a.data.year2 - b.data.year2); const xScale = d3 .scaleLinear() .domain(["1973", "2020"]) .range([margin + 50, width - margin]); const yScale = d3 .scaleBand() .domain(sortedData.map((d) => d.data.attribute)) // Use 'attribute' property for the domain .range([margin, height - margin]) .padding(1); const node = svg .selectAll("g") .join("a") .attr("xlink:href", (d) => d.data.URL2) .attr("target", "_blank") .data(sortedData) .join("g") .attr( "transform", (d, i) => `translate(${ xScale(d.data.year2) - 20 + (width - margin * 2) / sortedData.length / 3 },${d.y / 1.5 + margin})` ) .on("mouseover", function (event, d) { tooltip .html( ` Artist: ${d.data.Artist}
Views: ${(d.data.Views / 10000).toFixed(2)}万回
AI: ${d.data.AI}` ) .style("visibility", "visible"); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY - 30 + "px") .style("left", event.pageX - 20 + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); //guideLine.style("opacity", 0); }); node .append("circle") .attr("fill-opacity", 0.7) .attr("fill", (d) => colorScale4(d.data.AI)) .attr("r", (d) => d.r * 1); const xAxis = d3.axisBottom(xScale); svg .append("g") .attr("transform", `translate(0, ${height - margin})`) .call(xAxis); /* const yAxis = d3.axisLeft(yScale); svg.append("g").attr("transform", `translate(${margin}, 0)`).call(yAxis); */ const text = node .append("text") .attr("dy", "0.3em") .attr("text-anchor", "middle") .style("font-family", "ヒラギノ角ゴ ProN"); text .append("tspan") .text((d) => d.data.Artist) .style("background", "rgba(0, 0, 0, 0.6)") .attr("font-size", "1.5em"); return svg.node(); }32:Te45,bubble_chart3 = { const height = width / 2; const margin = 100; const format = d3.format(",d"); let selectedData; const rollupData = d3.rollup( dataset, // Filtering based on company_attribute existence (v) => { // Calculate the sum of Views for each group const viewsTotal = d3.sum(v, (d) => d.Views || 0); return { value: viewsTotal, // Use the sum of Views as the value Artist: v[0].Artist, // Fix the typo here AI: v[0].AI, Views: v[0].Views, year2: v[0].year2, attribute: v[0].attribute, country: v[0].country }; }, (d) => d.Artist ); // Build the hierarchy using d3.hierarchy const root = d3 .hierarchy({ children: Array.from(rollupData, ([attribute, data]) => ({ attribute, ...data })) }) .sum((d) => d.value); const pack = d3 .pack() .size([width - margin, height - margin]) .padding(20); pack(root); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;") .attr("text-anchor", "middle"); // Create a g element for the tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "mytooltip") .style("position", "absolute") .style("visibility", "hidden") .style("padding", "5px") .style("color", "white") // Set text color to white .style("background", "rgba(0, 0, 0, 0.6)") .style("border-radius", "5px") .style("font-family", "ヒラギノ角ゴ ProN") .style("pointer-events", "none"); const sortedData = root.leaves().sort((a, b) => a.data.year2 - b.data.year2); const xScale = d3 .scaleLinear() .domain([ d3.min(sortedData, (d) => d.data.year2), d3.max(sortedData, (d) => d.data.year2) ]) .range([margin, width - margin]); const yScale = d3 .scaleBand() .domain(sortedData.map((d) => d.data.attribute)) // Use 'attribute' property for the domain .range([margin, height - margin]) .padding(1); const node = svg .selectAll("g") .join("a") .attr("xlink:href", (d) => d.data.URL2) .attr("target", "_blank") .data(sortedData) .join("g") .attr("transform", (d) => `translate(${d.x},${d.y})`) .on("mouseover", function (event, d) { tooltip .html( ` Artist: ${d.data.Artist}
Views: ${(d.data.Views / 10000).toFixed(2)}万回
AI: ${d.data.AI}` ) .style("visibility", "visible"); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY - 30 + "px") .style("left", event.pageX - 20 + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); //guideLine.style("opacity", 0); }); node .append("circle") .attr("fill-opacity", 0.7) .attr("fill", (d) => colorScale3(d.data.country)) .attr("r", (d) => d.r * 1); /* const xAxis = d3.axisBottom(xScale); svg .append("g") .attr("transform", `translate(0, ${height - margin})`) .call(xAxis); const yAxis = d3.axisLeft(yScale); svg.append("g").attr("transform", `translate(${margin}, 0)`).call(yAxis); */ const text = node .append("text") .attr("dy", "0.3em") .attr("text-anchor", "middle") .style("font-family", "ヒラギノ角ゴ ProN"); text .append("tspan") .text((d) => d.data.Artist) .style("background", "rgba(0, 0, 0, 0.6)") .attr("font-size", "1.4em"); return svg.node(); }33:Tcab,chart = () => { const width2 = width; const height = width2 / 1.618 / 2; const marginTop = height / 10; const marginRight = width / 10; const marginBottom = height / 20; const marginLeft = width / 8; const filteredData = dataset .filter((d) => d.Artist) .sort((a, b) => b.Views - a.Views); let selected = datatata; let countryCount = d3.rollup( dataset.filter((d) => d.country), (v) => v.length, (d) => d.country ); const y = d3 .scaleBand() .domain( filteredData.map((d) => selected === "アーティスト" ? d.Artist : d.country ) ) .range([marginTop, height - marginBottom]) .padding(0.1); const x = d3 .scaleLinear() .domain([ 0, d3.max(filteredData, (d) => selected === "アーティスト" ? d.Views : countryCount.get(d.country) ) ]) .nice() .rangeRound([marginLeft, width2 - marginRight]); const svg = d3 .create("svg") .attr("width", width2) .attr("height", height) .attr("viewBox", [0, 0, width2, height]) .attr("style", "max-width:100%; height: auto;") .style("font-family", "ヒラギノ角ゴ ProN"); svg .append("rect") .attr("width", width2) .attr("height", height) .attr("fill", "#f9f8f9"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)); svg .append("g") .attr("font-weight", "bold") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -(height - marginTop * 3)) .attr("text-anchor", "start") .attr("font-weight", "bold") ); const bars = svg .append("g") .selectAll("rect") .data(filteredData) .join("rect") .attr("y", (d) => y(selected === "アーティスト" ? d.Artist : d.country)) .attr("x", marginLeft) .attr("height", y.bandwidth()) .attr( "width", (d) => x(selected === "アーティスト" ? d.Views : countryCount.get(d.country)) - marginLeft ) .attr("fill", (d) => colorScale4(d.AI)) .on("mouseover", function (event, d) { // d3.select(this).attr("fill", "red").attr("opacity", 1.0); svg.selectAll(".bar-text-" + d.Views).attr("opacity", 1.0); }) .on("mouseout", function (event, d) { //d3.select(this).attr("fill", "black").attr("opacity", 1.0); svg.selectAll(".bar-text-" + d.Views).attr("opacity", 0); }) .transition() .duration(200) .delay((d, i) => i * 5) .ease(d3.easePolyOut); const text = svg .append("g") .selectAll("text") .data(filteredData) .join("text") .attr("class", (d) => "bar-text-" + d.Views) .attr("opacity", 0) .attr("y", (d) => y(d.Artist) + height / 20) .attr("x", (d) => x(d.Views) + width2 / 100) // Corrected to use width2 .text((d) => `${(d.Views / 10000).toFixed(2)}万回`) // Divide by 10,000 and display in 2 decimal places .attr("font-size", height / 20) .attr("fill", "black"); return svg.node(); }34:[] 2e:{"title":"光の集える空間-AIに生成されたタイトルをもとに、プレイリストを作ってみた。vol.4","cells":[{"id":0,"value":"# 光の集える空間-AIに生成されたタイトルをもとに、プレイリストを作ってみた。vol.4","pinned":false,"hidden":false,"mode":"md"},{"id":749,"value":"### プレイリストの楽曲のMVリスト","pinned":false,"hidden":false,"mode":"md"},{"id":646,"value":"viewof AI = {\n const uniqueAI = Array.from(new Set(dataset.map((d) => d.AI)));\n const radio = Inputs.select(uniqueAI, {\n label: md`__AI__`,\n value: uniqueAI[0]\n });\n\n d3.select(radio).selectAll(\"label\").style(\"font-size\", \"1.5em\");\n return radio;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"

\n ${Array.from(Choiced_IDs).map((videoID) => html``)}\n

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":752,"value":"### 楽曲ごとの再生回数(2024年6月1日時点)","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"Swatches(colorScale4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"chart(dataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"### アーティストの出身地","pinned":false,"hidden":false,"mode":"md"},{"id":433,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"### 楽曲ごとの再生回数とリリース年","pinned":false,"hidden":false,"mode":"md"},{"id":779,"value":"Swatches(colorScale4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"### 終わり","pinned":false,"hidden":false,"mode":"md"},{"id":759,"value":"space = {\n const height = width;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"white\");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"key1 = Swatches(colorScale3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"Artist = d3.filter(dataset, (d) => d.Artist)","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"uniqueAttributes = Array.from(new Set(Artist.map((d) => d.Artist)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTKZ-KJLe58rwIFbYNzRKbyN5m_BRcjhSkqLB6l7rq8WQg7KMuzTmwzCsyqf1BRkbJMcTg11rDHfwGG/pub?gid=0&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"url2 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vR_a8mD7I3cNHg0oVtckTZ9H1S-Hcn9q3msHOELP1sj-hoHXSveFF1v2cyegk5Bi49wYtIRIgXmh11B/pub?gid=0&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"dataset = d3.tsv(url2, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"Inputs.table(dataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"function AI_IDs_classifier(data){\nconst matchingVideos = dataset.filter(d => d.AI === AI); // d.AIが選択された月と一致する要素をフィルタリング\nconst matchingVideoIDs = new Set(matchingVideos.map(d => d.IDs));\n return matchingVideoIDs\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"Choiced_IDs = AI_IDs_classifier(dataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"uniqueViews = Array.from(new Set(dataset.map((d) => d.Views)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"dataset2 = d3.tsv(url,d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"Inputs.table(dataset2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(\n dataset.map((d) => (d.Views >= 10000000 ? \"10億回以上\" : \"10億回未満\"))\n )\n .range([\"black\", \"gray\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"colorScale2 = d3\n .scaleOrdinal()\n .domain(dataset.map((d) => d.AI))\n .range([\"red\", \"orange\", \"blue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"colorScale4 = d3\n .scaleOrdinal()\n .domain(dataset.map((d) => d.AI))\n .range([\"red\", \"blue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"colorScale3 = d3\n .scaleOrdinal()\n .domain(dataset.map((d) => d.country))\n .range([\n \"red\",\n \"orange\",\n \"blue\",\n \"darkviolet\",\n \"yellowgreen\",\n \"chocolate\",\n \"aqua\",\n \"gainsboro\"\n ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"counts = dataset.Views","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"colorScale","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"viewof datatata = {\n const radio = Inputs.radio([\"国\", \"アーティスト\"], {\n label: md`__切り替え__`,\n value: \"アーティスト\" // 初期値を設定\n });\n return radio;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}