3e:null 3f:["$","title",null,{"children":"Scatterplot matrix | imyuna's Workspace | Observable"}] 45:T12be,chart = { // 차트의 크기 지정 : 가로, 가로와 같은 세로, 패딩 const width = 900; const height = width; const padding = 30; // data.columns == Array(7) ["species", "island"...]에 filter(조건) //("species" => typeof data[0]["species"] === "number") //("species" => typeof "Adelie" === "number") //("species" => false) const columns = data.columns.filter((da) => typeof data[0][da] === "number"); // typeof data[0][da] === "number" 는 true or false const size = (width - (columns.length + 1) * padding) / columns.length + padding; //columns.length는 컬럼 갯수 4/ // x 스케일 정의 (각 행마다 하나씩) const x = columns.map((col) => d3 .scaleLinear() .domain(d3.extent(data, (da) => da[col])) //d[col] = d["culmen_length_mm"].. .rangeRound([padding / 2, size - padding / 2]) ); // y 스케일 정의 (각 열마다 하나씩) const y = x.map((x) => x.copy().range([size - padding / 2, padding / 2])); // 컬러 정의 https://d3js.org/d3-scale-chromatic/categorical const color = d3 .scaleOrdinal() .domain(data.map((d) => d.species)) //https://d3js.org/d3-array/transform#map //.range(d3.schemeCategory10); //.domain(["Adelie", "Chinstrap", "Gentoo"]) .range(["#FF8100", "#CA5ACC", "#067174"]); // x 축 정의 (각 열마다 별도로 적용) const axisx = d3 .axisBottom() .ticks(6) .tickSize(size * columns.length); const xAxis = (g) => g .selectAll("g") .data(x) .join("g") .attr("transform", (d, i) => `translate(${i * size},0)`) .each(function (d) { return d3.select(this).call(axisx.scale(d)); }) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").attr("stroke", "#ddd")); // y 축 정의 (각 행마다 별도로 적용) const axisy = d3 .axisLeft() .ticks(6) .tickSize(-size * columns.length); const yAxis = (g) => g .selectAll("g") .data(y) .join("g") .attr("transform", (d, i) => `translate(0,${i * size})`) .each(function (d) { return d3.select(this).call(axisy.scale(d)); }) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").attr("stroke", "#ddd")); //viewBox 위치와 영역에 svg 요소 생성 const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-padding, 0, width, height]); //viewBox [min-x, min-y,(svg가 그려지는 영역의 시작점, 왼쪽 상단의 꼭짓점->위치조정) width, height(->확대축소))] https://tecoble.techcourse.co.kr/post/2021-10-24-svg-viewBox/ // svg에 스타일 추가 svg .append("style") //css 스타일 정의하기 위해 사용 .text(`circle.hidden { fill: #000; fill-opacity: 1; r: 1px; }`); //무슨 기능?? // x와 y 축을 SVG에 추가합니다. svg.append("g").call(xAxis); svg.append("g").call(yAxis); // cell(서브플롯) 생성, 그룹 생성, 선택, 데이터 바인딩 =>행렬 형태로 배치된 서브플롯 구성 const cell = svg .append("g") .selectAll("g") .data(d3.cross(d3.range(columns.length), d3.range(columns.length))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); // cell 사각형 그리기: 채우기, 테두리색, 위치, 사이즈 cell .append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); //데이터 원 그리기 => scatterplot 데이터 시각화 cell.each(function ([i, j]) { d3.select(this) .selectAll("circle") .data(data.filter((d) => !isNaN(d[columns[i]]) && !isNaN(d[columns[j]]))) //표시할 데이터 유효하지 않은 값(Not a Number) 필터링 .join("circle") .attr("cx", (d) => x[i](d[columns[i]])) //각 원의 좌표 설정 .attr("cy", (d) => y[j](d[columns[j]])); }); // cell에 대해 데이터포인트 선택하고, 정의 : 원 추가, 사이즈, 투명도, 색상 const circle = cell .selectAll("circle") .attr("r", 3.5) .attr("fill-opacity", 0.7) .attr("fill", (d) => color(d.species)); // svg에 새로운 그룹 추가, 데이터의 컬럼으로 텍스트 요소 바인딩 svg .append("g") .style("font", "bold 10px sans-serif") .style("pointer-events", "none") .selectAll("text") .data(columns) .join("text") .attr("transform", (d, i) => `translate(${i * size},${i * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text((d) => d); return Object.assign(svg.node(), { scales: { color } }); }46:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1701317435929.562,"size":13506}] 43:{"id":"9343344a186b5699","slug":null,"title":"Scatterplot matrix","thumbnail":"097c229b9311917edf63d799fca6985db986d807bd5e3c83387f7a6a73d4fe96","access_level":"public","create_time":"$D2023-11-30T04:10:35.929Z","update_time":"$D2023-12-15T01:42:07.049Z","view_time":null,"first_public_time":"$D2023-11-30T04:10:35.929Z","has_unpublished_edits":null,"fork":{"id":"8c0e2f3d99233f55","slug":"splom/2","title":"Scatterplot matrix","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5a0b14ee3819076e","login":"imyuna-pbls","name":"imyuna's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/852113351227da225603e3273fb3ba896bfe495d36444539dc1f2566ae923db2","tier":"starter_2024","bio":"","following":false},"version":454,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fefa54f68f2874c7","login":"yuna-pbls","name":"imyuna","avatar_url":"https://avatars-next.observableusercontent.com/b650fdccad2e886d51f2a8782e631a9d9e964451ecc6c1b0f9995a9da56fb720","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"5a0b14ee3819076e","login":"imyuna-pbls","name":"imyuna's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/852113351227da225603e3273fb3ba896bfe495d36444539dc1f2566ae923db2","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fefa54f68f2874c7","login":"yuna-pbls","name":"imyuna","avatar_url":"https://avatars-next.observableusercontent.com/b650fdccad2e886d51f2a8782e631a9d9e964451ecc6c1b0f9995a9da56fb720","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scatterplot matrix","cells":[{"id":0,"value":"

Scatterplot matrix

D3 › Gallery

\n\n# [2차시 스터디용] Scatterplot matrix \nhttps://imgur.com/orZWHly.png\nThe scatterplot matrix (SPLOM) shows pairwise correlations for multi-dimensional data; each cell is a scatterplot where *x* encodes the column’s dimension and *y* encodes the row’s dimension. This matrix shows Kristen Gorman’s data on penguins near Palmer Station in Antarctica. See also the [brushable](/@d3/brushable-scatterplot-matrix) version.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"swatches({color: chart.scales.color})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"data.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"typeof data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"data.columns.filter((d) => typeof data[0][d] === \"number\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"## ※svg \nScalable Vector Graphics\n\n## ※padding\n

\n\n## ※viewBox\nhttps://tecoble.techcourse.co.kr/post/2021-10-24-svg-viewBox/\n