2b:null 2c:["$","title",null,{"children":"売れてるゲームはどんな色で構成されているの？〜Nintendo〜 | TMU Dataviz Class | Observable"}] 31:T466,samplemosaic = { const container = DOM.element("div"); container.style.display = "flex"; container.style.justifyContent = "space-around"; // 均等配置 container.style.width = "700px"; container.style.margin = "20px auto"; const imgURL = "https://raw.githubusercontent.com/mmmmrrrnn/gameImages/refs/heads/main/IMG_3600.jpeg"; const originalImg = DOM.element("img"); originalImg.src = imgURL; originalImg.style.width = "300px"; originalImg.style.height = "auto"; const canvas = DOM.canvas(3, 3); const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "Anonymous"; img.src = imgURL; return new Promise((resolve) => { img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const mosaicImage = DOM.canvas(300, 300); const largeCtx = mosaicImage.getContext("2d"); largeCtx.imageSmoothingEnabled = false; largeCtx.drawImage(canvas, 0, 0, mosaicImage.width, mosaicImage.height); container.appendChild(originalImg); container.appendChild(mosaicImage); // resolve(container); }; }); }32:T1150,packageMosaic = { replay; const rowSize = 5; // 一行当たりのグラフ数 const radius = Math.min(width, width) / 11; const columnSpacing = radius * 1.8; // 横の間隔 const rowSpacing = radius * 2.3; // 縦の間隔 const startX = radius * 1.8; const startY = radius * 1.4; // 左上位置 const pixelSize = 1; // 色の抽出位置指定 const rowsNum = Math.ceil(packageImage.length / rowSize); // グラフの行数 const svgHeight = startY + rowsNum * rowSpacing; // スクロールのコンテナの高さ const container = d3 .create("div") .style("height", "640px") // 表示される高さ .style("overflow-x", "hidden"); // 横スクロールなし const svg = d3 .create("svg") .attr("width", width) .attr("height", svgHeight) .style("background", "#f5f5f5"); packageImage.forEach((imageUrl, index) => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 3; canvas.height = 3; // モザイク作成 const img = new Image(); img.crossOrigin = "Anonymous"; // 他サイトの画像対応 img.src = imageUrl; img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // canvasに画像を描画 let colorData = {}; let totalPixels = 0; // 色の出現回数 for (let y = 0; y < canvas.height; y += pixelSize) { for (let x = 0; x < canvas.width; x += pixelSize) { let pixel = ctx.getImageData(x, y, 1, 1).data; // 1ピクセルのRGBデータ取得 let r = pixel[0], g = pixel[1], b = pixel[2]; let color = `rgb(${r},${g},${b})`; if (!colorData[color]) { colorData[color] = 0; } colorData[color]++; totalPixels++; } } let colorArray = Object.entries(colorData).map(([color, count]) => { let rgb = color.match(/\d+/g).map(Number); // 文字列を数値に変換 return { color, r: rgb[0], g: rgb[1], b: rgb[2], value: count / totalPixels // 色の割合(%) }; }); colorArray.sort((a, b) => a.r - b.r || a.g - b.g || a.b - b.b); // 色並べ替え // 円グラフ作成 const arcs = d3.pie().value((d) => d.value); const arc = d3.arc().innerRadius(0).outerRadius(radius); const column = index % rowSize; // 列 const row = Math.floor(index / rowSize); // 行 const x = startX + column * columnSpacing; const y = startY + row * rowSpacing; // クリッピングパス（正方形にする） const clipId = `squareClip-${index}`; svg .append("defs") .append("clipPath") .attr("id", clipId) .append("rect") .attr("x", -radius * 0.7) .attr("y", -radius * 0.7) .attr("width", radius * 1.4) .attr("height", radius * 1.4) .attr("rx", radius * 0.2) .attr("ry", radius * 0.2); const g = svg .append("g") .attr("transform", `translate(${x}, ${y})`) .attr("clip-path", `url(#${clipId})`); // アニメーション円グラフ g.selectAll("path") .data(arcs(colorArray)) .enter() .append("path") .attr("fill", (d) => d.data.color) .attr("d", arc) .attr("opacity", 0) //透明度 .each(function (d) { this._current = { startAngle: 0, endAngle: 0 }; // 初期値 }) .transition() .delay(index * 300) // 300msごとに順番にアニメーション .duration(2000) //アニメーション時間 .attr("opacity", 1) .attrTween("d", function (d) { const interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d); return function (t) { return arc(interpolate(t)); }; }); // タイトル名 const text = svg .append("text") .attr("x", x) .attr("y", y + radius + 15) .attr("text-anchor", "middle") .attr("font-size", "8px") .attr("fill", "#333") .attr("opacity", 0) .text(titles[index]); text .transition() .delay(index * 300 + 1000) .duration(500) .attr("opacity", 1); }; }); container.node().appendChild(svg.node()); return container.node(); }33:T726,yearChart = { const width2 = width; const height = width2 / 1.5; const margin = { top: 20, right: width2 / 5, bottom: 50, left: 50 }; const colorData = name1; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("background", "#f5f5f5"); // x軸スケール const xScale = d3 .scaleLinear() .domain([1980, 2025]) // データの範囲を設定 .range([margin.left, width - margin.right]); // y軸スケール const yScale = d3 .scaleLinear() .domain([0, d3.max(dataset, (d) => d.sales)]) // データの範囲を設定 .range([height - margin.bottom, margin.top]); // x軸を描画 svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d3.format(""))); // y軸を描画 svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).tickFormat(d3.format(""))); // 円を描画 svg .selectAll("circle") .data(dataset) .join("circle") .attr("cx", (d) => xScale(d.year)) .attr("cy", (d) => yScale(d.sales)) .attr("r", 10) // 円の半径 .attr("fill", (d) => d[colorData]) .on("mouseover", function (event, d) { d3.select(this).attr("stroke", "black").attr("stroke-width", 2); d3.select(this).raise().attr("r", 20); // ツールチップ tooltip .style("visibility", "visible") .text(d.title) .style("top", `${event.pageY + 8}px`) .style("left", `${event.pageX + 15}px`); }) .on("mouseout", function () { d3.select(this).attr("r", 10).attr("stroke", "none"); tooltip.style("visibility", "hidden"); }); // ツールチップを作成 const tooltip = createTooltip(); return svg.node(); }34:Tf78,genreColorChart = { const width2 = width; const height = 600; // グラフの高さを指定 const margin = { top: 20, right: width2 / 5, bottom: 50, left: 100 }; const selectedImages = name === "menuImage" ? menuImage : packageImage; // 選択されたデータを使用 // 画像の色データを取得（Promise.allで処理完了を待つ） const getColorData = (imageUrls) => { return Promise.all( imageUrls.map((imageUrl) => { return new Promise((resolve) => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 2; canvas.height = 2; // モザイク化 const img = new Image(); img.crossOrigin = "Anonymous"; // 他サイトの画像対応 img.src = imageUrl; img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const pixels = ctx.getImageData(0, 0, 2, 2).data; let colorArray = []; for (let i = 0; i < 4; i++) { let r = pixels[i * 4]; let g = pixels[i * 4 + 1]; let b = pixels[i * 4 + 2]; colorArray.push(`rgb(${r}, ${g}, ${b})`); } resolve(colorArray); // 4つの色を配列として返す }; }); }) ).then((colorsArray) => colorsArray.flat()); // フラット化して1つの配列にする }; return getColorData(selectedImages).then((colorData) => { // 変更: 取得した4つの色を別々のデータとして格納 const hueValues = colorData.map((color) => { const hsl = d3.hsl(color); return hsl.s === 0 ? 370 : hsl.h; }); // ** dataset から title に対応する genre を取得 ** const titleToGenreMap = new Map(dataset.map((d) => [d.title, d.genre])); // 画像1枚につき4つのデータがあるため、titleを拡張 const extendedTitles = titles.flatMap((t) => [t, t, t, t]); const datasetUpdated = hueValues.map((h, i) => ({ hue: h, // 色相 color: colorData[i], title: extendedTitles[i], // それぞれの色に対してtitleを対応させる genre: titleToGenreMap.get(extendedTitles[i]) })); const svg = d3 .create("svg") .attr("width", width2) .attr("height", height) .style("background", "#f5f5f5"); // x軸スケール const xScale = d3 .scaleLinear() .domain([0, 365]) .range([margin.left, width2 - margin.right]); // y軸スケール const yScale = d3 .scaleBand() .domain(genres) .range([margin.top, height - margin.bottom]) .padding(0.1); // y軸を描画 svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)); // 四角形を描画 svg .selectAll("rect") .data(datasetUpdated) .join("rect") .attr("x", (d) => xScale(d.hue)) // 色相を横軸に設定 .attr("y", (d) => yScale(d.genre)) .attr("width", 10) .attr("height", yScale.bandwidth()) .attr("fill", (d) => d.color) .on("mouseover", function (event, d) { d3.select(this).raise(); d3.select(this) .attr("stroke", "none") .attr("width", 20) .attr("x", xScale(d.hue) - 5); // x の位置も色相に対応 // ツールチップに title を表示 tooltip .style("visibility", "visible") .text(d.title) // `title` を表示 .style("top", `${event.pageY + 8}px`) .style("left", `${event.pageX + 15}px`); }) .on("mouseout", function (event, d) { d3.select(this).attr("width", 10).attr("x", xScale(d.hue)); // 正しい d を渡す tooltip.style("visibility", "hidden"); }); // ツールチップを作成 const tooltip = createTooltip(); return svg.node(); }); }35:Tf74,hardColorChart = { const width2 = width; const height = 460; // グラフの高さを指定 const margin = { top: 20, right: width2 / 5, bottom: 50, left: 100 }; const selectedImages = hardName === "menuImage" ? menuImage : packageImage; // 選択されたデータを使用 // 画像の色データを取得（Promise.allで処理完了を待つ） const getColorData = (imageUrls) => { return Promise.all( imageUrls.map((imageUrl) => { return new Promise((resolve) => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 2; canvas.height = 2; // モザイク化 const img = new Image(); img.crossOrigin = "Anonymous"; // 他サイトの画像対応 img.src = imageUrl; img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const pixels = ctx.getImageData(0, 0, 2, 2).data; let colorArray = []; for (let i = 0; i < 4; i++) { let r = pixels[i * 4]; let g = pixels[i * 4 + 1]; let b = pixels[i * 4 + 2]; colorArray.push(`rgb(${r}, ${g}, ${b})`); } resolve(colorArray); // 4つの色を配列として返す }; }); }) ).then((colorsArray) => colorsArray.flat()); // フラット化して1つの配列にする }; return getColorData(selectedImages).then((colorData) => { // 変更: 取得した4つの色を別々のデータとして格納 const hueValues = colorData.map((color) => { const hsl = d3.hsl(color); return hsl.s === 0 ? 370 : hsl.h; }); // ** dataset から title に対応する hard を取得 ** const titleToHardMap = new Map(dataset.map((d) => [d.title, d.hard])); // 画像1枚につき4つのデータがあるため、titleを拡張 const extendedTitles = titles.flatMap((t) => [t, t, t, t]); const datasetUpdated = hueValues.map((h, i) => ({ hue: h, // 色相 color: colorData[i], title: extendedTitles[i], // それぞれの色に対してtitleを対応させる hard: titleToHardMap.get(extendedTitles[i]) })); const svg = d3 .create("svg") .attr("width", width2) .attr("height", height) .style("background", "#f5f5f5"); // x軸スケール const xScale = d3 .scaleLinear() .domain([0, 365]) .range([margin.left, width2 - margin.right]); // y軸スケール const yScale = d3 .scaleBand() .domain(hards) .range([margin.top, height - margin.bottom]) .padding(0.1); // y軸を描画 svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)); // 四角形を描画 svg .selectAll("rect") .data(datasetUpdated) .join("rect") .attr("x", (d) => xScale(d.hue)) // 色相を横軸に設定 .attr("y", (d) => yScale(d.hard)) .attr("width", 10) .attr("height", yScale.bandwidth()) .attr("fill", (d) => d.color) .on("mouseover", function (event, d) { d3.select(this).raise(); d3.select(this) .attr("stroke", "none") .attr("width", 20) .attr("x", xScale(d.hue) - 5); // x の位置も色相に対応 // ツールチップに title を表示 tooltip .style("visibility", "visible") .text(d.title) // `title` を表示 .style("top", `${event.pageY + 8}px`) .style("left", `${event.pageX + 15}px`); }) .on("mouseout", function (event, d) { d3.select(this).attr("width", 10).attr("x", xScale(d.hue)); // 正しい d を渡す tooltip.style("visibility", "hidden"); }); // ツールチップを作成 const tooltip = createTooltip(); return svg.node(); }); }36:Tc17,map = { const height = 600; const rectSize = 15; // 四角形のサイズ const margin = { top: 20, right: 20, bottom: 40, left: 20 }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("background", "#f5f5f5"); // 色相(Hue)と照度(Lightness)のスケール const xScale = d3 .scaleLinear() .domain([0, 360]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); // imageリスト const images = (imageList, type, titlesList) => { imageList.forEach((imageUrl, index) => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 3; canvas.height = 3; const img = new Image(); img.crossOrigin = "Anonymous"; img.src = imageUrl; img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); let colorData = {}; for (let y = 0; y < canvas.height; y++) { for (let x = 0; x < canvas.width; x++) { let pixel = ctx.getImageData(x, y, 1, 1).data; let r = pixel[0], g = pixel[1], b = pixel[2]; let [h, s, l] = rgbToHsl(r, g, b); let color = `rgb(${r},${g},${b})`; colorData[color] = { h, s, l }; } } Object.entries(colorData).forEach(([color, { h, l }]) => { svg .append("rect") .attr("x", xScale(h)) .attr("y", yScale(l)) .attr("width", rectSize) .attr("height", rectSize) .attr("fill", color) .attr("stroke", "#ccc") .attr("stroke-width", 0.5) .attr("cursor", "pointer") .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 1.5); tooltip .style("visibility", "visible") .text(`${type}: ${titlesList[index]}`); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", function () { d3.select(this).attr("stroke", "#ccc").attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }); }); }; }); }; // `packageImage` と `menuImage` のデータを処理 images(packageImage, "packageImage", titles); images(menuImage, "menuImage", titles); // ツールチップ（タイトル表示） const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("background", "#fff") .style("padding", "5px") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("box-shadow", "2px 2px 5px rgba(0,0,0,0.2)") .style("visibility", "hidden") .style("font-size", "12px"); return svg.node(); }37:T536,function toH(color) { let r, g, b; // 1. 16進カラーコード (#RRGGBB) の場合 if (typeof color === "string" && color.startsWith("#")) { const rgb = d3.color(color); // d3.colorでRGBに変換 r = rgb.r / 255; g = rgb.g / 255; b = rgb.b / 255; } // 2. RGB表記 ("rgb(r, g, b)") の場合 else if (typeof color === "string" && color.startsWith("rgb")) { const match = color.match(/\d+/g); // 数字を抽出 if (match && match.length === 3) { r = parseInt(match[0]) / 255; g = parseInt(match[1]) / 255; b = parseInt(match[2]) / 255; } else { return null; // 無効な形式 } } // 3. 直接 RGB オブジェクト ({r: 255, g: 100, b: 50}) の場合 else if ( typeof color === "object" && "r" in color && "g" in color && "b" in color ) { r = color.r / 255; g = color.g / 255; b = color.b / 255; } // それ以外の形式は無効 else { return null; } // RGB から H (色相) に変換 const max = Math.max(r, g, b), min = Math.min(r, g, b); const delta = max - min; let h = 0; if (delta !== 0) { if (max === r) h = ((g - b) / delta) % 6; else if (max === g) h = (b - r) / delta + 2; else h = (r - g) / delta + 4; } h = Math.round(h * 60); if (h < 0) h += 360; return h; }38:[{"id":"0bc5118f4eef8edd31c869cccb7b067a654f9bed7ef93c54ef51e35c6c7cc0c51d8b901e0420033d68dc7d6ea9837c49014b4db0c8bd4e26c2220d6b3cab7537","href":"https://static.observableusercontent.com/files/0bc5118f4eef8edd31c869cccb7b067a654f9bed7ef93c54ef51e35c6c7cc0c51d8b901e0420033d68dc7d6ea9837c49014b4db0c8bd4e26c2220d6b3cab7537","name":"smn.png","type":"image/png","lastModified":1738551159483.201,"size":384987}] 2f:{"id":"9226122860fe9912","slug":null,"title":"売れてるゲームはどんな色で構成されているの？〜Nintendo〜","thumbnail":"6e480968591a1a586a6d11fcadab791603072e458e823b8d8ff6262779a3ee30","access_level":"public","create_time":"$D2025-02-03T02:52:39.483Z","update_time":"$D2025-02-03T03:25:40.024Z","view_time":null,"first_public_time":"$D2025-02-03T02:52:39.483Z","has_unpublished_edits":null,"fork":{"id":"abf4c0e666fb340b","slug":"gamecolor","title":"売れてるゲームはどんな色で構成されているの？","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026"},"version":1217,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"95b9e6bedf074985","login":"marrondacks","name":"HinaSato","avatar_url":"https://avatars-next.observableusercontent.com/ab01a426078b56f39844bb646a00f2b025a6b65782c932b8494b6f4d1d8c224f","tier":null}],"members":[{"type":"individual","id":"95b9e6bedf074985","login":"marrondacks","name":"HinaSato","avatar_url":"https://avatars-next.observableusercontent.com/ab01a426078b56f39844bb646a00f2b025a6b65782c932b8494b6f4d1d8c224f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"売れてるゲームはどんな色で構成されているの？〜Nintendo〜","cells":[{"id":29,"value":"# 売れてるゲームはどんな色で構成されているの？〜Nintendo〜\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":829,"value":"smn = FileAttachment(\"smn.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"ゲームを魅力的にする要素として、テーマ・ストーリー・システム・サウンド・ビジュアルなどさまざまなものが挙げられます。その中で、色彩構成はゲーム画面全体を視覚的に魅力的に見せてくれます。ゲームによって使われている色は千差万別ですが、その色は一体どういった基準で選ばれているのでしょうか。
\nそこで、今回はゲームに使われている色と、そのゲームの特徴の関係について調査しました。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"### 調査方法","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"\nあちこちデータに掲載されている100位までのゲームソフト全世界歴代ランキングのうち、任天堂から発売されたソフトをピックアップします。(2025/01/19参照)
\nピックアップしたソフトから、実際のゲーム画面のスクリーンショットなどから色を抽出します。

\n(例)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":833,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"

色を抽出したい画像のURLを取得します。
画像を3×3pixelなどといった小さいキャンバスに描画します。
それぞれのpixelから色を抽出します。

\n 傾向\n

タイトルテキストのカラーは人目を引く目立つ色が多い
背景カラーは落ち着いた白・黒・水色系が多い

ジャンルによって使われている色の傾向はあるのか？

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"ジャンルを9種類に分け、メインカラーを比較します","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1087,"value":"viewof name = Inputs.radio([\"menuImage\", \"packageImage\"], {\n label: \"data\",\n value: \"menuImage\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"viewof hardName = Inputs.radio([\"menuImage\", \"packageImage\"], {\n label: \"data\",\n value: \"menuImage\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"

\n 傾向\n

rpg・actionなどのゲームは幅広い色が使われている一方で、sportは白・青系の色が多く、 adventureは自然色が多い。\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"### まとめ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1213,"value":"最後に今回抽出した色全てグラフに配置しました。\n横軸が色相、縦軸が明度","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1055,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":795,"value":"function extractColors(canvas, ctx, pixelSize = 1) {\n let colorData = {};\n let totalPixels = 0; // 色の出現回数\n\n for (let y = 0; y < canvas.height; y += pixelSize) {\n for (let x = 0; x < canvas.width; x += pixelSize) {\n let pixel = ctx.getImageData(x, y, 1, 1).data; // 1ピクセルのRGBデータ取得\n let r = pixel[0],\n g = pixel[1],\n b = pixel[2];\n let color = `rgb(${r},${g},${b})`;\n\n if (!colorData[color]) {\n colorData[color] = 0;\n }\n colorData[color]++;\n totalPixels++;\n }\n }\n\n let colorArray = Object.entries(colorData).map(([color, count]) => {\n let rgb = color.match(/\\d+/g).map(Number); // 文字列を数値に変換\n return {\n color,\n r: rgb[0],\n g: rgb[1],\n b: rgb[2],\n value: count / totalPixels // 色の割合(%)\n };\n });\n\n colorArray.sort((a, b) => a.r - b.r || a.g - b.g || a.b - b.b);\n\n return colorArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"dataset = d3.tsv(url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"titles = [...d3.group(dataset, (d) => d.title).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"sales = [...d3.group(dataset, (d) => d.sales).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"year = [...d3.group(dataset, (d) => d.year).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"genres = [...d3.group(dataset, (d) => d.genre).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"hards = [...d3.group(dataset, (d) => d.hard).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"titleColor = [...d3.group(dataset, (d) => d.titleColor).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"charaColor = [...d3.group(dataset, (d) => d.charaColor).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"UIBackground = [...d3.group(dataset, (d) => d.UIBackground).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"packageImage = [...d3.group(dataset, (d) => d.packageImage).keys()]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"menuImage = [...d3.group(dataset, (d) => d.menuImage).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSFHAPQHxpdHMdGPpa0nSlUtQ33t6mvuTX4zIDi2DYL2PI9H2F4WGBZYKRz06VA19T_KvDwbTj9YoVQ/pub?gid=0&single=true&output=tsv\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"function createTooltip() {\n return d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"background\", \"rgba(255, 255, 255, 0.9)\")\n .style(\"border\", \"1px solid #8b4513\")\n .style(\"padding\", \"7px\")\n .style(\"font-size\", \"10px\")\n .style(\"visibility\", \"hidden\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"// RGBをHSLに変換する関数\nfunction rgbToHsl(r, g, b) {\n (r /= 255), (g /= 255), (b /= 255);\n let max = Math.max(r, g, b),\n min = Math.min(r, g, b);\n let h,\n s,\n l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // グレースケール\n } else {\n let d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h *= 60;\n }\n return [h, s * 100, l * 100]; // H (0-360°), S (0-100%), L (0-100%)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"function tooltip() {\n return d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"background\", \"rgba(255, 255, 255, 0.9)\")\n .style(\"border\", \"1px solid #8b4513\")\n .style(\"padding\", \"7px\")\n .style(\"font-size\", \"10px\")\n .style(\"visibility\", \"hidden\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"#### memo \n\n1. ソフトの売上本数のランキングから上位50か100個をピックアップhttps://achikochi-data.com/game_sales_total_world_ranking_all/3/\n3. スクショから色をピックアップ\n （持っているソフトはスクショ、持っていないのはゲーム実況から)\n - adobe color\n - photoshopでカラーコードを抽出するか他の方法を探す\n \n5. それぞれのソフトから抽出した色を円グラフや棒グラフでまとめる\n - パッケージ・UI・フィールド・キャラクター\n - 画面の何％がこの色になっているということがわかるようにしたい\n7. ジャンルごとに比較、発売日順に並べる\n8. できたら同じシリーズのソフトも比較で入れたい\n9. 使われている色を散布図で分布し頻出色を見る\n10. 類似した色のソフトがわかるようにする\n\n11. ジャンルを絞る\n - ２ジャンルで比較する\n - 年齢層で絞る\n - ゲーム実況で人気のゲーム\n\n13. 先行事例を調べる。その先行事例になかった切り口から\n - ゲームのフォントの本\n - あの色図鑑：https://anoiro.com/?utm_source=chatgpt.com\n - いろんなゲームのUIをまとめたサイトhttps://interfaceingame.com\n - 少しのUI抽出、解説https://www.galaydegames.com/blog/colors-i\n - https://www.gameuidatabase.com/gameData.php?id=1991\n - \n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 30:"$2f:body"