2c:null 2d:["$","title",null,{"children":"Hanzi 汉字漢字 | Yutao Huang | Observable"}] 32:T53f,breakDownStrokes = async characters => { if (characters.length === 0) { return html`

👆 Please enter some Chinese characters first! 👆

`; } try { const svg = d3 .select(DOM.svg(width, 45 * characters.length)) .style("border", "1px solid salmon; marginRight: 3px"); for (var index = 0; index < characters.length; index++) { let hanziData = await HanziWriter.loadCharacterData(characters.charAt(index)); if (!hanziData) { continue; } let strokesPortions = []; for (var i = 0; i < hanziData.strokes.length; i++) { var strokesPortion = hanziData.strokes.slice(0, i + 1); strokesPortions.push(strokesPortion.join(" ")); } const transformData = HanziWriter.getScalingTransform(40, 40); svg .append("g") .attr("transform", transformData.transform) .selectAll("path") .data(strokesPortions) .enter() .append("path") .attr("transform", (d, i) => `translate(${i * 1100}, ${-index * 1200})`) .attr("d", d => d) .attr("fill", "#555") .attr("opacity", 1); } return svg.node(); } catch (error) { return html`

Ooops~ couldn't find the strokes for that character. Please try another one...

`; } }33:[] 30:{"id":"fccc80d93b032f61","slug":"hanzi","title":"Hanzi 汉字漢字","thumbnail":"90e5be5b1de7465114d53bae3f83e99692cc30412efd8b609e5dd231131afa17","access_level":"public","create_time":"$D2019-03-30T04:11:46.233Z","update_time":"$D2023-09-24T17:11:11.022Z","view_time":null,"first_public_time":"$D2021-07-26T23:19:38.567Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"480a7976b0c9b12e","login":"yutao-huang","name":"Yutao Huang","avatar_url":"https://avatars-next.observableusercontent.com/5976efbd83cddc8171513d7a10e1734bc115c59fee0ee904b225a1a1852ec514","tier":"starter_2024"},"version":454,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac3b0e3d892a3e84","login":"yutao-huang","name":"Yutao Huang","avatar_url":"https://avatars-next.observableusercontent.com/5976efbd83cddc8171513d7a10e1734bc115c59fee0ee904b225a1a1852ec514","tier":null}],"members":[{"type":"individual","id":"ac3b0e3d892a3e84","login":"yutao-huang","name":"Yutao Huang","avatar_url":"https://avatars-next.observableusercontent.com/5976efbd83cddc8171513d7a10e1734bc115c59fee0ee904b225a1a1852ec514","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hanzi 汉字漢字","cells":[{"id":0,"value":"md`# Hanzi 汉字漢字`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof characters = text({\n description: \"Enter the Chinese characters you want to learn how to write\",\n submit: \"OK\",\n value: \"你好世界\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"{\n const playButton = html``;\n playButton.addEventListener(\"click\", () => {\n // Check if the browser supports the SpeechSynthesis API\n if ('speechSynthesis' in window) {\n // Create a new SpeechSynthesisUtterance\n var utterance = new SpeechSynthesisUtterance(characters); // Replace this text with what you want to say\n \n // Set the language to Chinese (Mandarin)\n utterance.lang = 'zh-CN';\n \n // Use the browser's default voice for Chinese (Mandarin)\n utterance.voice = speechSynthesis.getVoices().find(function(voice) {\n return voice.lang === 'zh-CN';\n });\n \n // Speak the text\n window.speechSynthesis.speak(utterance);\n } else {\n console.log('Speech synthesis not supported in this browser.');\n }\n });\n return playButton;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"pinyin = html`

${chineseToPinyin(characters)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"animatedStrokes = {\n if (characters.length === 0) {\n return md``;\n }\n\n return hanzi(characters);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"strokes = breakDownStrokes(characters)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import {text, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {hanzi} from \"@mbostock/hello-hanzi-writer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"HanziWriter = require(\"hanzi-writer@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"chineseToPinyin = require('https://bundle.run/chinese-to-pinyin@1.3.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"