30:T790,{ const cartesian = new Cartesian(); cartesian.push({ type: "plane", width: width - 64, height: 400 }); cartesian.push({ type: "point", data: [ { x: -4, y: -8, color: "red" }, { x: 3, y: 4, color: "blue" }, { x: 4, y: 3, color: "red" }, { x: 4, y: 2, color: "yellow" } ] }); cartesian.push({ type: "line", data: [ { gradient: -2, offset: 4, color: "red", type: "d" }, { gradient: 0, offset: 0, color: "blue" }, { gradient: Infinity, offset: 0 } ] }); cartesian.push({ type: "segment", data: { points: [ [-1, -9], [2, -9] ], type: "d" } }); cartesian.push({ type: "triangle", data: { name: "Sample Triangle", points: [ [-4.0, -6.4], [2.0, 6.0], [4.0, -5.3] ] } }); cartesian.push({ type: "parallelogram", data: { name: "sample parallelogram", point: [-1, 4], width: 2, height: 2, angle: 45 } }); cartesian.push({ type: "rectangle", data: { name: "sample rectangle", point: [-1, 0], width: 2, height: 2 } }); cartesian.push({ type: "square", data: { name: "sample square", point: [2, 0], length: 2 } }); cartesian.push({ type: "circle", data: { center: [0, 0], radius: 2, startAngle: 0, endAngle: Math.PI * 90 } }); cartesian.push({ type: "curves", data: { func: (x) => x * x, domain: (x) => x >= 0, color: "blue", step: 0.01, type: "line", inverse: true } }); cartesian.push({ type: "curves", data: { func: (x) => 0.5 * x * x * x + 1.5 * x * x, domain: (x) => true, color: "purple", step: 0.01, type: "point", inverse: false } }); return cartesian.draw(); }31:T4ca,{ const cartesian = new Cartesian(); cartesian.push({ type: "plane", width: 480, height: 480, axes: { y: { domain: [-5, 5] } } }); cartesian.push({ type: "vector", data: [ { point: [0.0, 0], length: 4, angle: 0, type: "d" }, { point: [0.0, 0], length: 3 * Math.sqrt(2), angle: Math.PI / 4, marker: "dash-arrow" }, { point: [0.0, 0], length: 4, angle: Math.PI / 2, type: "d" }, { point: [0.0, 0], length: 3 * Math.sqrt(2), angle: (Math.PI * 3) / 4, marker: "dash-arrow" }, { point: [0.0, 0], length: 4, angle: Math.PI, type: "d" }, { point: [0.0, 0], length: 3 * Math.sqrt(2), angle: (Math.PI * 5) / 4, marker: "dash-arrow" }, { point: [0.0, 0], length: 4, angle: (Math.PI * 3) / 2, type: "d" }, { point: [0.0, 0], length: 3 * Math.sqrt(2), angle: (Math.PI * 7) / 4, marker: "dash-arrow" } ] }); return cartesian.draw(); }32:T6f2,function Cartesian() { this.svg = undefined; this.elements = []; this.plane = _plane; this.point = _point; this.line = _line; this.segment = _segment; this.triangle = _triangle; this.polygon = _polygon; this.parallelogram = _parallelogram; this.rectangle = _rectangle; this.square = _square; this.circle = _circle; this.curves = _curves; this.annotation = _annotation; this.discontinuousCurve = _discontinuousCurve; this.continuousCurve = _continuousCurve; this.vector = _vector; Cartesian.prototype.push = function (ele) { if (ele === undefined || ele === null) { return; } if (Object.prototype.toString.call(ele) === "[object Object]") { this.elements.push(ele); return; } if (Object.prototype.toString.call(ele) === "[object Array]") { if (ele.length > 0) { ele.forEach((item) => this.elements.push(item)); } return; } }; Cartesian.prototype.draw = function () { const executors = { plane: "plane", point: "point", line: "line", segment: "segment", triangle: "triangle", parallelogram: "parallelogram", rectangle: "rectangle", square: "square", circle: "circle", curves: "curves", annotation: "annotation", discontinuousCurve: "discontinuousCurve", continuousCurve: "continuousCurve", vector: "vector" }; if (this.elements.length == 0) { return; } for (let i = 0; i < this.elements.length; i++) { const ele = this.elements[i]; if (ele.type === undefined) { continue; } if (executors[ele.type] === undefined) { continue; } this[executors[ele.type]](ele); } return this.svg.node(); }; }33:T62c,function _plane(ele) { if (this.svg !== undefined) { return; } const { width, height, margin, axes } = ele; const fixedMargin = { left: 32, top: 32, right: 32, bottom: 32, ...margin }; const fixedAxes = { x: { domain: [-5, 5], ticks: 10 }, y: { domain: [-10, 10], ticks: 10 }, ...axes }; this.domain = { x: fixedAxes.x.domain, y: fixedAxes.y.domain }; const svgNode = DOM.svg( width + fixedMargin.left + fixedMargin.right, height + fixedMargin.top + fixedMargin.bottom ); this.svg = d3.select(svgNode); this.xscale = d3.scaleLinear().domain(fixedAxes.x.domain).range([0, width]); const xaxis = (g) => { return g .call(d3.axisBottom(this.xscale).ticks(fixedAxes.x.ticks)) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .attr("y2", -height) .attr("stroke-opacity", 0.1) ); }; this.yscale = d3.scaleLinear().domain(fixedAxes.y.domain).range([height, 0]); const yaxis = (g) => { return g .call(d3.axisLeft(this.yscale).ticks(fixedAxes.y.ticks)) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").attr("x2", width).attr("stroke-opacity", 0.1) ); }; this.ctx = this.svg .append("g") .attr("transform", `translate(${fixedMargin.left}, ${fixedMargin.top})`); this.ctx.append("g").attr("transform", `translate(0, ${height})`).call(xaxis); this.ctx.append("g").call(yaxis); }34:T8ac,function _line(ele) { if (this.ctx === undefined || ele.data === undefined) { return; } const generator = (gradient, offset) => { if (gradient == Infinity) { return [ [offset, this.domain.y[0]], [offset, this.domain.y[1]] ]; } if (gradient == 0) { return [ [this.domain.x[0], offset], [this.domain.x[1], offset] ]; } const data = []; if (gradient > 0) { const left = gradient * this.domain.x[0] + offset; if (left < this.domain.y[0]) { data.push([(this.domain.y[0] - offset) / gradient, this.domain.y[0]]); } else { data.push([this.domain.x[0], left]); } const right = gradient * this.domain.x[1] + offset; if (right > this.domain.y[1]) { data.push([(this.domain.y[1] - offset) / gradient, this.domain.y[1]]); } else { data.push([this.domain.x[1], right]); } } else { const left = gradient * this.domain.x[0] + offset; if (left > this.domain.y[1]) { data.push([(this.domain.y[1] - offset) / gradient, this.domain.y[1]]); } else { data.push([this.domain.x[0], left]); } const right = gradient * this.domain.x[1] + offset; if (right < this.domain.y[0]) { data.push([(this.domain.y[0] - offset) / gradient, this.domain.y[0]]); } else { data.push([this.domain.x[1], right]); } } return data; }; this.ctx .selectAll("path") .data(ele.data) .enter() .append("path") .attr("d", (d) => d3.line()( generator(d.gradient, d.offset).map((val) => [ this.xscale(val[0]), this.yscale(val[1]) ]) ) ) .attr("stroke", (d) => d.color || "black") .attr("stroke-width", (d) => d.width || 1.0) .attr("stroke-dasharray", (d) => (d.type === "d" ? 4.0 : undefined)) .append("title") .text((d) => { if (d.gradient == Infinity) { return `x = ${d.offset}`; } if (d.gradient == 0) { return `y = ${d.offset}`; } if (d.offset == 0) { return `y = ${d.gradient}x`; } return `y = ${d.gradient}x + ${d.offset}`; }); }35:T5e4,function _polygon(ele){ if (this.ctx === undefined || ele.data === undefined) { return; } const data = ele.data; // data need 4 attr // points // color (optional) // rotate (optional) // matrix (optional) // default colors const color = { point: '#fcdffb', fill: '#fcdffb', ...data.color }; // default rotate which angle figure the angle between two sides. if (data.rotate == undefined) { data.rotate = 0; } // group of svg to rotate const g = this.ctx .append('g') .attr( 'transform', `rotate(${data.rotate},${this.xscale(data.points[0])},${this.yscale( data.points[1] )})` ); // when use matrix, cover upon rotate attribute if (data.matrix != undefined && data.matrix.length == 6) { g.attr('transform', `matrix(${data.matrix})`); } // draw points. g.selectAll('circles') .data(data.points) .enter() .append('circle') .attr('r', 2.8) .attr('cx', d => this.xscale(d[0])) .attr('cy', d => this.yscale(d[1])) .attr('fill', color.point) .append('title') .text(d => `(${d[0]}, ${d[1]})`); // draw line and fill it with color. g.append('path') .attr('stroke', color.fill) .attr('stroke-width', '0.5') .attr( 'd', `${d3.line()( data.points.map(v => [this.xscale(v[0]), this.yscale(v[1])]) )}Z` ) .attr('fill', color.fill) .attr('fill-opacity', 0.4) .append('title') .text(data.name || 'Polygon'); }36:T6b5,function _parallelogram({ data }) { // parallelogram's data need 4 attr // point :origin angle's position // height :one side's length // width : another side's length // angle : the angle between two sides // if there is nothing about attr, Degenerate to draw a square with sides = 1 on [0,0] // At First Part Use data to genarate points, // for example parallelogram genatate 4 points first and then call polygon to draw graph. if (this.ctx === undefined || data === undefined) { return; } // angle scaler const angle = d3 .scaleLinear() .domain([-360, 360]) .range([-2 * Math.PI, 2 * Math.PI]); // default angle which angle figure the angle between two sides. if (data.angle == undefined) { data.angle = 90; } // if no data, default 1 if (data.width == undefined) { data.width = 1; } // if no height, means rect to square if (data.height == undefined) { data.height = data.width; } // if no origin point, use the origin of coordinates if (data.point != undefined) { data.point.push(0, 0); } data.points = []; // width and height mean length of side but not real height. data.points.push( data.point, [data.point[0] + data.width, data.point[1]], [ data.point[0] + data.width + data.height * Math.cos(angle(data.angle)), data.point[1] + data.height * Math.sin(angle(data.angle)) ], [ data.point[0] + data.height * Math.cos(angle(data.angle)), data.point[1] + data.height * Math.sin(angle(data.angle)) ] ); // data need 4 attr // points // color (optional) // rotate (optional) // matrix (optional) // default colors this.polygon({ data }); }37:[] 2e:{"title":"Cartesian","cells":[{"id":0,"value":"# Cartesian","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"md`## Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"dashArrow()","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"solidArrow()","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Constructor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Implements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`### Plane`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`### Points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"function _point(ele) {\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n\n this.ctx\n .selectAll(\"circle\")\n .data(ele.data)\n .enter()\n .append(\"circle\")\n .attr(\"r\", (d) => d.size || 4)\n .attr(\"cx\", (d) => this.xscale(d.x || d.point[0]))\n .attr(\"cy\", (d) => this.yscale(d.y || d.point[1]))\n .attr(\"fill\", (d) => d.color || \"#000000\")\n .append(\"title\")\n .text((d) => `(${d.x}, ${d.y})`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`### Line`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`### Segment`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"function _segment(ele) {\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n\n const color = {\n point: \"#9aceff\",\n stroke: \"#000000\",\n ...ele.data.color\n };\n const p = ele.data.points;\n const g = this.ctx.append(\"g\");\n\n if (ele.data.endpoints === true) {\n g.selectAll(\"circles\")\n .data(p)\n .enter()\n .append(\"circle\")\n .attr(\"r\", 2.8)\n .attr(\"cx\", (d) => this.xscale(d[0]))\n .attr(\"cy\", (d) => this.yscale(d[1]))\n .attr(\"fill\", color.point)\n .append(\"title\")\n .text((d) => `(${d[0]}, ${d[1]})`);\n }\n\n g.append(\"path\")\n .attr(\"d\", d3.line()(p.map((v) => [this.xscale(v[0]), this.yscale(v[1])])))\n .attr(\"stroke\", color.stroke)\n .attr(\"stroke-width\", ele.width || 1.0)\n .attr(\"stroke-dasharray\", ele.data.type === \"d\" ? 4.0 : undefined);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md `### Triangle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"function _triangle(ele) {\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n \n const color = {\n point: '#b2dffb',\n fill: '#b2dffb',\n ...ele.data.color\n };\n const p = ele.data.points;\n const g = this.ctx.append('g');\n\n g.selectAll('circles')\n .data(p)\n .enter()\n .append('circle')\n .attr('r', 2.8)\n .attr('cx', d => this.xscale(d[0]))\n .attr('cy', d => this.yscale(d[1]))\n .attr('fill', color.point)\n .append('title')\n .text(d => `(${d[0]}, ${d[1]})`);\n\n g.append('path')\n .attr('stroke', color.fill)\n .attr('stroke-width', '0.5')\n .attr(\n 'd',\n `${d3.line()(p.map(v => [this.xscale(v[0]), this.yscale(v[1])]))}Z`\n )\n .attr('fill', color.fill)\n .attr('fill-opacity', 0.4)\n .append('title')\n .text(ele.data.name || 'Triangle');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"md `### Polygon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md `### Parallelogram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md `### Rectangle `","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"function _rectangle(ele){\n // rectangle's data need 3 attr\n // point :origin angle's position\n // height :one side's length\n // width : another side's length\n // angle : the angle between two sides set to 90\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n \n ele.data.angle = 90;\n return this.parallelogram(ele);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md `### Square `","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"function _square(ele){\n // square's data need 3 attr\n // point :origin angle's position\n // sidelength : square's sidelength\n // angle : the angle between two sides set to 90\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n \n ele.data.angle = 90;\n ele.data.width = ele.data.length;\n return this.parallelogram(ele);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md `### Circle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"function _circle({\n data: {\n center = [0, 0],\n radius = 1,\n startAngle = 0,\n endAngle = 2 * Math.PI,\n stroke = \"black\",\n fill = \"none\",\n type = \"\",\n opacity = 0.5\n }\n}) {\n if (this.ctx === undefined) {\n return;\n }\n\n const transformRadius = (radius) => {\n return this.xscale(radius) - this.xscale(0);\n };\n this.ctx\n .append(\"g\")\n .append(\"path\")\n .attr(\n \"transform\",\n `translate(${this.xscale(center[0])} ${this.yscale(center[1])})`\n )\n .attr(\n \"d\",\n d3\n .arc()\n .innerRadius(0)\n .outerRadius(transformRadius(radius))\n .startAngle(startAngle)\n .endAngle(endAngle)\n )\n .attr(\"fill-opacity\", opacity)\n .attr(\"stroke\", stroke)\n .attr(\"fill\", fill)\n .attr(\"stroke-dasharray\", type === \"d\" ? \"5\" : \"0\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md `### Curves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"function _curves({\n data: {\n func,\n domain,\n color = \"black\",\n type = \"line\",\n step = 0.01,\n inverse = false\n }\n}) {\n if (this.ctx == undefined || func == undefined || domain == undefined) {\n return;\n }\n \n const mainAxis = \"x\";\n const slaveAxis = \"y\";\n const steps = d3.range(\n this.domain[mainAxis][0],\n this.domain[mainAxis][1],\n step\n );\n const DataSet = generateDataSet(steps, func, domain, inverse);\n\n if (type == \"line\") {\n this.continuousCurve({ data: { set: DataSet, color, inverse: false } });\n if (inverse) {\n this.continuousCurve({ data: { set: DataSet, color, inverse } });\n }\n } else {\n let FinalDataSet = DataSet.filter(\n (step) =>\n step[1] >= this.domain[slaveAxis][0] &&\n step[1] <= this.domain[slaveAxis][1]\n );\n\n this.discontinuousCurve({\n data: { set: FinalDataSet, color, inverse: false }\n });\n if (inverse) {\n this.discontinuousCurve({ data: { set: FinalDataSet, color, inverse } });\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"generateDataSet = (steps, func, domain) => {\n let tmpStep = domain ? steps.filter(domain) : steps;\n let tmpDataSet = [];\n tmpStep.map(step => {\n let mainCoordinate = step;\n let slaveCoordinate = func(step);\n tmpDataSet.push([mainCoordinate, slaveCoordinate]);\n });\n return tmpDataSet;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`### Annotation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"function _annotation(ele) {\n if (this.ctx == undefined || ele == undefined) {\n return;\n }\n\n const g = this.ctx.append(\"g\");\n\n g.selectAll(\"text\")\n .data(ele.data)\n .enter()\n .append(\"text\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", (d) => `${d.size || 12}px`)\n .attr(\"fill\", (d) => d.color || \"#ed8240\")\n .attr(\"x\", (d) => this.xscale(d.point[0]))\n .attr(\"y\", (d) => this.yscale(d.point[1]))\n .text((d) => d.text);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md `### DiscontinuousCurve `","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"function _discontinuousCurve(ele) {\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n \n this.ctx\n .append(\"g\")\n .selectAll(\"circles\")\n .data(ele.data.set)\n .enter()\n .append(\"circle\")\n .attr(\"r\", 0.8)\n .attr(\"cx\", (val) => this.xscale(ele.data.inverse == false ? val[0] : val[1]))\n .attr(\"cy\", (val) => this.yscale(ele.data.inverse == false ? val[1] : val[0]))\n .attr(\"fill\", ele.data.inverse == false ? ele.data.color || \"black\" : \"black\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md `### ContinuousCurve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"function _continuousCurve(ele){\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n \n this.ctx\n .append('g')\n .selectAll('path')\n .data(ele.data.set)\n .enter()\n .append('path')\n .attr('d', d =>\n d3.line().curve(d3['curveBasis'])(\n ele.data.set.map(val => [\n this.xscale(ele.data.inverse == false ? val[0] : val[1]),\n this.yscale(ele.data.inverse == false ? val[1] : val[0])\n ])\n )\n )\n .attr('stroke-width', '1.6px')\n .attr('stroke', ele.data.inverse == false ? ele.data.color || 'black' : 'black')\n .attr('fill', 'none');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md `### Vector`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"function _vector(ele) {\n if (this.ctx === undefined || ele.data === undefined) {\n return;\n }\n\n const g = this.ctx.append(\"g\");\n const { sin, cos, abs } = Math;\n\n const markerSize = 10;\n const dx = (angle) =>\n this.xscale.invert(this.xscale(0) + markerSize * cos(angle));\n const dy = (angle) =>\n this.yscale.invert(this.yscale(0) - markerSize * sin(angle));\n\n g.selectAll(\"line\")\n .data(ele.data)\n .enter()\n .append(\"line\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-dasharray\", (d) => (d.type == \"d\" ? 2 : undefined))\n .attr(\"x1\", (d) => this.xscale(d.point[0]))\n .attr(\"y1\", (d) => this.yscale(d.point[1]))\n .attr(\"x2\", (d) =>\n this.xscale(d.point[0] + d.length * cos(d.angle) - dx(d.angle))\n )\n .attr(\"y2\", (d) =>\n this.yscale(d.point[1] + d.length * sin(d.angle) - dy(d.angle))\n )\n .attr('marker-end', d => `url(#${d.marker || 'solid-arrow'})`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md `### Arrow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"dashArrow = ({ id = 'dash-arrow', color = 'black' } = {}) => {\n return html`\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"solidArrow = ({ id = 'solid-arrow', color = 'black' } = {}) => {\n return html`\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}