45:["$","title",null,{"children":"サッカーを金額から見たらどうなるのか | 2022 TMU DataViz | Observable"}] 4d: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(); }4e: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(); }4f: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(); }50: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(); }51:[{"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}] 49:{"id":"63d9aba278768c03","slug":"fukatsu-final-project","title":"サッカーを金額から見たらどうなるのか","thumbnail":"9c1ab9bf2830cf1988b64eda1aa2a8016a1bb4f7e7939a3db7354c9141553375","access_level":"public","create_time":"$D2022-12-09T04:00:49.348Z","update_time":"$D2023-06-19T15:41:39.206Z","view_time":null,"first_public_time":"$D2022-12-09T04:00:49.348Z","has_unpublished_edits":null,"fork":{"id":"0d6d245a0cf9c162","slug":"class-final-project","title":"[class] 最終課題の企画","owner":{"id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz","avatar_url":"https://avatars-next.observableusercontent.com/20a88d07d4e0d57432f57ec54df2aa13774d478859b8015b6c3fcddf28aac5f5","tier":"starter_2024","bio":"Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab","followed_by_you":false,"follows_you":false},"version":2713,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ae2a00605d0a012","login":"nbfx029","name":"fukatsu kensuke","avatar_url":"https://avatars-next.observableusercontent.com/fae3875ea99c7648f354f7d6b459ebd3ef1ac9d8bdcc0ae148866d67278e059c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz","avatar_url":"https://avatars-next.observableusercontent.com/20a88d07d4e0d57432f57ec54df2aa13774d478859b8015b6c3fcddf28aac5f5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3ae2a00605d0a012","login":"nbfx029","name":"fukatsu kensuke","avatar_url":"https://avatars-next.observableusercontent.com/fae3875ea99c7648f354f7d6b459ebd3ef1ac9d8bdcc0ae148866d67278e059c","tier":null,"role":"editor"}],"comments":[{"id":"29f728616dfbdb38","reply_to_id":null,"content":"色分けより選択式がいいかも","create_time":"$D2023-01-20T08:24:47.869Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3ae2a00605d0a012","login":"nbfx029","name":"fukatsu kensuke","avatar_url":"https://avatars-next.observableusercontent.com/fae3875ea99c7648f354f7d6b459ebd3ef1ac9d8bdcc0ae148866d67278e059c","tier":null}},{"id":"b978696b6a9001d6","reply_to_id":null,"content":"国名表示と国が二つ並んでることをわかりやすくする","create_time":"$D2023-02-03T07:50:45.685Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3ae2a00605d0a012","login":"nbfx029","name":"fukatsu kensuke","avatar_url":"https://avatars-next.observableusercontent.com/fae3875ea99c7648f354f7d6b459ebd3ef1ac9d8bdcc0ae148866d67278e059c","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"サッカーを金額から見たらどうなるのか","cells":[{"id":0,"value":"# サッカーを金額から見たらどうなるのか","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":987,"value":"FileAttachment(\"family_tv_soccer2@1.png\").image({ height: 300 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"## 概要","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"みなさんサッカーを観ることはありますか。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1389,"value":"去年はワールドカップもあり、話題にあがることも多かったサッカーですが、\n興味がない人からすると人気なのは知ってるけどたまに目にするニュースがどれくらいすごいことなのか分からない......という人が多いんじゃないでしょうか。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2110,"value":"そこで、この記事ではサッカーに関するお金のデータに絞って可視化してみることにより、競技そのものにはあまり興味のない人にもサッカーの話題を視覚的に面白く、わかりやすく伝えられる記事を目指します。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1298,"value":"## 扱うデータ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1306,"value":"### 市場価値\n選手の年齢や成績、役割などから将来性や注目度を金額で表したものになります。
\n実際に支払われている給料とは違いますが、総合的に選手の価値を数値化しているので給料や移籍金の目安になります。
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"### 世界ランキング\nFIFA(国際サッカー連盟)が発表している国別代表の世界ランキングです。\n試合結果により足し引きされるポイントで順位がついています。
\nもらえるポイントは対戦相手の順位によって変動するため、格上に勝てば多くもらえますし、逆に格下に負けると大幅にマイナスされることになります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2476,"value":"##### (単位として出てくる1m€は現在のレートで1400万円ほどです。)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1320,"value":"# 代表チームでみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1615,"value":"イメージしやすくするためクラブチームではなく、各国代表チームを**市場価値**をもとに分析していきます。
\nワールドカップでは26人まで登録することができます。
\n(23人までだったルールがコロナにより変更)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1641,"value":"## 市場価値順に並べてみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1643,"value":"世界ランキング1~30位までの国を対象に、2022年の代表チームの**市場価値の合計**を棒グラフで表しました。
\n横軸は合計市場価値、縦軸は**rank**の文字をクリックすることで市場価値順と世界ランキング順にソートできます。\nその国の地域によって色を変えています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1162,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"ポジション（役割）が選手によって違うため、単純に値段が高い人を上から26人呼ぶ！というわけにはいかないのですが、やはり強い国は価値の高い選手が揃っているので合計金額も大きくなります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1682,"value":"\nチーム数では圧倒的にヨーロッパが多く、市場価値でいうと上位はヨーロッパと南米が占めていることが見てとれます。
\nグラフにはアジア地域も4チームいますが、いずれもチームの価値はこの中では低めだということがわかります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1992,"value":"## 比較しやすくしてみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1999,"value":"同じく2022年の選出に基づいて、国ごとに合計市場価値と各選手の市場価値を面積に反映させたツリーマップにしました。
\n選手の大まかな役割ごとにブロックを作り、色分けしています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2068,"value":"##### FW(赤): 攻撃の選手
\n##### MF(灰): 真ん中の選手
\n##### DF(薄い青): 守備の選手
\n##### GK(濃い青):　ゴールキーパー","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1545,"value":"viewof dataOfCountry2 = Inputs.select(countries, {\n value: countries.get(\"日本\"),\n label: \"country1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1918,"value":"viewof dataOfCountry4 = Inputs.select(countries, {\n value: countries.get(\"ドイツ\"),\n label: \"country2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2041,"value":"好きな国を選んでぜひ比較してみてください。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2584,"value":"### 使用例","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2440,"value":"FileAttachment(\"groupe.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2452,"value":"

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