3f:null 40:["$","title",null,{"children":"Learning Notes | Yu Ji's Workspace | Observable"}] 46:T807,function create_wafermap(diameter) { //var diameter = 200 * 2; var height = diameter * 2; var die_width = 15.68; var die_height = 15.82; const svg = d3.create("svg").attr("width", width).attr("height", height); var wafer_open = Array.from({ length: 91 }, (_, i) => [ Math.PI * (110 / 100) + (Math.PI / 50) * i, // angle (in radians) diameter / 2 // radius ]); var wafer_closed = wafer_open.concat(wafer_open.slice(0, 1)); let wafer = svg .append("g") .attr("id", "wafer_outline") .append("path") .attr("d", (x) => d3.lineRadial()(wafer_closed)) .attr("transform", `translate(${width / 2}, ${height / 2})`) .attr("fill", "none") .attr("stroke", "black"); const dies = die_positions(diameter, die_width, die_height); let map_wireframe = svg .append("g") .attr("id", "map_wireframe") .selectAll("rect"); map_wireframe.data(dies).join((enter) => enter .append("rect") .attr("x", (d) => width / 2 + (d.x - 1) * die_width) .attr("y", (d) => height / 2 + d.y * die_height) .attr("width", die_width) .attr("height", die_height) .attr("fill", "none") .attr("stroke", "black") .attr("text", "hello") ); let rects = svg.append("g").attr("id", "dies").selectAll("rect"); return Object.assign(svg.node(), { update(data) { debugger; rects = rects .data(data.runs, (d) => d.id) .join( (enter) => enter .append("rect") .attr("x", (d) => width / 2 + (d.position.x - 1) * die_width) .attr("y", (d) => height / 2 + d.position.y * die_height) .attr("width", die_width) .attr("height", die_height) .attr("fill", (d) => (d.status == "OK" ? "green" : "red")) .attr("stroke", "black") .attr("opacity", "0"), (update) => update, (exit) => exit.remove() ) .call((rects) => rects.transition().duration(t).attr("opacity", "1")); } }); }47:T582,example_docs = [ { id: "ddfa5f62fb4dde91", version: 111, slug: "rotating-voronoi", publish_time: "2018-10-27T06:07:30.116Z", thumbnail: "b59ab95bb8a1369fd08ff99cdd40e4d6eeb80145d46b07b4237a1a9d70a65d1d", title: "Rotating Voronoi", update_time: "2018-10-27T06:07:38.843Z", likes: 12, fork_of: false, owner: { id: "074c414ad1d825f5", github_login: "observablehq", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/", type: "individual" } }, { id: "a62fe403633f342f", version: 230, slug: "sphoise", publish_time: "2018-07-09T22:01:43.538Z", thumbnail: "6c8f158f53f7dadadc2c1b48a25446c779bee58656add64a1f782299805f9a6f", title: "Sphoise", update_time: "2018-10-21T05:06:04.275Z", likes: 14, fork_of: false, owner: { id: "783616ba9fb55f5d", github_login: "observablehq", avatar_url: "https://avatars3.githubusercontent.com/u/4732?v=4", login: "jashkenas", name: "Jeremy Ashkenas", bio: "Working on @observablehq.\n🏍 🌎 👶", home_url: "http://ashkenas.com", type: "individual" } } ]48:T1013,echarts_test2 = { var myChart = echarts.init(document.getElementById("main2222")); // data code part var option = { color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"], title: { text: "Gradient Stacked Area Chart" }, tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } } }, legend: { data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: [ { type: "category", boundaryGap: false, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } ], yAxis: [ { type: "value" } ], series: [ { name: "Line 1", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(128, 255, 165)" }, { offset: 1, color: "rgb(1, 191, 236)" } ]) }, emphasis: { focus: "series" }, data: [140, 232, 101, 264, 90, 340, 250] }, { name: "Line 2", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(0, 221, 255)" }, { offset: 1, color: "rgb(77, 119, 255)" } ]) }, emphasis: { focus: "series" }, data: [120, 282, 111, 234, 220, 340, 310] }, { name: "Line 3", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(55, 162, 255)" }, { offset: 1, color: "rgb(116, 21, 219)" } ]) }, emphasis: { focus: "series" }, data: [320, 132, 201, 334, 190, 130, 220] }, { name: "Line 4", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(255, 0, 135)" }, { offset: 1, color: "rgb(135, 0, 157)" } ]) }, emphasis: { focus: "series" }, data: [220, 402, 231, 134, 190, 230, 120] }, { name: "Line 5", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, label: { show: true, position: "top" }, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(255, 191, 0)" }, { offset: 1, color: "rgb(224, 62, 76)" } ]) }, emphasis: { focus: "series" }, data: [220, 302, 181, 234, 210, 290, 150] } ] }; // display plot myChart.setOption(option); }49:T518,

4a:[{"id":"52259f668e86fcf4ab6f1946edb36175504019571e0fc6ab5e586b6743f1d0162d6d4d57a26bdfe40768963df52d3b7ea540614635b241312ce7c7bcf5903a6e","href":"https://static.observableusercontent.com/files/52259f668e86fcf4ab6f1946edb36175504019571e0fc6ab5e586b6743f1d0162d6d4d57a26bdfe40768963df52d3b7ea540614635b241312ce7c7bcf5903a6e","name":"scatterplot matrix.png","type":"image/png","lastModified":1699500970574.672,"size":1276868}] 44:{"id":"7db3c7886430396a","slug":"learning-notes","title":"Learning Notes","thumbnail":"0d0d94f512fe9e895f25bccf23e5a2c8ae647111f3eee33566a8bc71efe4224e","access_level":"public","create_time":"$D2023-11-08T03:41:46.665Z","update_time":"$D2023-11-30T02:27:23.680Z","view_time":null,"first_public_time":"$D2023-11-08T03:41:46.665Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e72f027c6e802fe8","login":"thanatos1111","name":"Yu Ji's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/499e6fc1676701b9732227ce52ca9de9a5bc96e03257abb039fc598e09f0f0be","tier":"starter_2024","bio":"","following":false},"version":921,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16ddb7facf80c061","login":"yu-ji","name":"Yu Ji","avatar_url":"https://avatars-next.observableusercontent.com/d4fa71970ba29aec9de7a1d321ca3dc33e461327e1a1dac7811a172ec18b7a0d","tier":null,"bio":"Javascript Newbie","following":false}],"members":[{"type":"team","id":"e72f027c6e802fe8","login":"thanatos1111","name":"Yu Ji's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/499e6fc1676701b9732227ce52ca9de9a5bc96e03257abb039fc598e09f0f0be","tier":"starter_2024","role":"editor"},{"type":"individual","id":"16ddb7facf80c061","login":"yu-ji","name":"Yu Ji","avatar_url":"https://avatars-next.observableusercontent.com/d4fa71970ba29aec9de7a1d321ca3dc33e461327e1a1dac7811a172ec18b7a0d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learning Notes","cells":[{"id":0,"value":"# Learning Notes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":803,"value":"## Index\n- [Load Local CSV file](Load Local CSV file)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"[Convert JavaScript to Observable JavaScript](https://observablehq.com/@tophtucker/convert-javascript-to-observable-javascript)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"plot_1 = Plot.plot({\n marks: [\n Plot.dot(cars, {\n x: \"power (hp)\",\n y: \"economy (mpg)\",\n r: \"weight (lb)\",\n fill: \"cylinders\",\n tip: true\n })\n ],\n color: {\n domain: [3, 4, 6, 8],\n legend: true\n },\n //r=radius, inside and outside plot.dot; outside r align r in different plot.dot together\n //when title name involves space and (), use (d) => d[\"titlename\"]\n //change dot size in next line\n r: { domain: d3.extent(cars, (d) => d[\"weight (lb)\"]), range: [1, 10] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"# Load Local CSV file ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"md`*Step one:* Require \\`d3-dsv\\` to parse the raw text.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"//d3 = require('d3-dsv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`*Step two:* Create a DOM file input as an Observable \\`viewof\\`. Adding a local file in this manner will expose the value of the input to the rest of the notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof f = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`*Step three:* Use [\\`Files.text(\\`*file*\\`)\\`](https://github.com/observablehq/notebook-stdlib#files) from the Observable stdlib to read the local input into memory and parse. (NOTE: \\`Files.text()\\` returns a promise of a string, so be sure to use \\`await\\`)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"//data_csv = d3.csvParse(await Files.text(f)) //first row as titles\ndata_csv = d3.csvParseRows(await Files.text(f)) //first row as data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"data_csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"# Read Local xlsx file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"viewof xlsxfile = Inputs.file({\n label: \"Excel file\",\n accept: \".xlsx\",\n required: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"workbook = xlsxfile.xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"workbook.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"Inputs.table(workbook.sheet(sheet, { headers: true }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"viewof sheet = Inputs.radio(workbook.sheetNames, {\n value: workbook.sheetNames[0]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"data_xlsx = workbook.sheet(sheet)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"data_xlsx_1 = data_xlsx.slice(1) // Remove the first object","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"Plot.plot({\n marks: [\n Plot.dot(data_xlsx_1, {\n x: \"A\",\n y: \"B\",\n stroke: \"B\",\n //r: \"B\",\n fill: \"B\",\n tip: true,\n opacity: 0.4\n }),\n Plot.line(data_xlsx_1, {\n x: \"A\",\n y: \"B\",\n //fill: \"B\",\n opacity: 0.7\n })\n ],\n //style: {\n //opacity: 0.5\n //},\n color: {\n legend: true\n }\n //r: { domain: d3.extent(data_xlsx_1, (d) => d[\"B\"]), range: [1, 5] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"# Create WaferMap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"diameter = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"height = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"t = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"function die_positions(diameter, width, height) {\n var x_max = Math.ceil(diameter / 2 / width);\n var y_max = Math.ceil(diameter / 2 / height);\n var all_elements = cartesian(\n d3.range(-x_max, x_max),\n d3.range(-y_max, y_max)\n );\n return all_elements\n .map((coord) => ({ x: coord[0], y: coord[1] }))\n .filter((coord) => {\n var outer_corner_vector = map_wafer_coord_to_outer_corner_vector(\n coord,\n width,\n height\n );\n // debugger;\n return (\n diameter / 2 >\n Math.sqrt(outer_corner_vector.x ** 2 + outer_corner_vector.y ** 2)\n );\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"function map_wafer_coord_to_outer_corner_vector(coord, width, height) {\n return {\n x: coord.x > 0.5 ? coord.x * width : (coord.x - 1) * width,\n y: coord.y < -0.5 ? coord.y * height : (coord.y + 1) * height\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"cartesian = (...a) =>\n a.reduce((a, b) => a.flatMap((d) => b.map((e) => [d, e].flat())))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"wafermap = create_wafermap(diameter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"# Create WaferMap #2 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"waferMapData = [\n [1, 1, 1, 1, 0],\n [1, 1, 1, 0, 0],\n [0, 1, 1, 1, 0],\n [0, 0, 1, 1, 1],\n [0, 0, 0, 1, 1]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"cellSize = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"svg = d3.select(\"#wafer-map\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"cells = svg\n .selectAll(\"g\")\n .data(waferMapData)\n .enter()\n .append(\"g\")\n .attr(\n \"transform\",\n (d, i) => `translate(${padding},${padding + i * cellSize})`\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"cells\n .selectAll(\"rect\")\n .data((d) => d)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * cellSize)\n .attr(\"y\", 0)\n .attr(\"width\", cellSize)\n .attr(\"height\", cellSize)\n .attr(\"fill\", (d) => (d === 1 ? \"green\" : \"red\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"## The scatterplot matrix\n\n${await FileAttachment(\"scatterplot matrix.png\").image({width: 400, align: \"right\"})}\n\nPut image aside the text\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## attach image on right side of text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":444,"value":"# Filtering and highlighting \n[this notebook](https://observablehq.com/@observablehq/lesson-3-interaction?collection=@observablehq/advanced-data-vis-course)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"viewof minWeight = Inputs.range(d3.extent(cars, d => d[\"weight (lb)\"]), {label: \"Min Weight\", step: 1, value: d3.min(cars, d => d[\"weight (lb)\"])})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"viewof maxWeight = Inputs.range(d3.extent(cars, d => d[\"weight (lb)\"]), {label: \"Max Weight\", step: 1, value: d3.max(cars, d => d[\"weight (lb)\"])})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"viewof pinCarAxes = Inputs.toggle({label: \"Pin Axes\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"viewof mode = Inputs.select([\"Filter\", \"Highlight\"], {label: \"Mode\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"Plot.plot({\n marks: [\n Plot.dot((mode === \"Filter\" ? carsFiltered : cars), {x: \"power (hp)\", y: \"economy (mpg)\", title: \"name\",\n fill: d => (mode === \"Filter\" ? \"black\" : \n (d[\"weight (lb)\"] >= minWeight && d[\"weight (lb)\"] <= maxWeight ?\n \"steelblue\" : \"lightgray\"))})\n ],\n x: {\n domain: (pinCarAxes || mode === \"Highlight\") ? [40, 240] : undefined\n },\n y: {\n domain: (pinCarAxes || mode === \"Highlight\") ? [8, 48] : undefined\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"carsFiltered = cars.filter(\n (d) => d[\"weight (lb)\"] >= minWeight && d[\"weight (lb)\"] <= maxWeight\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"# Preview Slider Value without actual changing\n[this notebook](https://observablehq.com/@tophtucker/hover-slider?collection=@tophtucker/utilities)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":531,"value":"import { slider as slider_test } from \"@tophtucker/hover-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"viewof x = slider_test()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"# Moving Average\n[Line Graph with moving Average](https://observablehq.com/@deckerlukas/line-graph-with-moving-average)\n\n\n[Multiple-Pass Moving Average Filters](https://observablehq.com/@skybrian/multiple-pass-moving-average-filters)\n\n[Line with moving average](https://observablehq.com/@observablehq/plot-line-with-moving-average)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":668,"value":"---","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"# Ploty - Selection, Filtering, Lasso Slection\n[Selection and Filtering\n](https://observablehq.com/d/e328ba0126cac5be)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":692,"value":"# Nice look notebook list\n[Notebook Teasers](https://observablehq.com/@mootari/notebook-teasers?collection=@mootari/widgets)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":715,"value":"import {\n //mutiple functions or viewof from same notebook, can be in a single import!\n teaserList,\n renderTeaser,\n getScopedStyle,\n viewof THEME_TEASERS\n} from \"@mootari/notebook-teasers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"html`

\n ${renderTeaser({\n title: \"Remember notebooks?\",\n image: \"https://i.imgur.com/uw9hFtj.png\",\n href: \"https://en.wikipedia.org/wiki/Moleskine\",\n date_short: \"A long time ago\"\n })}\n ${getScopedStyle(\"#my-id\", THEME_TEASERS)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"html`

\n ${renderTeaser(example_docs[0])}\n ${getScopedStyle(\"#my-id\", THEME_TEASERS)}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"teaserList(example_docs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":761,"value":"# Echarts Usage\nReference:\n\n- [Echarts Demo](https://observablehq.com/@lyuehh/untitled)\n- [Plot Echarts Graph on observable](https://observablehq.com/@cottonsh/echarts-runner)\n- [${textcolor('Echarts Website Examples', d3.schemeTableau10[1])} ](https://echarts.apache.org/examples/en/index.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"//echarts = require(\"https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js\")\n//echarts = require('https://unpkg.com/echarts@4.0.2/index.js')\n//echarts = require('https://unpkg.com/echarts@4.0.2/dist/echarts.js')\necharts = require(\"echarts\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"echarts_test = {\n var myChart = echarts.init(document.getElementById(\"main1111\"));\n\n // data code part\n var option = {\n title: {\n text: \"ECharts Example\"\n },\n tooltip: {},\n legend: {\n data: [\"Sale\"]\n },\n xAxis: {\n data: [\"T-shirts\", \"Wool\", \"Fabric\", \"Trousers\", \"High Heel\", \"Socket\"]\n },\n yAxis: {},\n series: [\n {\n name: \"销量\",\n type: \"bar\",\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // display plot\n myChart.setOption(option);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"html`\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"echarts_test3 = {\n var myChart = echarts.init(document.getElementById(\"main3333\"));\n\n // data code part\n var option = {\n legend: {\n top: \"bottom\"\n },\n toolbox: {\n show: true,\n feature: {\n mark: { show: true },\n dataView: { show: true, readOnly: false },\n restore: { show: true },\n saveAsImage: { show: true }\n }\n },\n series: [\n {\n name: \"Nightingale Chart\",\n type: \"pie\",\n radius: [50, 250],\n center: [\"50%\", \"50%\"],\n roseType: \"area\",\n itemStyle: {\n borderRadius: 8\n },\n data: [\n { value: 40, name: \"rose 1\" },\n { value: 38, name: \"rose 2\" },\n { value: 32, name: \"rose 3\" },\n { value: 30, name: \"rose 4\" },\n { value: 28, name: \"rose 5\" },\n { value: 26, name: \"rose 6\" },\n { value: 22, name: \"rose 7\" },\n { value: 18, name: \"rose 8\" }\n ]\n }\n ]\n };\n\n // display plot\n myChart.setOption(option);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":791,"value":"# Notebook Flowchart\n[Notebook Flowchart](https://observablehq.com/@earthscope/notebook-flowchart)\n\n\n[Mermaid](https://observablehq.com/@observablehq/mermaid)\n\n[embedding only parts of notebook](https://talk.observablehq.com/t/embedding-only-parts-of-notebook/2470/4)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":798,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":806,"value":"---\n# Section bar\n\nReference: [Observable Plot](https://observablehq.com/@ee2dev/observable-plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":840,"value":"html`

\n ${renderTeaser({\n title: \"Observable Plot\",\n image: \"https://i.imgur.com/u4Nq1TW.png\",\n href: \"https://observablehq.com/@ee2dev/observable-plot\",\n date_short: \"Section Bar Style\"\n })}\n ${getScopedStyle(\"#my-id\", THEME_TEASERS)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"h = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"heading(`👉 Chapter 1`, 1, h, \"blue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"heading(`👉 Chapter 7`, 7, h, \"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"---\n# Selection range on data graph\nReference: [Select](https://observablehq.com/@radenroy/selection/2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"---\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":780,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"color reference: [Categorical schemes](https://d3js.org/d3-scale-chromatic/categorical)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"