31:T1904,{ const width = 1150; const height = 650; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 50, right: 20, bottom: 10, left: 110 }; var flg = 0; var flg_lang = 0; const xScale = d3 .scaleLinear() .domain([0, 1300]) .range([margin.left, width - margin.right]); dataset.sort(function (a, b) { if (a.value < b.value) return 1; if (a.value > b.value) return -1; return 0; }); const yScale = d3 .scaleBand() .domain(dataset) .range([margin.top, height - margin.bottom]) .padding(0.1); dataset.sort(function (a, b) { if (a.rank < b.rank) return -1; if (a.rank > b.rank) return 1; return 0; }); const yScale2 = d3 .scaleBand() .domain(dataset) .range([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = d3.axisTop().scale(xScale); const yAxis = d3.axisLeft().scale(yScale).tickFormat(""); const yAxis2 = d3 .axisLeft() .scale(yScale2) .tickFormat((d) => d.rank); var color = d3 .scaleOrdinal() .domain(["UEFA", "CONMEBOL", "CAF", "CONCACAF", "AFC"]) .range(["#668b8a", "#9fb083", "#f9eed3", "#a47c64", "#368cbf"]); svg .append("g") .selectAll("rect") .data(dataset) .join("rect") .attr("x", margin.left) .attr("y", yScale) .attr("width", (d) => xScale(d.value) - xScale(0)) .attr("height", yScale.bandwidth()) .attr("fill", (d) => color(d.federation)) .attr("class", "bar"); /* svg .append("g") .selectAll("rect") .data(dataset) .join("rect") .attr("x", margin.left) .attr("y", yScale) .attr("width", (d) => xScale(d.top) - xScale(0)) .attr("height", yScale.bandwidth()) .attr("fill", "orange"); */ svg .append("g") .selectAll("text") .data(dataset) .join("text") .attr("text-anchor", "middle") .attr("x", (d) => xScale(d.value) + 15) .attr("y", (d) => yScale(d) + yScale.bandwidth() / 2 + 4) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 11) .attr("fill", "#393939") .text((d) => Math.round(d.value)) .attr("class", "value"); /* svg .append("g") .selectAll("text") .data(dataset) .join("text") .attr("text-anchor", "middle") .attr("x", (d) => xScale(d.top) + 15) .attr("y", (d) => yScale(d) + yScale.bandwidth() / 2 + 4) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 11) .attr("fill", "orange") .text((d) => Math.round(d.starRate * 100) + "%"); */ svg .append("text") .attr("x", width - margin.right - margin.left) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "#393939") .text("value(m€) →"); svg .append("text") .attr("x", margin.left - 23) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "#393939") .text("rank▼") .attr("cursor", "pointer") .attr("class", "sortText") .on("click", function () { if (flg == 0) { d3.selectAll(".bar").transition().duration(500).attr("y", yScale2); d3.selectAll(".value") .transition() .duration(500) .attr("y", (d) => yScale2(d) + yScale2.bandwidth() / 2 + 4); d3.selectAll(".country") .transition() .duration(500) .attr("y", (d) => yScale2(d) + yScale2.bandwidth() / 2 + 4); d3.selectAll(".rank") .transition() .duration(500) .attr("y", (d) => yScale2(d) + yScale2.bandwidth() / 2 + 4); flg = 1; } else if (flg == 1) { d3.selectAll(".bar").transition().duration(500).attr("y", yScale); d3.selectAll(".value") .transition() .duration(500) .attr("y", (d) => yScale(d) + yScale.bandwidth() / 2 + 4); d3.selectAll(".country") .transition() .duration(500) .attr("y", (d) => yScale(d) + yScale.bandwidth() / 2 + 4); d3.selectAll(".rank") .transition() .duration(500) .attr("y", (d) => yScale(d) + yScale.bandwidth() / 2 + 4); flg = 0; } }); svg .append("text") .attr("text-anchor", "middle") .attr("x", margin.left / 2 - 10) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "#393939") .text("country"); svg .append("g") .selectAll("text") .data(dataset) .join("text") .attr("text-anchor", "middle") .attr("x", (d) => margin.left / 2 - 10) .attr("y", (d) => yScale(d) + yScale.bandwidth() / 2 + 4) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 11) .attr("fill", "#393939") .text((d) => d.country2) .attr("class", "country"); svg .append("g") .selectAll("text") .data(dataset) .join("text") .attr("text-anchor", "middle") .attr("x", (d) => margin.left / 2 + 41) .attr("y", (d) => yScale(d) + yScale.bandwidth() / 2 + 4) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("fill", "#393939") .text((d) => d.rank) .attr("class", "rank"); const rectY = [ { y: 0, federation: "ヨーロッパ" }, { y: 20, federation: "南米" }, { y: 40, federation: "アフリカ" }, { y: 60, federation: "北中米カリブ海" }, { y: 80, federation: "アジア" } ]; svg .append("g") .selectAll("rect") .data(rectY) .join("rect") .attr("x", 900) .attr("y", (d) => d.y + 500) .attr("width", 10) .attr("height", 10) .attr("fill", (d, i) => color(i)); svg .append("g") .selectAll("text") .data(rectY) .join("text") .attr("text-anchor", "middle") .attr("x", 960) .attr("y", (d) => d.y + 508) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "#393939") .text((d) => d.federation); svg.append("g").attr("transform", `translate(0, ${margin.top})`).call(xAxis); svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis); return svg.node(); }32:T1309,{ const svgScale = d3.scaleSqrt().domain([0, 1300]).range([0, 500]); const svgHeight1 = svgScale(dataOfCountry2[0].sum); const svgWidth1 = svgScale(dataOfCountry2[0].sum); const svgHeight2 = svgScale(dataOfCountry4[0].sum); const svgWidth2 = svgScale(dataOfCountry4[0].sum); const margin = { top: 30, right: 20, bottom: 50, left: 30, line: 20 }; var treemap1 = d3.treemap().size([svgWidth1, svgHeight1]).padding(0.5); treemap1(root3); var treemap2 = d3.treemap().size([svgWidth2, svgHeight2]).padding(0.5); treemap2(root4); const svg = d3 .create("svg") .attr("width", 1100) .attr("height", margin.top + 500 + margin.bottom); const textScale = d3 .scaleSqrt() .domain([0, d3.max(root3.leaves(), (d) => d.data.value)]) .range([0, 20]); var color = d3 .scaleOrdinal() .domain(["FW", "MF", "DF", "GK"]) .range(["#D74B4B", "#DCDDD8", "#475F77", "#354B5E"]); svg .append("g") .selectAll("rect") .data(root4.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr( "transform", (d) => `translate(${margin.left + d.x0 + 500 - svgWidth2 - margin.line},${ d.y0 + 500 - svgHeight2 + margin.top })` ) .attr("fill", (d) => color(d.data.position)) .attr("opacity", 0.08); svg .append("g") .selectAll("rect") .data(root3.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr( "transform", (d) => `translate(${margin.left + d.x0 + 500 - svgWidth1 - margin.line},${ d.y0 + 500 - svgHeight1 + margin.top })` ) .attr("fill", (d) => color(d.data.position)) .attr("class", "treemapRect2") .append("title") .text((d) => `${d.data.name} (${d.data.value} m€)`); svg .append("g") .selectAll("rect") .data(root3.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr( "transform", (d) => `translate(${margin.left + d.x0 + 500 + margin.line},${ d.y0 + 500 - svgHeight1 + margin.top })` ) .attr("fill", (d) => color(d.data.position)) .attr("opacity", 0.08); svg .append("g") .selectAll("rect") .data(root4.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr( "transform", (d) => `translate(${margin.left + d.x0 + 500 + margin.line},${ d.y0 + 500 - svgHeight2 + margin.top })` ) .attr("fill", (d) => color(d.data.position)) .attr("class", "treemapRect2") .append("title") .text((d) => `${d.data.name} (${d.data.value} m€)`); const usage = [ { x: 0, position: "GK" }, { x: 70, position: "DF" }, { x: 140, position: "MF" }, { x: 210, position: "FW" } ]; svg .append("g") .selectAll("rect") .data(usage) .join("rect") .attr("x", (d) => margin.left + d.x + 380) .attr("y", 520 + margin.top) .attr("width", 10) .attr("height", 10) .attr("fill", (d) => color(d.position)); svg .append("g") .selectAll("text") .data(usage) .join("text") .attr("x", (d) => margin.left + d.x + 395) .attr("y", 529 + margin.top) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "#393939") .text((d) => d.position); svg .append("g") .selectAll("text") .data(dataOfCountry2) .join("text") .attr("text-anchor", "middle") .attr( "x", margin.left + 500 - svgScale(dataOfCountry2[0].sum) / 2 - margin.line ) .attr("y", 500 - svgScale(dataOfCountry2[0].sum) - 5 + margin.top) .attr("font-family", "'Kiwi Maru', serif") .attr("font-size", 20) .attr("fill", "#666666") .text((d) => d.country); svg .append("g") .selectAll("text") .data(dataOfCountry4) .join("text") .attr("text-anchor", "middle") .attr( "x", margin.left + 500 + svgScale(dataOfCountry4[0].sum) / 2 + margin.line ) .attr("y", 500 - svgScale(dataOfCountry4[0].sum) - 5 + margin.top) .attr("font-family", "'Kiwi Maru', serif") .attr("font-size", 20) .attr("fill", "#666666") .text((d) => d.country); svg .append("line") .attr("x1", margin.left + 500) .attr("y1", 0) .attr("x2", margin.left + 500) .attr("y2", 500 + margin.top) .attr("stroke", "#191919"); /* svg .append("g") .selectAll("text") .data(root3.leaves()) .join("text") .attr("x", (d) => d.x0 + 4) .attr("y", (d) => d.y0 + textScale(d.value)) .text((d) => d.data.name) .attr("font-size", (d) => textScale(d.value)) .attr("fill", "white"); */ return svg.node(); }33:Ta53,{ const height = 500; const width = 800; const margin = { top: 40, right: 100, bottom: 10, left: 30 }; var treemap = d3 .treemap() .size([width - margin.right, height]) .padding(0.5); treemap(root2); const svg = d3.create("svg").attr("width", width).attr("height", height); const textScale = d3 .scaleSqrt() .domain([0, d3.max(root2.leaves(), (d) => d.data.value)]) .range([0, 20]); var play = ["o", "d"]; const colors = ["#668b8a", "#9fb083"]; var color = d3.scaleOrdinal().domain(play).range(colors); svg .append("g") .selectAll("rect") .data(root2.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("transform", (d) => `translate(${d.x0},${d.y0})`) .attr("fill", "black"); svg .append("g") .selectAll("image") .data(root2.leaves()) .join("image") .attr("href", (d) => d.data.picture) .attr("transform", (d) => `translate(${d.x0},${d.y0})`) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0); svg .append("g") .selectAll("rect") .data(root2.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("transform", (d) => `translate(${d.x0},${d.y0})`) .attr("fill", (d) => color(d.data.play)) .attr("class", "treemapRect") .append("title") .text((d) => `${d.data.name} (${d.data.age}歳 ${d.data.value}m€ )`); svg .append("g") .selectAll("text") .data(root2.leaves()) .join("text") .attr("x", (d) => d.x0 + 4) .attr("y", (d) => d.y0 + textScale(d.value)) .text((d) => d.data.name) .attr("font-size", (d) => textScale(d.value)) .attr("fill", "#f9eed3"); const usage = [ { y: 0, play: "海外" }, { y: 20, play: "国内" } ]; svg .append("g") .selectAll("rect") .data(usage) .join("rect") .attr("x", width - margin.right + 20) .attr("y", (d) => d.y + 20) .attr("width", 10) .attr("height", 10) .attr("fill", (d, i) => colors[i]); svg .append("g") .selectAll("text") .data(usage) .join("text") .attr("x", width - margin.right + 33) .attr("y", (d) => d.y + 28) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("fill", "#393939") .text((d) => d.play); svg .append("text") .attr("x", width - margin.right + 20) .attr("y", 10) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 11) .attr("fill", "#393939") .text("所属チーム"); return svg.node(); }34:T861,{ var width = 1000; var height = 400; const radiusScale = d3.scaleSqrt().domain([0, 170]).range([0, 2]); const color = d3.scaleOrdinal().domain([0, 1]).range(["#668b8a", "#9fb083"]); const pie = d3.pie().sort(null); const arc = d3 .arc() .innerRadius(25) .outerRadius(50) .padAngle(0.05) .cornerRadius(3); var svg = d3.create("svg").attr("width", width).attr("height", height); const g = svg .selectAll("g") .data(japaneseData) .join("g") .attr( "transform", (d, i) => `translate(${d.x} , 200), scale(${ (radiusScale(d.value), radiusScale(d.value)) })` ); g.selectAll("path") .data((d) => pie([d.overseas, d.domestic])) .join("path") .attr("fill", (d, i) => color(i)) .attr("d", arc); svg .append("g") .selectAll("text") .data(japaneseData) .join("text") .attr("text-anchor", "middle") .attr("x", (d) => d.x) .attr("y", 350) .text((d) => d.year) .attr("font-size", 17) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(japaneseData) .join("text") .attr("text-anchor", "middle") .attr("x", (d) => d.x) .attr("y", 205) .text((d) => d.value + "m€") .attr("font-size", 15) .attr("fill", "black"); const usage = [ { y: 0, play: "海外" }, { y: 20, play: "国内" } ]; svg .append("g") .selectAll("rect") .data(usage) .join("rect") .attr("x", width - 120) .attr("y", (d) => d.y + 20) .attr("width", 10) .attr("height", 10) .attr("fill", (d, i) => color(i)); svg .append("g") .selectAll("text") .data(usage) .join("text") .attr("x", width - 105) .attr("y", (d) => d.y + 28) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("fill", "#393939") .text((d) => d.play); svg .append("text") .attr("x", width - 130) .attr("y", 10) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 11) .attr("fill", "#393939") .text("所属チーム"); return svg.node(); }35:[{"id":"7b989013d983504f154b7817337e32e1c53b6b1e417aad54b5225d4482007c64c360dc22de83de28adb38df5add60592451dd161627f9bf3f44a4946d6f4d085","href":"https://static.observableusercontent.com/files/7b989013d983504f154b7817337e32e1c53b6b1e417aad54b5225d4482007c64c360dc22de83de28adb38df5add60592451dd161627f9bf3f44a4946d6f4d085","name":"b@3.png","type":"image/png","lastModified":1675867810527.91,"size":9753},{"id":"0d240a753a22f0984bb051dd3ede201677ecb4301d40ece7bc9b4f5b76b439cddd11f31fc92da71fc30bc596d6724c61be819b1f61755b2057fe9eedcd3f8f3b","href":"https://static.observableusercontent.com/files/0d240a753a22f0984bb051dd3ede201677ecb4301d40ece7bc9b4f5b76b439cddd11f31fc92da71fc30bc596d6724c61be819b1f61755b2057fe9eedcd3f8f3b","name":"c@1.png","type":"image/png","lastModified":1675867809105.597,"size":14495},{"id":"6d57c593ce64b9c0555270d8413f0dc4364d45a5c360e134c306f5f9731b04f327bc01561b873096ed9c762e0ea8c1956736e558efe3e3e835d1dc4e458d28b5","href":"https://static.observableusercontent.com/files/6d57c593ce64b9c0555270d8413f0dc4364d45a5c360e134c306f5f9731b04f327bc01561b873096ed9c762e0ea8c1956736e558efe3e3e835d1dc4e458d28b5","name":"a@1.png","type":"image/png","lastModified":1675867811940.498,"size":14342},{"id":"56e11dfacfb492ac712269055416b43836f9dec9644ca2ce041236edef13614ecb0f2b289ecd0ee208f4f3dd22a33f53c38fd7fadd815b5047d55f2c8f36d4b0","href":"https://static.observableusercontent.com/files/56e11dfacfb492ac712269055416b43836f9dec9644ca2ce041236edef13614ecb0f2b289ecd0ee208f4f3dd22a33f53c38fd7fadd815b5047d55f2c8f36d4b0","name":"Arsenal_FC.svg","type":"image/svg+xml","lastModified":1674185070992.124,"size":14267},{"id":"a1a0384e1c9e759aa52a44f0cd6e0500083ae9ec99046f6f6cc5f614f6cdf39002468440ed9c68b1549ea41b1c4a47cf33a1be2a1de69f378b8f07b079e87e34","href":"https://static.observableusercontent.com/files/a1a0384e1c9e759aa52a44f0cd6e0500083ae9ec99046f6f6cc5f614f6cdf39002468440ed9c68b1549ea41b1c4a47cf33a1be2a1de69f378b8f07b079e87e34","name":"Brighton_&_Hove_Albion_logo.svg","type":"image/svg+xml","lastModified":1674185534497.591,"size":11705},{"id":"f15fbd0e95e6ec3e0e09580d798ca62fa4f0bac5f16c429bcc381b29b8e36756d2efefd58b8893b45ef2879b5b5feec95ad9c097545965f879a37bd6705b8881","href":"https://static.observableusercontent.com/files/f15fbd0e95e6ec3e0e09580d798ca62fa4f0bac5f16c429bcc381b29b8e36756d2efefd58b8893b45ef2879b5b5feec95ad9c097545965f879a37bd6705b8881","name":"family_tv_soccer2.png","type":"image/png","lastModified":1674186846206.493,"size":610641},{"id":"16a992a74f89204bc73db7a20ece282904e5cfe27bec905a3ba2238d8846bee79b7ed20c83abfc769bb0f73102c20bea70b259a41a63cd309facc50c13763d0c","href":"https://static.observableusercontent.com/files/16a992a74f89204bc73db7a20ece282904e5cfe27bec905a3ba2238d8846bee79b7ed20c83abfc769bb0f73102c20bea70b259a41a63cd309facc50c13763d0c","name":"mbappe.jpg","type":"image/jpeg","lastModified":1675255693310.18,"size":1240542},{"id":"1f89fc3e3f5020a5f1042c5a596bd241d910d27140c43aa3b5c7af38fc8c546860320aefa38bc3df80529991111b6f848653f1875e675ca05cf5d42b202a9fbe","href":"https://static.observableusercontent.com/files/1f89fc3e3f5020a5f1042c5a596bd241d910d27140c43aa3b5c7af38fc8c546860320aefa38bc3df80529991111b6f848653f1875e675ca05cf5d42b202a9fbe","name":"family_tv_soccer2@1.png","type":"image/png","lastModified":1675254108432.647,"size":684653},{"id":"3000cb3906ce5f443789f403274d1825760724a9160bfaf74cf3b747d30751b698072e09151cf1d00f894adc14c2cd41e0c7372e3898462554823041093bacda","href":"https://static.observableusercontent.com/files/3000cb3906ce5f443789f403274d1825760724a9160bfaf74cf3b747d30751b698072e09151cf1d00f894adc14c2cd41e0c7372e3898462554823041093bacda","name":"Takuma Asano Japan 112322.jpg","type":"image/jpeg","lastModified":1675348895481.079,"size":77859},{"id":"f25f25e28e6870b2014829fa9ff458f57390bac940ab6b79f082cdd902e46c82eff4c06c405e5b53f065e271b779595d20fea675650a81062ca9f91d8e911e3e","href":"https://static.observableusercontent.com/files/f25f25e28e6870b2014829fa9ff458f57390bac940ab6b79f082cdd902e46c82eff4c06c405e5b53f065e271b779595d20fea675650a81062ca9f91d8e911e3e","name":"huramengo.png","type":"image/png","lastModified":1675384904330.283,"size":2523},{"id":"d14b887f5e956218e5b4b4ea05ea6be7daa332b50aa7c149b2c046ecbc918b97d31158e72cd286f768738f555652736dc9182b0d93dc484d9d619b984a72c289","href":"https://static.observableusercontent.com/files/d14b887f5e956218e5b4b4ea05ea6be7daa332b50aa7c149b2c046ecbc918b97d31158e72cd286f768738f555652736dc9182b0d93dc484d9d619b984a72c289","name":"person_brave_01.png","type":"image/png","lastModified":1675392480816.773,"size":3485},{"id":"48b6bcfaf9a51088d0df4e01977ff581c5f0bffd66a23aa3a479f0a32c9836ba129e5abc36451c4715a44c30aac338875dd3c0dd1ca2ae47aeb6dab3520f4ad1","href":"https://static.observableusercontent.com/files/48b6bcfaf9a51088d0df4e01977ff581c5f0bffd66a23aa3a479f0a32c9836ba129e5abc36451c4715a44c30aac338875dd3c0dd1ca2ae47aeb6dab3520f4ad1","name":"person_ghost_01.png","type":"image/png","lastModified":1675392525557.18,"size":3028},{"id":"77c48a46072d913318d642df576fba0f78f17bc42fb8ff9523d7b30e0b4c9c44e817c50d901c676fbf22352bf8cfe866ef3b0323a2a887fc0855a209b8e6f61b","href":"https://static.observableusercontent.com/files/77c48a46072d913318d642df576fba0f78f17bc42fb8ff9523d7b30e0b4c9c44e817c50d901c676fbf22352bf8cfe866ef3b0323a2a887fc0855a209b8e6f61b","name":"person_drumband_03.png","type":"image/png","lastModified":1675392924201.522,"size":4122},{"id":"6dd454398ae740f0ffb57e3537e70f216cdf6e3f3a644eaa33da3319914fdac4fdaf73747405f2fa55658885ef8df2953bb3fb5ae841754f1078e0531c3b6c5e","href":"https://static.observableusercontent.com/files/6dd454398ae740f0ffb57e3537e70f216cdf6e3f3a644eaa33da3319914fdac4fdaf73747405f2fa55658885ef8df2953bb3fb5ae841754f1078e0531c3b6c5e","name":"person_bisyamon_01.png","type":"image/png","lastModified":1675392959329.308,"size":1294},{"id":"6eeaf4d5bf075c39634acdd7f738549688effba92e182bff5071f4e1076128da98463a8d36a6952db883b55d1d7a0146a9733240b806942d6e1b47a29836d04d","href":"https://static.observableusercontent.com/files/6eeaf4d5bf075c39634acdd7f738549688effba92e182bff5071f4e1076128da98463a8d36a6952db883b55d1d7a0146a9733240b806942d6e1b47a29836d04d","name":"groupe.png","type":"image/png","lastModified":1675397715529.417,"size":13344},{"id":"831b2ea9ebacfb2b8193f3df868f28bbc2c5340527813dedbdc1b58158e8a9563473e43b58e699f6e7001915e5037b37a81179d1690f6cb58853328c6cff435d","href":"https://static.observableusercontent.com/files/831b2ea9ebacfb2b8193f3df868f28bbc2c5340527813dedbdc1b58158e8a9563473e43b58e699f6e7001915e5037b37a81179d1690f6cb58853328c6cff435d","name":"doitu.png","type":"image/png","lastModified":1675397934915.634,"size":2239},{"id":"19c62cce2468e3ff4010b7a8242da28d05c974cfc53d7322fc54e48c19d8472b57b73f89cdf1652a9b99010480448d32fef982cf637b7e217684d85c40599924","href":"https://static.observableusercontent.com/files/19c62cce2468e3ff4010b7a8242da28d05c974cfc53d7322fc54e48c19d8472b57b73f89cdf1652a9b99010480448d32fef982cf637b7e217684d85c40599924","name":"kostarika.png","type":"image/png","lastModified":1675397940363.615,"size":2002},{"id":"29907b3bfbc1af12ee98a33993fd11db317727b8f2a8e66849bf0cd79133dc19b38e03bd8a826129cc2389bbda2b91e20cb52d4242133a5080c75e5d181f13c5","href":"https://static.observableusercontent.com/files/29907b3bfbc1af12ee98a33993fd11db317727b8f2a8e66849bf0cd79133dc19b38e03bd8a826129cc2389bbda2b91e20cb52d4242133a5080c75e5d181f13c5","name":"spain.png","type":"image/png","lastModified":1675397945902.354,"size":2123}] 2f:{"title":"サッカーを金額から見たらどうなるのか","cells":[{"id":0,"value":"# サッカーを金額から見たらどうなるのか","pinned":false,"hidden":false,"mode":"md"},{"id":987,"value":"FileAttachment(\"family_tv_soccer2@1.png\").image({ height: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"## 概要","pinned":false,"hidden":false,"mode":"md"},{"id":944,"value":"みなさんサッカーを観ることはありますか。","pinned":false,"hidden":false,"mode":"md"},{"id":1389,"value":"去年はワールドカップもあり、話題にあがることも多かったサッカーですが、\n興味がない人からすると人気なのは知ってるけどたまに目にするニュースがどれくらいすごいことなのか分からない......という人が多いんじゃないでしょうか。","pinned":false,"hidden":false,"mode":"md"},{"id":2110,"value":"そこで、この記事ではサッカーに関するお金のデータに絞って可視化してみることにより、競技そのものにはあまり興味のない人にもサッカーの話題を視覚的に面白く、わかりやすく伝えられる記事を目指します。","pinned":false,"hidden":false,"mode":"md"},{"id":1298,"value":"## 扱うデータ","pinned":false,"hidden":false,"mode":"md"},{"id":1306,"value":"### 市場価値\n選手の年齢や成績、役割などから将来性や注目度を金額で表したものになります。
\n実際に支払われている給料とは違いますが、総合的に選手の価値を数値化しているので給料や移籍金の目安になります。
","pinned":false,"hidden":false,"mode":"md"},{"id":1622,"value":"### 世界ランキング\nFIFA(国際サッカー連盟)が発表している国別代表の世界ランキングです。\n試合結果により足し引きされるポイントで順位がついています。
\nもらえるポイントは対戦相手の順位によって変動するため、格上に勝てば多くもらえますし、逆に格下に負けると大幅にマイナスされることになります。","pinned":false,"hidden":false,"mode":"md"},{"id":2476,"value":"##### (単位として出てくる1m€は現在のレートで1400万円ほどです。)","pinned":false,"hidden":false,"mode":"md"},{"id":1482,"value":"#### 参考
\nFIFA :\nhttps://www.fifa.com/fifa-world-ranking/men?dateId=id13869
\ntransfermarkt : https://www.transfermarkt.jp/","pinned":false,"hidden":false,"mode":"md"},{"id":1320,"value":"# 代表チームでみる","pinned":false,"hidden":false,"mode":"md"},{"id":1615,"value":"イメージしやすくするためクラブチームではなく、各国代表チームを**市場価値**をもとに分析していきます。
\nワールドカップでは26人まで登録することができます。
\n(23人までだったルールがコロナにより変更)","pinned":false,"hidden":false,"mode":"md"},{"id":1641,"value":"## 市場価値順に並べてみる","pinned":false,"hidden":false,"mode":"md"},{"id":1643,"value":"世界ランキング1~30位までの国を対象に、2022年の代表チームの**市場価値の合計**を棒グラフで表しました。
\n横軸は合計市場価値、縦軸は**rank**の文字をクリックすることで市場価値順と世界ランキング順にソートできます。\nその国の地域によって色を変えています。","pinned":false,"hidden":false,"mode":"md"},{"id":1162,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"ポジション（役割）が選手によって違うため、単純に値段が高い人を上から26人呼ぶ！というわけにはいかないのですが、やはり強い国は価値の高い選手が揃っているので合計金額も大きくなります。","pinned":false,"hidden":false,"mode":"md"},{"id":1682,"value":"\nチーム数では圧倒的にヨーロッパが多く、市場価値でいうと上位はヨーロッパと南米が占めていることが見てとれます。
\nグラフにはアジア地域も4チームいますが、いずれもチームの価値はこの中では低めだということがわかります。","pinned":false,"hidden":false,"mode":"md"},{"id":1992,"value":"## 比較しやすくしてみる","pinned":false,"hidden":false,"mode":"md"},{"id":1999,"value":"同じく2022年の選出に基づいて、国ごとに合計市場価値と各選手の市場価値を面積に反映させたツリーマップにしました。
\n選手の大まかな役割ごとにブロックを作り、色分けしています。","pinned":false,"hidden":false,"mode":"md"},{"id":2068,"value":"##### FW(赤): 攻撃の選手
\n##### MF(灰): 真ん中の選手
\n##### DF(薄い青): 守備の選手
\n##### GK(濃い青):　ゴールキーパー","pinned":false,"hidden":false,"mode":"md"},{"id":1545,"value":"viewof dataOfCountry2 = Inputs.select(countries, {\n value: countries.get(\"日本\"),\n label: \"country1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1918,"value":"viewof dataOfCountry4 = Inputs.select(countries, {\n value: countries.get(\"ドイツ\"),\n label: \"country2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2041,"value":"好きな国を選んでぜひ比較してみてください。","pinned":false,"hidden":false,"mode":"md"},{"id":2584,"value":"### 使用例","pinned":false,"hidden":false,"mode":"md"},{"id":2440,"value":"FileAttachment(\"groupe.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2452,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2464,"value":"##### [2022年ワールドカップグループステージでの順位表と結果](https://www.google.com/search?q=%E3%83%AF%E3%83%BC%E3%83%AB%E3%83%89%E3%82%AB%E3%83%83%E3%83%97&rlz=1C1FQRR_jaJP991JP991&oq=%E3%83%AF%E3%83%BC%E3%83%AB%E3%83%89%E3%82%AB%E3%83%83%E3%83%97&aqs=chrome..69i57j0i433i512l2j0i512l2j0i433i512j0i512l3j0i433i512.1592j1j15&sourceid=chrome&ie=UTF-8#sie=lg;/m/0fp_8fm;2;/m/030q7;st;fp;1;;;)より(google)","pinned":false,"hidden":false,"mode":"md"},{"id":2038,"value":"ワールドカップで日本がドイツ、スペインに対して勝利したことは去年大きな話題になりました。比較用にコスタリカのデータも入っているので、各対戦をこのツールを利用してならべてみましょう。\n","pinned":false,"hidden":false,"mode":"md"},{"id":2597,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2591,"value":"単純に大きさにして横に並べるだけでもその差が伝わるのではないでしょうか。実際の試合結果と照らし合わせてみると、番狂わせの連続だったことがわかります。","pinned":false,"hidden":false,"mode":"md"},{"id":2617,"value":"### 色のバランス","pinned":false,"hidden":false,"mode":"md"},{"id":2119,"value":"また、役割で色分けをしているため、色のバランスからチームの性格のようなものを読み取ることができます。","pinned":false,"hidden":false,"mode":"md"},{"id":2064,"value":"例えば、赤色が大きい国は攻撃の選手に価値の高い選手がたくさんいるということになるので、比較的攻撃力に重点を置いていると言えます。ブラジルなどがわかりやすいかもしれません。
\nその他の色でも同様に、どういった役割の選手がその国の中心なのかがわかると思います。","pinned":false,"hidden":false,"mode":"md"},{"id":1694,"value":"## 各国の内訳は？\n次に、それぞれ詳しく見ていきたいと思います。全体の面積を一定にして、選手の市場価値のみを面積に反映させました。
\n色はその選手の所属チームが海外か国内かで分けています。
\nホバーで写真が表示されます。
\n","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"viewof dataOfCountry = Inputs.select(countries, { label: \"国名\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1721,"value":"引き続き面積の大きな選手ほど市場価値が高い=注目度が高い選手です。顔を覚えておくとこれからニュースなどで見かけることがあるかもしれません。
\n図鑑のような感じで楽しんでください。\n","pinned":false,"hidden":false,"mode":"md"},{"id":1792,"value":"また分析できることとしてこのツリーマップからも大きさの偏りや色の偏りにその国の特色が現れます。\n","pinned":false,"hidden":false,"mode":"md"},{"id":1798,"value":"### 大きさの偏り\n役割での分類を取り払ったので、各選手のチームに対する占める割合はわかりやすくなっています。
\nそのため、チームの顔とも言える絶対的な中心選手がいる国は大きく偏ることになります。その選手を中心に戦術を組むことが多くなるため、特定の選手への依存度が高い国だと言えます。
\n一概にそれがいいことかどうかを判断することは難しいですが、パフォーマンスの安定感には大きく関わる部分です。","pinned":false,"hidden":false,"mode":"md"},{"id":1803,"value":"### 色の偏り\nヨーロッパ(特に5大リーグと呼ばれるイングランド、ドイツ、イタリア、スペイン、フランス)とそれ以外の国で大きく異なっています。
\n例として日本代表の価値の高い選手たちは軒並み海外でプレーしていますが、イングランド代表はほぼ全員が国内でプレーしています。
\nこのことからヨーロッパのチームで評価されることが選手としての価値を高めることに直結していることがわかります。
","pinned":false,"hidden":false,"mode":"md"},{"id":2436,"value":"逆に、ヨーロッパ以外の国に限って言えば海外でプレーしている選手が多いほどレベルは高いと言えます。","pinned":false,"hidden":false,"mode":"md"},{"id":2277,"value":"FileAttachment(\"huramengo.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2281,"value":"##### クラブチーム市場価値ランキングでは63位でようやくヨーロッパ以外のチームが出てくる。","pinned":false,"hidden":false,"mode":"md"},{"id":2094,"value":"サッカーは世界中で人気ですが、クラブチームの規模やレベルで考えるとどうしてもヨーロッパが中心であると言わざるを得ません。国外に出ていかなくても、注目されるようなレベルに自国のリーグを育てることが強豪国への第一歩と言えます。","pinned":false,"hidden":false,"mode":"md"},{"id":2098,"value":"## 日本代表","pinned":false,"hidden":false,"mode":"md"},{"id":2173,"value":"さらに的を絞って、日本代表のみを時系列で見てみたいと思います。","pinned":false,"hidden":false,"mode":"md"},{"id":2232,"value":"ワールドカップ開催年(4年ごと)の歴代の日本代表をドーナツグラフで表しています。\n円の大きさには市場価値を反映しています。色分けはツリーマップと同様に所属チームの所在です。","pinned":false,"hidden":false,"mode":"md"},{"id":2178,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2239,"value":"日本代表の価値は大きく上がっていることがわかります。またそれに伴い海外でプレーする選手も大幅に増えています。
\n先ほどのツリーマップと読み取れることは同じですが、時系列で見てみると成長具合を見ることができます。","pinned":false,"hidden":false,"mode":"md"},{"id":922,"value":"# まとめ","pinned":false,"hidden":false,"mode":"md"},{"id":2139,"value":"市場価値というデータ一つだけでも様々な角度から分析、視覚化できました。
\nまた、構成する要素の多さはチームスポーツの大きな魅力の一つです。","pinned":false,"hidden":false,"mode":"md"},{"id":2272,"value":"クラブチーム同士では選手のやり取りが存在するため、勢力図が複雑に変わっていったり、そもそも試合に出すメンバーで駆け引きがあったり......
\n分析する対象は無数にあります。","pinned":false,"hidden":false,"mode":"md"},{"id":2382,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2251,"value":"個人的にはチームスポーツのこういった概念的な面白さはRPGなどのゲームで役職の特徴を踏まえてパーティのバランスを考察してみたり、といった楽しさに似ていると思っています。
スポーツとなると物理的な楽しみを想像しがちですが、俯瞰的な視点でゲームのように楽しむことの面白さや奥深さが少しでも伝わればうれしいです。","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"dataset = d3.tsv(url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTymAvtz6CVFXrss54PuIMew7iWJr9R6aix0rD9RzvowfqQp4VNEMdvw_qHWOuElCl35OFtxDSQWEmI/pub?output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"dataset2 = d3.tsv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTymAvtz6CVFXrss54PuIMew7iWJr9R6aix0rD9RzvowfqQp4VNEMdvw_qHWOuElCl35OFtxDSQWEmI/pub?gid=1004641848&single=true&output=tsv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"mbappe = d3.tsv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS30Gv77CxnwPRpvxwOylQHZ3WUzN5HTnuiffM9musyqNCjtKUKHR3K_c1VbraDzdlSSGwZ9YYDHM7o/pub?output=tsv\",\n d3.autotype\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"import { countries } from \"3e9fafdd9289223c\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"nestedData = d3.group(dataOfCountry, (d) => d.position)","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"nestedData2 = d3.group(dataOfCountry, (d) => d.trikotNumber)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"nestedData3 = d3.group(dataOfCountry2, (d) => d.position)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1922,"value":"nestedData4 = d3.group(dataOfCountry4, (d) => d.position)","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"root = d3\n .hierarchy(nestedData)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"root2 = d3\n .hierarchy(nestedData2)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1561,"value":"root3 = d3\n .hierarchy(nestedData3)\n .sum((d) => d.value)\n //.sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1926,"value":"root4 = d3.hierarchy(nestedData4).sum((d) => d.value)\n//.sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2184,"value":"japaneseData = d3.csv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSK5CqThzqG3zN_dTmAc8GVQC_iMHxN9Im4TcexEXyPoeZN3E49ncQKDdtNlJZpMr7_8StthLj8pbuG/pub?output=csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2309,"value":"messi = d3.tsv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQmq0qUjsihNJCtjRTiEdCMFsI2pzuSyc0m4SXJVhblIMKarWKM6KF9OEnaRSpmyqqmIfUw6JbT81TU/pub?output=tsv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2706,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":663,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}