2e:null 2f:["$","title",null,{"children":"Family Tree Icon Study | Michael Bricknell | Observable"}] 34:T1382,class CustomIcon { constructor( props = { symbol: null, fillColor: null, strokeColor: null, strokeWidth: null, borderColor: null, borderWidth: null, borderStyle: null, label: null, texture: null, flip: null, flag: null, size: null, customSize: null } ) { this.size = props.size ? props.size : 170 / 1.33; this.flag = props.flag ? props.flag : { show: false }; this.flip = props.flip ? props.flip : false; this.texture = props.texture ? props.texture : { show: false }; this.symbol = props.symbol ? props.symbol : null; this.borderStyle = props.borderStyle ? props.borderStyle : "solid"; this.fillColor = props.fillColor ? props.fillColor : { face: "red", hair: "green", shirt: "blue", background: "purple", border: "none" }; this.strokeColor = props.strokeColor ? props.strokeColor : { face: "red", hair: "green", shirt: "blue", background: "purple", border: "black" }; this.strokeWidth = props.strokeWidth ? props.strokeWidth : { face: "0px", hair: "0px", shirt: "0px", background: "0px", border: "0px" }; this.borderColor = props.borderColor ? props.borderColor : "none"; this.borderWidth = props.borderWidth ? props.borderWidth : "none"; this.label = props.label ? props.label : "label"; } get render() { let uid = Math.random().toString(36).substr(2, 5); let label = this.label; let fillColor = this.fillColor; let strokeColor = this.strokeColor; let strokeWidth = this.strokeWidth; let borderWidth = this.borderWidth; let borderStyle = this.borderStyle; let borderColor = this.borderColor; let texture = this.texture; let flip = this.flip; let flag = this.flag; let size = this.size; let customSize = this.customSize; let iso = ""; if (flag.show) { iso = flag.iso; } let symbol = this.symbol; let svg; let dy = 0; var stringToHTML = function (str) { var dom = document.createElementNS("http://www.w3.org/2000/svg", "svg"); dom.innerHTML = str; return dom; }; symbol = d3.select(stringToHTML(symbol)).attr("id", `symbol-${uid}`); svg = DOM.svg(size, size); let g; if (flip) { g = d3 .select(svg) .style("box-sizing", "content-box") .style("transform", "scaleX(-1)") //.style("border", `${borderWidth} ${borderStyle} ${borderColor}`) .attr("id", uid); } else { g = d3 .select(svg) .style("box-sizing", "content-box") //.style("border", `${borderWidth} ${borderStyle} ${borderColor}`) .attr("id", uid); } g.append("svg") .attr("class", `target-${uid}`) .attr("width", customSize) .attr("height", size) .attr("viewBox", `0 0 ${size} ${size}`) .html(symbol.node().outerHTML); if (texture.show) { for (let k of Object.keys(texture)) { if ( k !== "show" && ["background", "hair", "shirt", "face"].indexOf(k) > -1 ) { g.call(texture[k]); g.select(`#texture-${k}`).style("fill", texture[k].url()); } } } if (flag != null) { if (flip) { g.select("#icon") .insert("image", "#texture-background") .style("opacity", flag.opacity ? flag.opacity : "1") .style("transform", "scaleX(-1)") .style("transform-origin", "bottom") .attr("href", flagLink[flag.iso]) .attr("width", 120) .attr("height", 120); } else { g.select("#icon") .insert("image", "#texture-background") .style("opacity", flag.opacity ? flag.opacity : "1") .attr("href", flagLink[flag.iso]) .attr("width", 120) .attr("height", 120); } } g.select("#face").style("fill", fillColor.face); g.select("#hair").style("fill", fillColor.hair); g.select("#shirt").style("fill", fillColor.shirt); g.select("#background").style("fill", fillColor.background); g.select("#border").style("fill", fillColor.border); g.select("#face").style("stroke", strokeColor.face); g.select("#hair").style("stroke", strokeColor.hair); g.select("#shirt").style("stroke", strokeColor.shirt); g.select("#background").style("stroke", strokeColor.background); g.select("#border").style("stroke", strokeColor.border); g.select("#face").style("stroke-width", strokeWidth.face); g.select("#hair").style("stroke-width", strokeWidth.hair); g.select("#shirt").style("stroke-width", strokeWidth.shirt); g.select("#background").style("stroke-width", strokeWidth.background); g.select("#border").style("stroke-width", strokeWidth.border); return g.node(); } }35:[{"id":"af72d7d448aa516a0c3386eadbe219cf0314bb6fc4a9186795b20f5f495e5a6bd05026319233e359f73c1f87396ab2f07e87c7a9eec966db85dff078aa668b9b","href":"https://static.observableusercontent.com/files/af72d7d448aa516a0c3386eadbe219cf0314bb6fc4a9186795b20f5f495e5a6bd05026319233e359f73c1f87396ab2f07e87c7a9eec966db85dff078aa668b9b","name":"female child@1.svg","type":"image/svg+xml","lastModified":1671215230529.439,"size":2749},{"id":"c9694a400f0a2124705e29164199fd46f40511aad63fdd21de09682e7c626d178c87a70eb895b3fa853feb0d4e205f5506da1f17501323b29153f7f9215e3b6c","href":"https://static.observableusercontent.com/files/c9694a400f0a2124705e29164199fd46f40511aad63fdd21de09682e7c626d178c87a70eb895b3fa853feb0d4e205f5506da1f17501323b29153f7f9215e3b6c","name":"female@3.svg","type":"image/svg+xml","lastModified":1671215240421.619,"size":2757},{"id":"28bede3f26671bd7374c36647ae34c38b30f70e87db8075d505fc3b5b8613967404ff538a41a470c770e777dba520e895ecc0d9bcc855ecd1060b6496f6634ee","href":"https://static.observableusercontent.com/files/28bede3f26671bd7374c36647ae34c38b30f70e87db8075d505fc3b5b8613967404ff538a41a470c770e777dba520e895ecc0d9bcc855ecd1060b6496f6634ee","name":"male child@1.svg","type":"image/svg+xml","lastModified":1671215255565.382,"size":2875},{"id":"78e1ac1a0f8fa538b755eb91f62db737c9ac99dc7886c610a76d12586c585a9429aa1e5ffa14e23c1ecc11145d2f965f7ba2aa4c9db729bcb6abbedfd3609df5","href":"https://static.observableusercontent.com/files/78e1ac1a0f8fa538b755eb91f62db737c9ac99dc7886c610a76d12586c585a9429aa1e5ffa14e23c1ecc11145d2f965f7ba2aa4c9db729bcb6abbedfd3609df5","name":"male@3.svg","type":"image/svg+xml","lastModified":1671215266254.718,"size":2852},{"id":"ef99baf55f46d91326cee8952d4885a7f7f1a31bc655b35fb7a17342eac0544be614f4058803589a87ebce4a1554cf25545371ef3b11b025bb0819a566f6d7c8","href":"https://static.observableusercontent.com/files/ef99baf55f46d91326cee8952d4885a7f7f1a31bc655b35fb7a17342eac0544be614f4058803589a87ebce4a1554cf25545371ef3b11b025bb0819a566f6d7c8","name":"issue2.jpg","type":"image/jpeg","lastModified":1671301429748.668,"size":76449},{"id":"c375439aa0ae10a3e23d7e1d15306bd6211fcbd3b067ac85bfcced75b3a7e2f5f62a8a651bec62376877edca9464101bcc46a8b89e0984a8c6d7b0da2dfb401f","href":"https://static.observableusercontent.com/files/c375439aa0ae10a3e23d7e1d15306bd6211fcbd3b067ac85bfcced75b3a7e2f5f62a8a651bec62376877edca9464101bcc46a8b89e0984a8c6d7b0da2dfb401f","name":"issue2-solution.jpg","type":"image/jpeg","lastModified":1671301431812.129,"size":82739},{"id":"eb4b7991af5f02d26a4570c5904ff3e267c7505692ec41e8ab2d31134239c085f134bf9744f281615c6af81760417f463f74bc23e706a5fe392af5e811dd9ebf","href":"https://static.observableusercontent.com/files/eb4b7991af5f02d26a4570c5904ff3e267c7505692ec41e8ab2d31134239c085f134bf9744f281615c6af81760417f463f74bc23e706a5fe392af5e811dd9ebf","name":"issue1-solution.jpg","type":"image/jpeg","lastModified":1671299470495.44,"size":20786},{"id":"4c2ca179de40982adf6b5fc3ac71e0fc5adb97dfcf012476d8b3a801115e15f686b70edabbf46a3e4f6e4b412c94537b5ef7154866bbd81f5cae2c70b251c78e","href":"https://static.observableusercontent.com/files/4c2ca179de40982adf6b5fc3ac71e0fc5adb97dfcf012476d8b3a801115e15f686b70edabbf46a3e4f6e4b412c94537b5ef7154866bbd81f5cae2c70b251c78e","name":"layout.PNG","type":"image/png","lastModified":1671293163385.213,"size":8777},{"id":"2a7b93f322392b845e481c99c32612e564ed39fabe6f81eb11c859c0ee24c32e42e96f8fc37e7c1fdef9c809b1bae73cabcb968d52bcdd7c6612aa81cb27b05e","href":"https://static.observableusercontent.com/files/2a7b93f322392b845e481c99c32612e564ed39fabe6f81eb11c859c0ee24c32e42e96f8fc37e7c1fdef9c809b1bae73cabcb968d52bcdd7c6612aa81cb27b05e","name":"maleCustom@1.svg","type":"image/svg+xml","lastModified":1671296963578.566,"size":5785},{"id":"2046ac00fe779367618dce05e05ed4c3cf72ecf431da4750a20170cfc3dc7b7efc43514176473e714611f1aa30f989fbad6ceda793236fedee74a55e245ab7e2","href":"https://static.observableusercontent.com/files/2046ac00fe779367618dce05e05ed4c3cf72ecf431da4750a20170cfc3dc7b7efc43514176473e714611f1aa30f989fbad6ceda793236fedee74a55e245ab7e2","name":"issue1.jpg","type":"image/jpeg","lastModified":1671298542051.174,"size":21243}] 32:{"id":"62d428db2cb9ffe4","slug":"customize-family-tree-icons","title":"Family Tree Icon Study","thumbnail":"7193a1822ee4217994e630cc758fb2a17308272b453838c0342006f77bd0c0da","access_level":"public","create_time":"$D2022-12-15T14:15:54.567Z","update_time":"$D2026-04-28T00:41:12.446Z","view_time":null,"first_public_time":"$D2022-12-15T14:15:54.567Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":2134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"50906241d55409c7","slug":"geneaology","title":"Geneaology","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Family Tree Icon Study","cells":[{"id":947,"value":"# Family Tree Icon Study","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":902,"value":"[texture.js](https://riccardoscalco.it/textures/) Riccardo Scalco","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":912,"value":"[flags](https://flagicons.lipis.dev/) lipis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"[bgins](https://github.com/bgrins/TinyColor) tinycolor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":905,"value":"Male and Female Icons vectorized from Ancestry.com","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"## Customize Family Tree Icons
\n*Each image is a dynamic image, change the parameters to update them live.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"Create customizable images for a family tree.

\nI am purely coming from a position of wanting more information encoded in an icon, a person's past is very personal and meaningful to that individual which is seeking some insight into their roots. How do we see ourselves and bring more meaning to the forgotten and unknown.
\n
\nWhile using Ancestry I felt the need to customize my icons, but keep the design and feel similar, but what if you don't want blue and red people. I've provided vector versions of the default icons and a function that can customize each stroke, fill, or add a flag or texture.

Textures are created by using your own texture pattern from [texture.js](https://riccardoscalco.it/textures/)
https://riccardoscalco.it/textures/

\nThere are many mays to do this, but having it available to others is the most important thing.\n

\nUse the three dots to the left to download a PNG, add a variable name to the class to rename the downloaded image name.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"For a list of 1x1 flags available please check out [lipis](https://flagicons.lipis.dev/) flags
\nhttps://flagicons.lipis.dev/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":919,"value":"# Considerations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":925,"value":"I prefer to not use photographs as icons, while trying to decode patterns or trends the photograph doesn't help at this scale and purpose, and is not applicable across all time periods. Firstly it's too small to gain any detail and you would need to click on it to enlarge it anyway, so let's take that out of the equation. *No Photos Please*. There could be a lot more information encoded into the icon itself. Married status, nationality, a reminder that a specific person is difficult to find information about, or some other visual aesthetic is meaningful to the individual, family or the family-tree-curator, *You*. Maybe the colors *rust* and *steel* are not appropriate.

\nIt is not feasible to use this approach on a large scale, due to having to replace each icon. At the moment this is ideal for small branches of a tree that can help decipher research problem areas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1129,"value":"# Consideration of hue and color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"defaultColorMale = ({\n face: \"#80abbf\",\n hair: \"#414c64\",\n shirt: \"#414c64\",\n background: \"#c7d9e3\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"man = new CustomIcon({\n symbol: malePath,\n fillColor: defaultColorMale\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"defaultColorFemale = ({\n face: \"#ce6e53\",\n hair: \"#9d4327\",\n shirt: \"#9c4327\",\n background: \"#edc4b2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"woman = new CustomIcon({\n symbol: femalePath,\n fillColor: defaultColorFemale\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"# Consideration of Uncertainty","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1373,"value":"Does having color represent certainty or gender? I would make the argument that we already have the female and male icon, does color add to this understanding? I would say possibly, if you want it to, but it is yet another variable. On a binary color scale where certainty is either white or black the middle value is gray. However is the binary scale between male/female colors? Or opposite/complimentary of their respective colors. Or just gray? Let's take a look.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1381,"value":"white = d3.scaleLinear([0, 1], [\"white\", \"black\"])(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"gray = d3.scaleLinear([0, 1], [\"white\", \"black\"])(0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"black = d3.scaleLinear([0, 1], [\"white\", \"black\"])(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"new CustomIcon({\n flip: false,\n symbol: malePath,\n fillColor: {\n face: \"#9B9B9B\",\n hair: \"rgb(128, 128, 128)\",\n shirt: \"rgb(128, 128, 128)\",\n background: \"#cccccc\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"## Distances of color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1967,"value":"*Note: I had a misunderstanding about color, which is apparent below, so I'm coming back to this, but reading up on a few things first.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1654,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1953,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1133,"value":"# Consideration of direction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":952,"value":"html`

${await FileAttachment(\n \"issue1.jpg\"\n).image()}

Margaret seems to be annoyed with William, they are not on speaking terms.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"The direction in which people face could also mean something. A couple facing opposite direction could mean divorce/separation, or facing each other could mean married/partnered. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":852,"value":"new CustomIcon({\n flip: true,\n symbol: femalePath,\n fillColor: defaultColorFemale\n}).render","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"new CustomIcon({\n flip: true,\n symbol: malePath,\n fillColor: defaultColorMale\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"html`

${await FileAttachment(\n \"issue1-solution.jpg\"\n).image()}

ahh, that's better, Margaret and William seem to be on better terms

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"# Consideration of size","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":986,"value":"The size of the icon could mean something. Early in 18th and 19th century families were quite large, and sadly the children did not make it to adulthood. So why do we have a full sized icon, let's have a child sized icon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1031,"value":"issue2 = FileAttachment(\"issue2.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"issue2Solution = FileAttachment(\"issue2-solution.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"### Why not have a smaller icon for children?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"maleChild = new CustomIcon({\n symbol: maleChildPath,\n fillColor: defaultColorMale\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"femaleChild = new CustomIcon({\n symbol: femaleChildPath,\n fillColor: defaultColorFemale\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"new CustomIcon({\n flip: false,\n symbol: maleChildPath,\n fillColor: {\n face: \"#eeeeee\",\n hair: \"#9B9B9B\",\n shirt: \"#9B9B9B\",\n background: \"#cccccc\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"new CustomIcon({\n flip: false,\n symbol: femaleChildPath,\n fillColor: {\n face: \"#eeeeee\",\n hair: \"#9B9B9B\",\n shirt: \"#9B9B9B\",\n background: \"#cccccc\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"# Consideration of style ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1099,"value":"TO DO","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1048,"value":"## strokes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1063,"value":"testD = new CustomIcon({\n symbol: femalePath,\n fillColor: defaultColorFemale,\n strokeWidth: {\n face: \"2px\",\n hair: \"2px\",\n shirt: \"2px\",\n background: \"0px\",\n border: \"0px\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"testE = new CustomIcon({\n symbol: femalePath,\n fillColor: defaultColorFemale,\n strokeWidth: {\n face: \"2px\",\n hair: \"2px\",\n shirt: \"2px\",\n border: \"4px\"\n },\n strokeColor: {\n face: \"white\",\n hair: \"white\",\n shirt: \"white\",\n border: \"black\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"## fills","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"testA = new CustomIcon({\n symbol: malePath,\n fillColor: familyStyleA\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"testB = new CustomIcon({\n symbol: malePath,\n fillColor: {\n hair: \"orange\",\n face: \"pink\",\n shirt: \"olive\",\n background: \"teal\"\n },\n strokeColor: {\n hair: \"DarkOrange\",\n face: \"PaleVioletRed\",\n shirt: \"DarkGreen\",\n background: \"black\",\n border: \"black\"\n },\n strokeWidth: {\n hair: \"3px\",\n face: \"2px\",\n shirt: \"3px\",\n background: \"0px\",\n border: \"3px\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2062,"value":"testC = new CustomIcon({\n flag: { iso: \"gb-sct\", opacity: 1 },\n symbol: malePath,\n fillColor: {\n hair: \"orange\",\n face: \"pink\",\n shirt: \"olive\",\n background: \"teal\"\n },\n texture: {\n show: true,\n shirt: textures.lines().orientation(\"3/8\", \"7/8\").stroke(\"DarkGreen\")\n },\n strokeColor: {\n hair: \"DarkOrange\",\n face: \"PaleVioletRed\",\n shirt: \"DarkGreen\",\n background: \"black\",\n border: \"black\"\n },\n strokeWidth: {\n hair: \"3px\",\n face: \"2px\",\n shirt: \"3px\",\n background: \"0px\",\n border: \"3px\"\n }\n}).render","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"## textures/patterns","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1341,"value":"test1 = new CustomIcon({\n symbol: malePath,\n fillColor: defaultColorMale,\n texture: {\n show: true,\n background: textures\n .lines()\n .orientation(\"vertical\", \"horizontal\")\n .size(7)\n .strokeWidth(0.5)\n .shapeRendering(\"crispEdges\")\n .stroke(\"white\")\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"test2 = new CustomIcon({\n flip: true, //facing either direction, true makes it opposite of original\n symbol: femalePath, //loaded below as a string\n fillColor: defaultColorFemale, //defined above\n texture: {\n show: true,\n background: textures\n .paths()\n .d(\"woven\")\n .lighter()\n .thicker()\n .stroke(defaultColorFemale.shirt),\n shirt: textures.paths().d(\"waves\").thicker().stroke(\"white\"),\n face: textures\n .lines()\n .orientation(\"horizontal\")\n .size(2.5)\n .strokeWidth(1)\n .shapeRendering(\"crispEdges\")\n .stroke(\"darkorange\"),\n hair: textures\n .paths()\n .size(10)\n .d(\"crosses\")\n .lighter()\n .stroke(defaultColorFemale.background)\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"test3 = new CustomIcon({\n flip: true,\n symbol: femalePath,\n fillColor: defaultColorMale,\n texture: {\n show: true,\n background: textures.circles().size(7).complement().fill(\"white\"),\n shirt: textures.paths().d(\"waves\").thinner().stroke(\"white\"),\n hair: textures\n .paths()\n .size(3)\n .d(\"crosses\")\n .lighter()\n .stroke(defaultColorFemale.background)\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"test4 = new CustomIcon({\n symbol: femalePath,\n fillColor: {\n face: \"#FCACFF\",\n hair: \"purple\",\n shirt: \"green\",\n background: \"salmon\"\n },\n texture: {\n show: true,\n shirt: textures.lines().orientation(\"3/8\", \"7/8\").stroke(\"#B956C9\")\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"## Flags","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"test5 = new CustomIcon({\n flip: true,\n flag: { iso: \"gb-sct\", opacity: 1 },\n symbol: femalePath,\n fillColor: defaultColorMale\n}).render","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"test6 = new CustomIcon({\n flag: { iso: \"mx\", opacity: 0.6 },\n symbol: femalePath,\n fillColor: familyStyleC,\n strokeColor: {\n hair: \"purple\",\n face: \"black\",\n shirt: \"black\",\n background: \"black\",\n border: \"black\"\n },\n strokeWidth: {\n hair: \"2px\",\n face: \"2px\",\n shirt: \"2px\",\n background: \"0px\",\n border: \"1px\"\n }\n}).render","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"test7 = new CustomIcon({\n //flip: true,\n flag: { iso: \"gb-eng\", opacity: 1 },\n symbol: femalePath,\n fillColor: {\n hair: \"orange\",\n face: \"pink\",\n shirt: \"olive\",\n background: \"white\"\n },\n strokeColor: {\n hair: \"DarkOrange\",\n face: \"PaleVioletRed\",\n shirt: \"DarkGreen\",\n background: \"black\",\n border: \"black\"\n },\n strokeWidth: {\n hair: \"3px\",\n face: \"2px\",\n shirt: \"3px\",\n background: \"0px\",\n border: \"3px\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"new CustomIcon({\n flag: { iso: \"pr\", opacity: 0.2 },\n symbol: femalePath,\n fillColor: {\n background: \"pink\",\n hair: \"pink\",\n face: \"pink\",\n shirt: \"pink\"\n },\n strokeColor: {\n face: \"gray\",\n hair: \"gray\",\n shirt: \"gray\",\n background: \"white\"\n },\n strokeWidth: {\n face: \"1px\",\n hair: \"1px\",\n shirt: \"1px\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"new CustomIcon({\n flip: true,\n flag: { iso: \"gb-sct\", opacity: 0.5 },\n symbol: femalePath,\n fillColor: { ...defaultColorFemale, ...{ background: \"white\" } }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"new CustomIcon({\n flag: { iso: \"ca\", opacity: 0.5 },\n flip: true,\n symbol: malePath,\n fillColor: {\n face: \"none\",\n hair: \"none\",\n shirt: \"none\",\n background: \"white\"\n },\n strokeColor: {\n face: \"gray\",\n hair: \"gray\",\n shirt: \"gray\",\n background: \"white\"\n },\n strokeWidth: {\n face: \"1px\",\n hair: \"1px\",\n shirt: \"1px\"\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"new CustomIcon({\n flag: { iso: \"so\", opacity: 1 },\n symbol: femalePath,\n fillColor: { background: \"none\", hair: \"none\", face: \"none\", shirt: \"none\" }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"new CustomIcon({\n flag: { iso: \"ve\", opacity: 1 },\n symbol: femalePath,\n fillColor: { background: \"none\", hair: \"none\", face: \"none\", shirt: \"none\" }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"new CustomIcon({\n flag: { iso: \"jm\", opacity: 1 },\n symbol: femalePath,\n fillColor: { background: \"none\", hair: \"none\", face: \"none\", shirt: \"none\" }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"familyStyleA = ({\n face: \"#6C5C27\",\n hair: \"#493B0E\",\n shirt: \"maroon\",\n background: \"#5BAB8D\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"familyStyleB = ({\n face: \"#6C5C27\",\n hair: \"#493B0E\",\n shirt: \"maroon\",\n background: \"goldenrod\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"familyStyleC = ({\n face: \"#D3B063\",\n hair: \"#38342B\",\n shirt: \"#962465\",\n background: \"#FFCD25\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"# Create your own template\nYes, if you have a vector editing program you could use that","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":791,"value":"layout = FileAttachment(\"layout.PNG\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"If you make a custom svg with following id's
border,texture-hair,hair,texture-shirt,shirt,texture-face,face,texture-background,background
and stacked with **background** at the **top** (the image is reversed since it is in illustrator, but it should be reversed for draw order) for an svg to render correctly. The *texture-* groups are without fill or stroke.\n\n

`
``
``
``
``
``
``
``
``
``
``

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":812,"value":"Vectors used from thenounproject
\nhttps://thenounproject.com/milindacourey10/
\nhttps://thenounproject.com/ines.simoes.pt.17/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":826,"value":"test8 = new CustomIcon({\n symbol: customPath,\n flag: { iso: \"gb\", opacity: 1 },\n fillColor: {\n face: \"#FFEBCD\",\n hair: \"black\",\n shirt: \"teal\",\n background: \"salmon\"\n },\n texture: {\n show: true,\n shirt: textures.lines().orientation(\"3/8\", \"7/8\").stroke(\"white\")\n }\n}).render","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"function axis(scale, title, colors) {\n return Object.assign(d3.axisBottom(scale.range([20, 300 - 20])), {\n render() {\n let svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, -16, width, 33])\n .call(this);\n\n svg\n .append(\"g\")\n .attr(\"transform\", \"translate(0,-9)\")\n .append(\"text\")\n .style(\"fill\", \"black\")\n .attr(\"text-anchor\", \"start\")\n .text(title);\n\n svg\n .selectAll(\".tick\")\n .append(\"circle\")\n .attr(\"r\", 4)\n .style(\"fill\", (d, i) => {\n return colors[i];\n })\n .style(\"stroke\", \"gray\")\n .style(\"stroke-width\", 0.5);\n\n return svg.node();\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"textures = require(\"textures\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"import { flagUrls as flagLink } from \"@mbrickmaps/flag-icons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"import { ramp } from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"tc = require(\"tinycolor2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"import {\n sec5color1,\n sec5color2,\n sec5color3,\n sec5color4,\n sec5color5,\n displayPalettes\n} from \"@mbrickmaps/colors\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"customPath = await FileAttachment(\"maleCustom@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"femalePath = await FileAttachment(\"female@3.svg\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"malePath = await FileAttachment(\"male@3.svg\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"femaleChildPath = await FileAttachment(\"female child@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"maleChildPath = await FileAttachment(\"male child@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"