2c:null 2d:["$","title",null,{"children":"売れてるゲームはどんな色で構成されているの？ | TMU Dataviz Class | Observable"}] 32: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); }; }); }33: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(); }34: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(); }35:Teba,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) => { const hueValues = colorData.map((color) => { const hsl = d3.hsl(color); return hsl.s === 0 ? 370 : hsl.h; //さいど0の時値370 }); //タイトルジャンル対応 const titleToGenreMap = new Map(dataset.map((d) => [d.title, d.genre])); 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(); }); }36:Te0b,hardColorChart = { const width2 = width; const height = 460; const margin = { top: 20, right: width2 / 5, bottom: 50, left: 100 }; const selectedImages = hardName == "menuImage" ? menuImage : packageImage; 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) => { const hueValues = colorData.map((color) => { const hsl = d3.hsl(color); return hsl.s == 0 ? 370 : hsl.h; }); const titleToHardMap = new Map(dataset.map((d) => [d.title, d.hard])); 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(); }); }37: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(); }38: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; }39:[{"id":"0bc5118f4eef8edd31c869cccb7b067a654f9bed7ef93c54ef51e35c6c7cc0c51d8b901e0420033d68dc7d6ea9837c49014b4db0c8bd4e26c2220d6b3cab7537","href":"https://static.observableusercontent.com/files/0bc5118f4eef8edd31c869cccb7b067a654f9bed7ef93c54ef51e35c6c7cc0c51d8b901e0420033d68dc7d6ea9837c49014b4db0c8bd4e26c2220d6b3cab7537","name":"smn.png","type":"image/png","lastModified":1738514766877.793,"size":384987}] 30:{"id":"abf4c0e666fb340b","slug":"gamecolor","title":"売れてるゲームはどんな色で構成されているの？","thumbnail":"6e480968591a1a586a6d11fcadab791603072e458e823b8d8ff6262779a3ee30","access_level":"public","create_time":"$D2024-12-23T04:48:24.910Z","update_time":"$D2025-02-03T05:50:27.211Z","view_time":null,"first_public_time":"$D2025-01-20T04:58:24.733Z","has_unpublished_edits":null,"fork":true,"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":1232,"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"},{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"64342ad2a9267bf8","slug":"2024-final-project","title":"2024 Final Project","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"type":"notebook","body":{"titling":"auto","title":"売れてるゲームはどんな色で構成されているの？","cells":[{"id":29,"value":"# 売れてるゲームはどんな色で構成されているの？\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":"$32","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","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"### 今回調査したゲーム一覧","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":767,"value":"viewof replay = Inputs.button(\"リプレイ\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"今回ゲームに使われている色を調査したゲームソフトの一覧です。
\nゲームソフトのパッケージから9個の色を抽出し、円グラフ化しました。円グラフの下にソフト名を記載しています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"### ゲームに使われている色とそのゲームの売り上げ本数・発売年代を見てみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"調査したソフト50タイトルを発売年代(横軸)と売り上げ本数(縦軸)のグラフに分布しました。\nドットのカラーはゲームタイトルのテキストカラー(titleColor)、UIの背景(UIBackground)を表します。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1129,"value":"viewof name1 = Inputs.radio([\"titleColor\", \"UIBackground\"], {\n value: \"titleColor\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"

\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":"$35","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":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"

\n 傾向\n

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

\n 傾向\n

任天堂の上位５０のゲームは、赤・青・白・黒系統の色が多く、緑・紫系統の色は少ない\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"","pinned":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$38","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"