30:T3dc1,class PLChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); // console.log(this.data); this.team = config["team"]; this.plKeys = config["plKeys"]; this.yExtent = config["yExtent"]; this.titleFontSize = config["titleFontSize"] || 25; this.textAngle = config["textAngle"] || -30; this.detail = config["detail"]; this.setAxes(); this.writeHtml(); } writeHtml() { d3.select(`${this.rootSelector} .team`).html(this.team); d3.select(`${this.rootSelector} .desc`).html( `当期純利益: ${ parseFormattedNumber( this.data.find((d) => d.大分類 === "当期純利益")[this.team] ) / 100 } (億円）` ); } setAxes() { this.sx = d3 .scaleBand() .domain(this.plKeys) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleLinear() .domain(this.yExtent) .range([this.height - this.margin.bottom, this.margin.top]); } drawAxes() { this.svg .append("g") .append("line") .attr("x1", this.margin.left) .attr("x2", this.width - this.margin.right) .attr("y1", this.sy(0)) .attr("y2", this.sy(0)) .attr("stroke", "#888") .attr("stroke-dasharray", "8 4"); const yaxis = d3.axisLeft(this.sy); this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis) .selectAll("text") .text((d) => `${d / 100}億円`); } drawSales() { this.svg .append("g") .selectAll("rect") .data(getCumsum(this.data, "売上高", this.team)) .join("rect") .attr("x", (d) => this.sx(d.name)) .attr("y", (d) => this.sy(d.value)) .attr("width", this.sx.bandwidth()) .attr("height", 0) .attr("fill", "red") .attr("opacity", 0.5) .attr( "value", (d) => this.data.find((d_) => getKey(d_) === d.name)[this.team] ) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)) .transition() .duration(1000) .delay((_, i) => i * 100) .attr("height", (d, i) => i === 0 ? this.sy(0) - this.sy(d.value) : this.sy(getCumsum(this.data, "売上高", this.team)[i - 1].value) - this.sy(d.value) ); this.svg .append("g") .selectAll("text") .data(getCumsum(this.data, "売上高", this.team)) .join("text") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => i === 0 ? this.sy(0) : this.sy(getCumsum(this.data, "売上高", this.team)[i - 1].value) ) .attr("font-size", 10) .attr("transform", (d, i) => { const x = this.sx(d.name); const y = i === 0 ? this.sy(0) : this.sy(getCumsum(this.data, "売上高", this.team)[i - 1].value); return `rotate(${this.textAngle}, ${x}, ${y})`; }) .text((d) => (this.detail ? d.name.split("-")[1] : "")); } drawCosts() { function getY(thisClass, d, i) { return i === 0 ? d3.max( getCumsum(thisClass.data, "売上高", thisClass.team), (d) => d.value ) : d3.max( getCumsum(thisClass.data, "売上高", thisClass.team), (d) => d.value - getCumsum(thisClass.data, "売上原価", thisClass.team)[i - 1].value ); } this.svg .append("g") .selectAll("rect") .data(getCumsum(this.data, "売上原価", this.team)) .join("rect") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("width", this.sx.bandwidth()) .attr("height", 0) .attr("fill", "blue") .attr("opacity", 0.5) .attr( "value", (d) => this.data.find((d_) => getKey(d_) === d.name)[this.team] ) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)) .transition() .duration(1000) .delay((_, i) => i * 100 + 700) .attr("height", (d, i) => i === 0 ? this.sy(0) - this.sy(d.value) : this.sy(getCumsum(this.data, "売上原価", this.team)[i - 1].value) - this.sy(d.value) ); this.svg .append("g") .selectAll("text") .data(getCumsum(this.data, "売上原価", this.team)) .join("text") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("font-size", 10) .attr("transform", (d, i) => { const x = this.sx(d.name); const y = this.sy(getY(this, d, i)); return `rotate(${this.textAngle}, ${x}, ${y})`; }) .text((d) => (this.detail ? d.name.split("-")[1] : "")); } drawSGaA() { function getY(thisClass, d, i) { return ( d3.max( getCumsum(thisClass.data, "売上高", thisClass.team), (d) => d.value ) - d3.max( getCumsum(thisClass.data, "売上原価", thisClass.team), (d) => d.value ) ); } this.svg .append("g") .selectAll("rect") .data(getCumsum(this.data, "販売費および一般管理費", this.team)) .join("rect") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("width", this.sx.bandwidth()) .attr("height", 0) .attr("fill", "blue") .attr("opacity", 0.5) .attr( "value", (d) => this.data.find((d_) => getKey(d_) === d.name)[this.team] ) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)) .transition() .duration(1000) .delay((_, i) => i * 100 + 1400) .attr("height", (d, i) => this.sy(0) - this.sy(d.value)); this.svg .append("g") .selectAll("text") .data(getCumsum(this.data, "販売費および一般管理費", this.team)) .join("text") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("font-size", 10) .attr("transform", (d, i) => { const x = this.sx(d.name); const y = this.sy(getY(this, d, i)); return `rotate(${this.textAngle}, ${x}, ${y})`; }) .text((d) => (this.detail ? d.name.split("-")[1] : "")); } drawNonOperatingIncome() { function getY(thisClass, d, i) { const base = d3.max( getCumsum(thisClass.data, "売上高", thisClass.team), (d) => d.value ) - d3.max( getCumsum(thisClass.data, "売上原価", thisClass.team), (d) => d.value ) - d3.max( getCumsum(thisClass.data, "販売費および一般管理費", thisClass.team), (d) => d.value ) + d.value; if (i === 0) return base; return ( base + parseFormattedNumber( thisClass.data.find((d) => d.小分類 === "営業外費用")[thisClass.team] ) - d.value ); } this.svg .append("g") .selectAll("rect") .data(getCumsum(this.data, "経常利益", this.team)) .join("rect") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("width", this.sx.bandwidth()) .attr("height", 0) .attr("fill", (d) => (d.name === "経常利益-営業外収益" ? "red" : "blue")) .attr("opacity", 0.5) .attr( "value", (d) => this.data.find((d_) => getKey(d_) === d.name)[this.team] ) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)) .transition() .duration(1000) .delay((_, i) => i * 100 + 1500) .attr("height", (d) => { const value = parseFormattedNumber( this.data.find((d_) => getKey(d_) === d.name)[this.team] ); return this.sy(0) - this.sy(value); }); this.svg .append("g") .selectAll("text") .data(getCumsum(this.data, "経常利益", this.team)) .join("text") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("font-size", 10) .attr("transform", (d, i) => { const x = this.sx(d.name); const y = this.sy(getY(this, d, i)); return `rotate(${this.textAngle}, ${x}, ${y})`; }) .text((d) => (this.detail ? d.name.split("-")[1] : "")); } drawSpecialIncome() { function getY(thisClass, d, i) { const base = d3.max( getCumsum(thisClass.data, "売上高", thisClass.team), (d) => d.value ) - d3.max( getCumsum(thisClass.data, "売上原価", thisClass.team), (d) => d.value ) - d3.max( getCumsum(thisClass.data, "販売費および一般管理費", thisClass.team), (d) => d.value ) + parseFormattedNumber( thisClass.data.find((d) => d.小分類 === "営業外収益")[thisClass.team] ) - parseFormattedNumber( thisClass.data.find((d) => d.小分類 === "営業外費用")[thisClass.team] ) + d.value; if (i === 0) return base; return ( base + getCumsum(thisClass.data, "税引前当期利益", thisClass.team)[0].value - d.value ); } this.svg .append("g") .selectAll("rect") .data(getCumsum(this.data, "税引前当期利益", this.team)) .join("rect") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("width", this.sx.bandwidth()) .attr("height", 0) .attr( "value", (d) => this.data.find((d_) => getKey(d_) === d.name)[this.team] ) .attr("fill", (d) => d.name === "税引前当期利益-特別利益" ? "red" : "blue" ) .attr("opacity", 0.5) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)) .transition() .duration(1000) .delay((_, i) => i * 100 + 1700) .attr("height", (d) => { const value = parseFormattedNumber( this.data.find((d_) => getKey(d_) === d.name)[this.team] ); return this.sy(0) - this.sy(value); }); this.svg .append("g") .selectAll("text") .data(getCumsum(this.data, "税引前当期利益", this.team)) .join("text") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("font-size", 10) .attr("transform", (d, i) => { const x = this.sx(d.name); const y = this.sy(getY(this, d, i)); return `rotate(${this.textAngle}, ${x}, ${y})`; }) .text((d) => (this.detail ? d.name.split("-")[1] : "")); } drawTaxes() { function getY(thisClass, d, i) { return ( d3.max( getCumsum(thisClass.data, "売上高", thisClass.team), (d) => d.value ) - d3.max( getCumsum(thisClass.data, "売上原価", thisClass.team), (d) => d.value ) - d3.max( getCumsum(thisClass.data, "販売費および一般管理費", thisClass.team), (d) => d.value ) + parseFormattedNumber( thisClass.data.find((d) => d.小分類 === "営業外収益")[thisClass.team] ) - parseFormattedNumber( thisClass.data.find((d) => d.小分類 === "営業外費用")[thisClass.team] ) + parseFormattedNumber( thisClass.data.find((d) => d.小分類 === "特別利益")[thisClass.team] ) - parseFormattedNumber( thisClass.data.find((d) => d.小分類 === "特別損失")[thisClass.team] ) ); } this.svg .append("g") .selectAll("rect") .data(getCumsum(this.data, "法人税および住民税等", this.team)) .join("rect") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("width", this.sx.bandwidth()) .attr("height", 0) .attr("fill", "blue") .attr("opacity", 0.5) .attr( "value", (d) => this.data.find((d_) => getKey(d_) === d.name)[this.team] ) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)) .transition() .duration(1000) .delay((_, i) => i * 100 + 1800) .attr("height", (d, i) => this.sy(0) - this.sy(d.value)); this.svg .append("g") .selectAll("text") .data(getCumsum(this.data, "法人税および住民税等", this.team)) .join("text") .attr("x", (d) => this.sx(d.name)) .attr("y", (d, i) => this.sy(getY(this, d, i))) .attr("font-size", 10) .attr("transform", (d, i) => { const x = this.sx(d.name); const y = this.sy(getY(this, d, i)); return `rotate(${this.textAngle}, ${x}, ${y})`; }) .text((d) => (this.detail ? "法人税など" : "")); } drawNetIncomeLine() { const income = parseFormattedNumber( this.data.find((d) => d.大分類 === "当期純利益")[this.team] ); this.svg .append("g") .append("line") .attr("x1", this.margin.left) .attr("x2", this.width - this.margin.right) .attr("y1", this.sy(income)) .attr("y2", this.sy(income)) .attr("stroke", income < 0 ? "#800" : "#080") .attr("stroke-dasharray", "4 4"); } drawTitle() { const profit = parseFormattedNumber( this.data.find((d) => d.大分類 === "当期純利益")[this.team] ); console.log(this.team, profit, this.data); const desc = `当期純利益: ${profit / 100} (億円）`; this.svg .append("g") .append("text") .attr("x", this.margin.left) .attr("y", this.margin.top + this.titleFontSize) .attr("font-size", this.titleFontSize) .attr("fill", profit < 0 ? "#800" : profit === 0 ? "#888" : "#080") .text( profit ? `${this.team}: ${desc}` : `${this.team}: 3月決算のためデータなし` ); } mouseover(thisClass, event, d) { drawRankingChart( [...pl_bs2022PlJ1, ...pl_bs2022PlJ2, ...pl_bs2022PlJ3], `${thisClass.rootSelector} .ranking`, { height: 500, width: 700, margin: { top: 30, bottom: 20, left: 50, right: 10 }, key: d.name, j1Teams: j1Teams, j2Teams: j2Teams, j3Teams: j3Teams, selectedTeams: [thisClass.team] } ); thisClass.tooltip.show(event, d); } mousemove(thisClass, event, d) { const value = parseFormattedNumber(d3.select(this).attr("value")); thisClass.tooltip.setText( `(${thisClass.team})${d.name}: ${value / 100}億円` ); thisClass.tooltip.move(event, d); } mouseleave(thisClass, event, d) { thisClass.tooltip.hide(event, d); } draw() { this.drawAxes(); this.drawSales(); this.drawCosts(); this.drawSGaA(); this.drawNonOperatingIncome(); this.drawSpecialIncome(); this.drawTaxes(); this.drawNetIncomeLine(); this.drawTitle(); } }31:Tc90,class RankingChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.key = config["key"]; this.data = this.data .filter((d) => getKey(d) === this.key) .map((d) => splitDictionary(d, ["大分類", "小分類"])) .flat() .sort((a, b) => d3.descending(a.value, b.value)); this.j1Teams = config["j1Teams"]; this.j2Teams = config["j2Teams"]; this.j3Teams = config["j3Teams"]; this.selectedTeams = config["selectedTeams"]; this.xMin = d3.min([0, d3.min(this.data, (d) => d.value)]); this.setAxes(); } setAxes() { this.sx = d3 .scaleLinear() .domain([this.xMin, d3.max(this.data, (d) => d.value)]) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleBand() .domain(this.data.map((d) => d.key)) .range([this.margin.top, this.height - this.margin.bottom]); } drawAxes() { const xaxis = d3.axisBottom(this.sx); this.svg .append("g") .attr("transform", `translate(0,${this.height - this.margin.bottom})`) .call(xaxis) .selectAll("text") .attr("font-size", 10) .text((d) => `${d / 100}億円`); const yaxis = d3.axisLeft(this.sy).tickSize(0); this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis) .selectAll("text") .attr("font-size", 8) .attr("text-anchor", (d) => { if (this.data.find((d_) => d_.key === d).value < 0) return "start"; return "end"; }) .attr("x", this.sx(0) - this.margin.left); } drawAuxiliaryLines() { this.svg .append("g") .selectAll("line") .data(this.sx.ticks()) .join("line") .attr("x1", (d) => this.sx(d)) .attr("x2", (d) => this.sx(d)) .attr("y1", d3.min(this.sy.range())) .attr("y2", d3.max(this.sy.range())) .attr("stroke", "#888") .attr("stroke-dasharray", "4 4"); } drawData() { this.svg .append("g") .selectAll("rect") .data(this.data) .join("rect") .attr("x", (d) => (d.value < 0 ? this.sx(d.value) : this.sx(0))) .attr("width", (d) => d.value < 0 ? this.sx(0) - this.sx(d.value) : this.sx(d.value) - this.sx(0) ) .attr("y", (d) => this.sy(d.key)) .attr("height", this.sy.bandwidth()) .attr("fill", (d) => this.teamColor(d)) .attr("opacity", (d) => this.teamOpacity(d)); } teamOpacity(d) { if (this.selectedTeams.includes(d.key)) return 0.8; if (d.key.split("\n ")[1] === "平均") return 0.1; return 0.4; } teamColor(d) { if (this.j1Teams.includes(d.key)) return "red"; if (this.j2Teams.includes(d.key)) return "green"; if (this.j3Teams.includes(d.key)) return "#888"; return "blue"; } drawTitle() { this.svg .append("g") .append("text") .attr("x", d3.min(this.sx.range())) .attr("y", d3.min(this.sy.range())) .attr("font-size", 24) .text(`${this.key} (${this.selectedTeams})`); } draw() { this.drawAxes(); this.drawAuxiliaryLines(); this.drawData(); this.drawTitle(); } }32:T81e,class tsneChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.teams = config["teams"]; this.setAxes(); } setAxes() { this.sx = d3 .scaleLinear() .domain(d3.extent(this.data, (d) => d[0])) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleLinear() .domain(d3.extent(this.data, (d) => d[1])) .range([this.height - this.margin.bottom, this.margin.top]); } drawAxes() { const xaxis = d3.axisBottom(this.sx).ticks(0); this.svg .append("g") .attr("transform", `translate(0,${this.height - this.margin.bottom})`) .call(xaxis); const yaxis = d3.axisLeft(this.sy).ticks(0); this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis); } drawMain() { this.svg .append("g") .selectAll("circle") .data(this.data) .join("circle") .attr("cx", (d) => this.sx(d[0])) .attr("cy", (d) => this.sx(d[1])) .attr("stroke", "#ccc") .attr("fill", "#fff") .attr("r", 5) .attr("index", (_, i) => i) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)); this.svg .append("g") .selectAll("text") .data(this.data) .join("text") .attr("x", (d) => this.sx(d[0])) .attr("y", (d) => this.sx(d[1])) .attr("dy", -5) .attr("text-anchor", "middle") .attr("font-size", 10) .text((_, i) => this.teams[i]); } draw() { this.drawAxes(); this.drawMain(); } mouseover(thisClass, event, d) { drawPLChart(pl_bs2022PlJ1, `${thisClass.rootSelector} .detail`, { height: 500, width: 600, margin: { top: 10, bottom: 20, left: 50, right: 10 }, team: thisClass.teams[d3.select(this).attr("index")], yExtent: [-10000, 10000], plKeys: getPLKeys(pl_bs2022PlJ1), detail: true }); } }33:[{"id":"9a7af46a08ea49ba56c33f6bb246183fd14f5c4307906dc71bab3d46957e2c2e6ddd77f7a0853f51fdcb9d486a0cbd7c353ea21687afc178c5e4b8dff4affbc9","href":"https://static.observableusercontent.com/files/9a7af46a08ea49ba56c33f6bb246183fd14f5c4307906dc71bab3d46957e2c2e6ddd77f7a0853f51fdcb9d486a0cbd7c353ea21687afc178c5e4b8dff4affbc9","name":"PL_BS 2022 - PL-J1@3.csv","type":"text/csv","lastModified":1686769992458.946,"size":3402},{"id":"a0f2bd28b98285250ed4949db555cc9705afac5dafadea3965498230914107396d061d52a8b9c0a57b42435dcb3ef83fac54a22f7bdc33c5a31d99e0de3b3111","href":"https://static.observableusercontent.com/files/a0f2bd28b98285250ed4949db555cc9705afac5dafadea3965498230914107396d061d52a8b9c0a57b42435dcb3ef83fac54a22f7bdc33c5a31d99e0de3b3111","name":"PL_BS 2022 - PL-J2@3.csv","type":"text/csv","lastModified":1686769992458.946,"size":3864},{"id":"b60f5728e5a4673bd479dd288d6d1e43021f11fa753170947202c5551d15d5f6d17e1d0de30d91d6da6c4aa66ea47cbc24ece4d82143ce8bf4c8820e8aa17dc6","href":"https://static.observableusercontent.com/files/b60f5728e5a4673bd479dd288d6d1e43021f11fa753170947202c5551d15d5f6d17e1d0de30d91d6da6c4aa66ea47cbc24ece4d82143ce8bf4c8820e8aa17dc6","name":"PL_BS 2022 - PL-J3@3.csv","type":"text/csv","lastModified":1686769992458.946,"size":3201},{"id":"93e2389324a3767b54adcf91411e22b68385420000c19e1c443018298dc0cca2bf8167550114d5568e518dc527faaf2474d8bea640de4e6134cd6020a9cfe80f","href":"https://static.observableusercontent.com/files/93e2389324a3767b54adcf91411e22b68385420000c19e1c443018298dc0cca2bf8167550114d5568e518dc527faaf2474d8bea640de4e6134cd6020a9cfe80f","name":"PL_BS 2022 - BS-J1.csv","type":"text/csv","lastModified":1686769992458.946,"size":1630}] 2e:{"title":"J.League 損益計算書可視化","cells":[{"id":0,"value":"# J.League 損益計算書可視化","pinned":false,"hidden":false,"mode":"md"},{"id":716,"value":"viewof team = Inputs.radio(\n Object.keys(pl_bs2022PlJ1[0]).filter(\n (d) =>\n ![\"大分類\", \"小分類\", \"\"].includes(d) && d.split(\"\\n \")[1] !== \"総合計\"\n ),\n { label: \"J1 Team (2022)\", value: \"浦和\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"costOfMarchandiseSales","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":737,"value":"viewof key = Inputs.select(\n pl_bs2022PlJ1.map((d) => getKey(d)),\n { label: \"Select key\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":741,"value":"## リーグごと","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"

J1

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":724,"value":"

J2

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":728,"value":"

J3

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":765,"value":"## 指標","pinned":false,"hidden":false,"mode":"md"},{"id":790,"value":"salesName = '売上高-合計'","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"marchandiseCostName = '物販関連費'","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"marchandiseSalesName = \"物販収入\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"### 売上総利益率","pinned":false,"hidden":false,"mode":"md"},{"id":772,"value":"function calculateGrossProfitMargin(grossProfit, netSales) {\n return (grossProfit / netSales) * 100;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"pl_bs2022PlJ1","pinned":true,"hidden":false,"mode":"ojs"},{"id":774,"value":"### 売上原価率","pinned":false,"hidden":false,"mode":"md"},{"id":776,"value":"function calculateCostOfSalesRatio(costOfSales, netSales) {\n return (costOfSales / netSales) * 100;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"function calculateCostOfMarchandiseSalesRatio(data, team) {\n const sales = parseInt(\n parseFormattedNumber(\n data.find((d) => d[\"小分類\"] === marchandiseSalesName)[team]\n )\n );\n const cost = parseInt(\n parseFormattedNumber(\n data.find((d) => d[\"小分類\"] === marchandiseCostName)[team]\n )\n );\n\n console.log(sales, cost);\n\n return calculateCostOfSalesRatio(cost, sales);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"costOfMarchandiseSales = calculateCostOfMarchandiseSalesRatio(\n pl_bs2022PlJ1,\n team\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"pl_bs2022BsJ1 = await FileAttachment(\"PL_BS 2022 - BS-J1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"pl_bs2022PlJ1 = await FileAttachment(\"PL_BS 2022 - PL-J1@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"import { GeneralChart } from \"@gshirato/chart-class\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"d3.max(getCumsum(pl_bs2022PlJ1, \"売上高\", \"浦和\"), (d) => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"function parseFormattedNumber(formattedNumber) {\n return Number(`${formattedNumber}`.replace(/,/g, \"\").replace(/▲ /g, \"-\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"function drawPLChart(data, selector, config) {\n new PLChart(data, selector, config).draw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"function getCumsum(data, genre, team) {\n let filteredData = data\n .filter((d) => d[\"大分類\"] === genre)\n .filter((d) => ![\"合計\", \"小計\"].includes(d[\"小分類\"]));\n let cumsum = 0;\n return filteredData.map((d) => {\n cumsum += parseFormattedNumber(d[team]);\n return { value: cumsum, name: getKey(d) };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"drawPLChart(pl_bs2022PlJ1, \"#pl-chart .chart\", {\n height: 500,\n width: 600,\n margin: { top: 10, bottom: 20, left: 50, right: 10 },\n team: team,\n yExtent: [-10000, 10000],\n plKeys: getPLKeys(pl_bs2022PlJ1),\n detail: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"function getPLKeys(plData) {\n return plData\n .filter((d) => ![\"合計\", \"小計\"].includes(d[\"小分類\"]))\n .map((d) => getKey(d));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"function getKey(d) {\n return `${d[\"大分類\"]}-${d[\"小分類\"]}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"## Multiple teams","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"function drawPLCharts(data, selector, config) {\n const teams = Object.keys(data[0]).filter(\n (d) => ![\"大分類\", \"小分類\", \"\"].includes(d)\n );\n\n for (const team of teams) {\n drawPLChart(data, `${selector} .${team}`, {\n team: team,\n ...config\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"class Grid {\n constructor(selector, config) {\n d3.select(selector).selectAll(\"div\").remove();\n this.root = d3.select(selector);\n this.dimension = config[\"dimension\"];\n this.margin = config[\"margin\"];\n this.teams = config[\"teams\"];\n }\n\n draw() {\n let count = 0;\n for (let i = 0; i < this.dimension.nRows; ++i) {\n const row = this.root\n .append(\"div\")\n .attr(\"class\", \"row\")\n .style(\"display\", \"flex\");\n for (let j = 0; j < this.dimension.nColumns; ++j) {\n const team = this.teams[count];\n const column = row\n .append(\"div\")\n .attr(\"class\", team)\n .style(\"height\", this.dimension.height)\n .style(\"width\", this.dimension.width);\n\n count++;\n }\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"function setDivGrid(selector, config) {\n new Grid(selector, config).draw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"function drawGrid(data, selector, configChart, configGrid) {\n setDivGrid(selector, configGrid);\n drawPLCharts(data, selector, configChart);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"drawGrid(\n pl_bs2022PlJ1,\n \"#teamGrid-J1 .charts .waterfall\",\n {\n height: 300,\n width: 300,\n margin: { top: 10, bottom: 20, left: 50, right: 10 },\n yExtent: [-2000, 10000],\n plKeys: getPLKeys(pl_bs2022PlJ1),\n detail: false,\n titleFontSize: 17,\n nRows: 4,\n nColumns: 5\n },\n {\n dimension: {\n height: 200,\n width: 200,\n nRows: 4,\n nColumns: 5\n },\n margin: { top: 10, bottom: 10, left: 10, right: 10 },\n teams: getTeamList(pl_bs2022PlJ1[0])\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"drawGrid(\n pl_bs2022PlJ2,\n \"#teamGrid-J2 .charts .waterfall\",\n {\n height: 300,\n width: 300,\n margin: { top: 10, bottom: 20, left: 50, right: 10 },\n yExtent: [-1000, 4000],\n plKeys: getPLKeys(pl_bs2022PlJ2),\n detail: false,\n titleFontSize: 17,\n nRows: 4,\n nColumns: 5\n },\n {\n dimension: {\n height: 200,\n width: 200,\n nRows: 4,\n nColumns: 6\n },\n margin: { top: 10, bottom: 10, left: 10, right: 10 },\n teams: getTeamList(pl_bs2022PlJ2[0])\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"pl_bs2022PlJ2 = await FileAttachment(\"PL_BS 2022 - PL-J2@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"drawGrid(\n pl_bs2022PlJ3,\n \"#teamGrid-J3 .charts .waterfall\",\n {\n height: 300,\n width: 300,\n margin: { top: 10, bottom: 20, left: 50, right: 10 },\n yExtent: [-1000, 3000],\n plKeys: getPLKeys(pl_bs2022PlJ3),\n detail: false,\n titleFontSize: 17,\n nRows: 4,\n nColumns: 5\n },\n {\n dimension: {\n height: 200,\n width: 200,\n nRows: 4,\n nColumns: 5\n },\n margin: { top: 10, bottom: 10, left: 10, right: 10 },\n teams: getTeamList(pl_bs2022PlJ3[0])\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"pl_bs2022PlJ3 = await FileAttachment(\"PL_BS 2022 - PL-J3@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"function getTeamList(data) {\n return Object.keys(data).filter((d) => ![\"大分類\", \"小分類\", \"\"].includes(d));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"## Ranking","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"function splitDictionary(inputObj, commonKeys) {\n // Extract keys from the input object\n let inputKeys = Object.keys(inputObj);\n\n // Determine the unique keys by excluding the common ones\n let uniqueKeys = inputKeys.filter((key) => !commonKeys.includes(key));\n\n // Create the base object consisting of common keys only\n let baseObj = {};\n commonKeys.forEach((key) => (baseObj[key] = inputObj[key]));\n\n // Create an array of new objects, copying the base object and adding renamed unique keys\n let output = uniqueKeys\n .map((key) => {\n return {\n ...baseObj,\n key: key,\n value: parseFormattedNumber(inputObj[key])\n };\n })\n .filter((d) => d.value !== 0)\n .filter((d) => d.key.split(\"\\n \")[1] !== \"総合計\");\n\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"function drawRankingChart(data, selector, config) {\n new RankingChart(data, selector, config).draw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"drawRankingChart(\n [...pl_bs2022PlJ1, ...pl_bs2022PlJ2, ...pl_bs2022PlJ3],\n \"#test .ranking\",\n {\n height: 500,\n width: 700,\n margin: { top: 30, bottom: 20, left: 50, right: 10 },\n key: key,\n j1Teams: j1Teams,\n j2Teams: j2Teams,\n j3Teams: j3Teams,\n selectedTeams: [\"浦和\"]\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"## t-SNE","pinned":false,"hidden":false,"mode":"md"},{"id":880,"value":"tsnejs = require(\"https://raw.githack.com/karpathy/tsnejs/master/tsne.js\").then(\n null,\n (_) => window.tsnejs\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"pl_bs2022PlJ2","pinned":true,"hidden":false,"mode":"ojs"},{"id":827,"value":"function transpose(data) {\n const res = [];\n const teams = Object.keys(data[0]).filter(\n (d) => ![\"大分類\", \"小分類\", \"\"].includes(d) & !d.includes(\"\\n\")\n );\n for (const team of teams) {\n const teamInfo = { team: team };\n\n for (const item of data) {\n if (item[\"大分類\"] == \"\") continue;\n const largeCategory = item[\"大分類\"];\n teamInfo[largeCategory] = parseFormattedNumber(item[team]);\n }\n if (Object.values(teamInfo).includes(NaN)) continue;\n res.push(teamInfo);\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"transposed = [\n ...transpose(pl_bs2022PlJ1),\n ...transpose(pl_bs2022PlJ2),\n ...transpose(pl_bs2022PlJ3)\n].filter(\n (d) => (d[\"売上高\"] != 0) & ![\"Ｊ１\\n 総合計\", \"Ｊ１\\n 平均\"].includes(d.team)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"function normalize(data) {\n const res = [];\n for (const teamInfo of data) {\n const info = { team: teamInfo.team };\n const s = d3\n .scaleLinear()\n .domain(d3.extent(Object.values(teamInfo).splice(1)))\n .range([-1, 1]);\n\n for (const item of Object.keys(teamInfo).splice(1)) {\n info[item] = s(parseFormattedNumber(teamInfo[item]));\n }\n res.push(info);\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"normalized = normalize(transposed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"dataArray = normalized.map((d) => Object.values(d).slice(1, -1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"model = new tsnejs.tSNE({\n dim: 2,\n perplexity: perplexity\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"solution = {\n model.initDataRaw(normalized.map((d) => Object.values(d).slice(1, -1)));\n var cost = 100,\n cost0 = 0;\n while (Math.abs(cost - cost0) > 1e-6) {\n cost = cost0;\n cost0 = cost * 0.9 + 0.1 * model.step();\n // yield [cost, cost0];\n yield model.getSolution();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"function drawTsneChart(data, selector, config) {\n new tsneChart(data, selector, config).draw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"drawTsneChart(solution, \"#tsne .main\", {\n height: 500,\n width: 500,\n margin: { top: 10, bottom: 20, left: 20, right: 10 },\n teams: normalized.map((d) => d.team)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":951,"value":"viewof perplexity = Inputs.range([5, 50], {\n label: \"Perplexity\",\n step: 5,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":577,"value":"## variables","pinned":false,"hidden":false,"mode":"md"},{"id":579,"value":"j1Teams = getTeamList(pl_bs2022PlJ1[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"j2Teams = getTeamList(pl_bs2022PlJ2[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"j3Teams = getTeamList(pl_bs2022PlJ3[0])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}