2d:null 2e:["$","title",null,{"children":"Custom theme elements for reuse in Observable Plot | Ssen Kim | Observable"}] 33:[{"id":"fac40fd17ec75ee90c62c3633d42c23f96eeb0725056ec9037be60f919c955fd96613610cd70bbb5e9c6d95adf0e5e0eb92243aa38415145abfeaece8cbe7588","href":"https://static.observableusercontent.com/files/fac40fd17ec75ee90c62c3633d42c23f96eeb0725056ec9037be60f919c955fd96613610cd70bbb5e9c6d95adf0e5e0eb92243aa38415145abfeaece8cbe7588","name":"Kalam-Regular.ttf","type":"font/ttf","lastModified":1681438931814.675,"size":427336},{"id":"a52556ff742d106a7a9fc566199d869b50a67197c291d411ded35c1347317255ba2a2e51f9a08a14f073ff01243b48c4281e32b1370f79c3f46159d86222b435","href":"https://static.observableusercontent.com/files/a52556ff742d106a7a9fc566199d869b50a67197c291d411ded35c1347317255ba2a2e51f9a08a14f073ff01243b48c4281e32b1370f79c3f46159d86222b435","name":"observable-logo.png","type":"image/png","lastModified":1681438931814.675,"size":34930},{"id":"002f361d0fcf6e7d49398aeb0b0b557f7baeec5019930598db05ffe059dec5159db540e7fbba849133d0a05867befc0f566341e72b4c7892a8c27ed6de267275","href":"https://static.observableusercontent.com/files/002f361d0fcf6e7d49398aeb0b0b557f7baeec5019930598db05ffe059dec5159db540e7fbba849133d0a05867befc0f566341e72b4c7892a8c27ed6de267275","name":"Concmbl.ttf","type":"font/ttf","lastModified":1681442094901.05,"size":55392},{"id":"ccf09c593f64066aa1c59a431797c008c2841b28f49bdb27608881aae6ffdaf2af9856953af735982cac047254ec4da965577ff6ccedb2031bc975f80b20a1fa","href":"https://static.observableusercontent.com/files/ccf09c593f64066aa1c59a431797c008c2841b28f49bdb27608881aae6ffdaf2af9856953af735982cac047254ec4da965577ff6ccedb2031bc975f80b20a1fa","name":"STUDIOSAENA_LOGO_H@1.png","type":"image/png","lastModified":1681442941353.166,"size":10027}] 31:{"id":"b649c19e75a1f01b","slug":"ssen_theme","title":"Custom theme elements for reuse in Observable Plot","thumbnail":"4d2b5e75ed583996364034e46cf28ddc235984db0faef83e3aa65aba275019f7","access_level":"public","create_time":"$D2023-04-14T02:22:11.814Z","update_time":"$D2023-04-25T03:11:05.773Z","view_time":null,"first_public_time":"$D2023-04-14T02:22:11.814Z","has_unpublished_edits":null,"fork":{"id":"864f9c111c2bc586","slug":"custom-plot-themes","title":"Custom theme elements for reuse in Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024"},"version":1036,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null}],"members":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Custom theme elements for reuse in Observable Plot","cells":[{"id":0,"value":"# Custom theme elements for reuse in Observable Plot\n###
Observable Plot**에서 재사용할 수 있는 사용자 지정 테마 요소**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"Whether making branded reports for your company or making consistently-styled charts for your personal blog, it can be useful to have custom theme elements on-hand for reuse in your Observable Plot charts. \n
회사를 위한 브랜드 보고서를 만들거나 개인 블로그를 위한 일관된 스타일의 차트를 만들 때, Observable Plot 차트에서 재사용할 수 있도록 사용자 지정 테마 요소를 미리 준비해 두는 것이 유용할 수 있습니다. \n\nHere, we get you started with your own custom theme elements (color schemes, fonts, and logos) that you can quickly [import](https://observablehq.com/@observablehq/import) and use in other notebooks. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"---\n## Before you start","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"Fork this notebook to make a copy in your account so that your changes are saved. Your fork of this notebook can become a source document from which you import custom chart elements for use in other notebooks.\n\nFor easier reuse, [customize the URL](https://observablehq.com/@observablehq/custom-notebook-urls?collection=@observablehq/observable-tips-and-tricks) of your fork. Then, you can import the theme components you create here into any other notebook using your username and custom notebook slug:\n\n노트북 상단에서 햄버거메뉴-settings-set url로 주소 따로 지정. 지금 주소 보면 @ssen0117/custome_theme으로 주소 바뀌어 있음. 앞으로 공부하고 난 노트도 넘버링 붙여봐야지.(근데 난 아직 {} 안에 뭐가 들어가는건지 모른다!!)\n\n~~~js\n import {componentName} from \"@user/notebook-slug\"\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"---\n## Custom color schemes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"### Build a custom categorical palette\nUpdate the colors in the array below to build your custom categorical palette. You can use [hexadecimal color codes](https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color) or standard [color names](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"myCategoricalColors = [\"#44546A\", \"#FF3851\",\"#5151C6\",\"#26c6a6\"] // Edit these values, or add more!","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"{\n const div = d3.create('div')\n .style('display', 'flex')\n div.selectAll('div')\n .data(myCategoricalColors)\n .join('div')\n .style('width', 'auto')\n .style('padding', '5px')\n .style('margin', '2px')\n .style('border-radius', '2px')\n .style('background-color', d => d)\n .text(d => d).node()\n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"To import your categorical color scheme into another notebook, use: \n\n~~~js\n import {myCategoricalColors} from \"@ssen0117/ssen_theme\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"Then use your imported color scheme as the _range_ attribute for your Plot _color_ channel in any notebooks where the palette has been imported, as shown below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {\n x: \"power (hp)\",\n y: \"economy (mpg)\",\n fill: \"cylinders\",\n fillOpacity:0.7,\n r: 5\n })\n ],\n color: { \n range: myCategoricalColors,// Your custom color scheme here\n legend:true \n } \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"### Build a custom continuous palette
연속 팔레트 만들기\nUpdate the colors in the array below to build your custom continuous palette. You can use [hexadecimal color codes](https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color) or standard [color names](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color). \n
단계구분도 만들 때 쓸 수 있겠다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"myContinuousColors = [\"#5151c6\", \"#26c6a6\"] // Edit these colors! ","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"{\n const div = d3.create('div')\n .style('display', 'flex')\n div.selectAll('div')\n .data(myContinuousColors)\n .join('div')\n .style('width', 'auto')\n .style('padding', '5px')\n .style('margin', '2px')\n .style('border-radius', '2px')\n .style('background-color', d => d)\n .text(d => d).node()\n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"Here's a preview of your palette as a continuous gradient using the default d3.interpolateRgb interpolation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"Plot.plot({\n color: {\n type: \"linear\",\n range: myContinuousColors // uses d3.interpolateRgb\n },\n marks: [\n Plot.cell(d3.range(50), {x: d => d, fill: d => d})\n ],\n axis: null,\n height: 30,\n x: {padding: -0.1},\n width: 300\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"And using d3.interpolateHcl interpolation: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"Plot.plot({\n color: {\n type: \"linear\",\n range: myContinuousColors, // uses d3.interpolateRgb\n interpolate: \"hcl\"\n },\n marks: [\n Plot.cell(d3.range(50), {x: d => d, fill: d => d})\n ],\n axis: null,\n height: 30,\n x: {padding: -0.1},\n width: 300\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"To import your continuous color scheme into another notebook, use: \n\n~~~js\n import {myContinuousColors} from \"@ssen0117/ssen_theme\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"Then use your imported color scheme as the _range_ attribute for your Plot _color_ channel in any notebooks where the palette has been imported, as shown below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {\n x: \"power (hp)\",\n y: \"economy (mpg)\",\n fill: \"weight (lb)\",\n r: 5\n })\n ],\n color: {\n range: myContinuousColors, // Your custom color scheme here\n interpolate: \"hcl\",\n legend:true\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"Learn more about colors in Observable Plot: \n- [Plot: Scales](https://observablehq.com/@observablehq/plot-scales)\n- [Plot Cheatsheets - Colors](https://observablehq.com/@observablehq/plot-cheatsheets-colors)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"---\n## Custom fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"### Import Google fonts\nIn an html cell, import one or more [Google fonts](https://fonts.google.com):\n
구글 폰트 이용해서 여러개의 폰트 아래 import이용해서 삽입후 그래프에 fontfamily 이름 넣어서 활용 가능.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"myGoogleFonts","database":"$undefined"},{"id":358,"value":"The cell above is named _myGoogleFonts_ (with your cursor in that cell, you can see the name in the bar at the bottom of the browser). Import your custom font collection into other Observable notebooks using the cell name: \n
위 셀의 이름은 _myGoogleFonts_입니다(해당 셀에 커서를 갖다 대면 브라우저 하단의 표시줄에서 이름을 확인할 수 있습니다). 셀 이름을 사용해 사용자 지정 글꼴 컬렉션을 다른 _Observable_ 노트북으로 가져옵니다: \n~~~js\n import {myGoogleFonts} from \"@ssen0117/ssen_theme\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":883,"value":"Once you’ve imported the stylesheet, you also need to call it in a JavaScript cell to insert it into the notebook: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":887,"value":"myGoogleFonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"Then, you can then update fonts across an entire chart (as shown below, in the _style_ channel), or piecemeal for different elements (e.g. within a text mark):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"Plot.plot({\n //style: {fontFamily: \"Lato\"}, // Update with your imported Google font to change all in chart\n y: {\n grid: true,\n label: \"↑ Frequency (%)\",\n transform: (d) => d * 100\n },\n marks: [\n Plot.barY(alphabet, { x: \"letter\", y: \"frequency\" }),\n Plot.text(alphabet, {\n x: \"letter\",\n y: \"frequency\",\n text: (d) => (d.frequency * 100).toFixed(1),\n dy: 4,\n fontFamily: \"Pacifico\",\n fontSize: 12,\n fill:\"white\"\n \n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"### Downloaded fonts (.otf or .ttf)\nAttach a font file in the notebook: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"kalam = FileAttachment(\"Kalam-Regular.ttf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"Concmbl=FileAttachment(\"Concmbl.ttf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"Make it available as a style element (here, as font face “Kalam”):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":728,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"myDownloadedFonts","database":"$undefined"},{"id":836,"value":"Import the style element (stored here as _myDownloadedFonts_) into another notebook to quickly reuse your downloaded font: \n\n~~~js\n import {myDownloadedFonts} from \"@user/notebook-slug\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"Once you’ve imported the stylesheet, you also need to call it in a JavaScript cell to insert it into the notebook: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"myDownloadedFonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"The font is then available for use throughout your notebooks. The text mark font in the chart below is updated to Kalam.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Frequency (%)\",\n transform: (d) => d * 100\n },\n marks: [\n Plot.barY(alphabet, { x: \"letter\", y: \"frequency\" }),\n Plot.text(alphabet, {\n x: \"letter\",\n y: \"frequency\",\n text: (d) => (d.frequency * 100).toFixed(1),\n dy: -5,\n fontFamily: \"Concmbl\",\n fontSize: 14,\n fill: \"red\",\n dy: -10\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"---\n## Add custom logos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":444,"value":"Want to add your organization’s logo to a chart? Instead of attaching it in all of your different notebooks, attach and customize your logo here, then import it into other notebooks for faster and easier reuse.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"Replace the file below with your logo (an image, or SVG):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":450,"value":"logo = FileAttachment(\"observable-logo.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"studiosaena = FileAttachment(\"STUDIOSAENA_LOGO_H@1.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"Then you can import the logo into other notebooks using: \n\n~~~js\n import {studiosaena} from \"@ssen0117/ssen_theme\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"Add your logo to Observable Plot charts using an image mark: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":461,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, { x: \"power (hp)\", y: \"economy (mpg)\" }),\n Plot.frame(),\n Plot.image(studiosaena, { src: studiosaena, frameAnchor: \"top-right\", dx: -70, height: 200,width: 130 }) // Add, position and size your logo\n ],\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"---\n## Wrap-up\n\nWith your customized color schemes, fonts, and logos all in one place, you and your team can easily access them in other notebooks using [imports](https://observablehq.com/@observablehq/import). \n\nThere are many other ways you might want to customize your charts (e.g. background colors and styles, gridline options, etc.). We encourage you to keep adding to this document as your source for reusable theme elements.\n\nLearn more about chart customization: \n\n- [Observable Plot](https://observablehq.com/@observablehq/plot)\n- [Observable Plot Cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1035,"value":"[폰트 스타일 카피캣](https://observablehq.com/d/3ac7dfcbdcb1dd2a)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"