30:T5ad,{ const { w, h } = { w: width - 64, h: 400 }; const plane = cartesianPlane(w, h); points(plane, [ { x: -4, y: -8, color: 'red' }, { x: 3, y: 4, color: 'blue' }, { x: 4, y: 3, color: 'red' }, { x: 4, y: 2, color: 'yellow' } ]); lines(plane, [ { gradient: -2, offset: 0, color: 'red', type: 'd' }, { gradient: 0, offset: 0, color: 'blue' }, { gradient: Infinity, offset: 0 } ]); segment(plane, { points: [[-1, -9], [2, -9]], type: 'd' }); triangle(plane, { name: 'Sample Triangle', points: [[-4.0, -6.4], [2.0, 6.0], [4.0, -5.3]] }); curves( plane, { func: x => x * x, domain: x => x >= 0 }, { color: 'blue', step: 0.01, type: 'line', inverse: true } ); curves( plane, { func: x => 0.5 * x * x * x + 1.5 * x * x, domain: x => true }, { color: 'purple', step: 0.01, type: 'point', inverse: false } ); parallelogram(plane, { name: 'sample parallelogram', point: [-1, 4], width: 2, height: 2, angle: 45 }); rectangle(plane, { name: 'sample rectangle', point: [-1, 0], width: 2, height: 2 }); square(plane, { name: 'sample square', point: [2, 0], length: 2 }); circle(plane, { center: [0, 0], radius: 2, startAngle: 0, endAngle: Math.PI * 90 }); return plane.svg.node(); }31:T42e,{ const { w, h } = { w: 480, h: 480 }; const plane = cartesianPlane(w, h, { axes: { y: { domain: [-5, 5] } } }); vector(plane, [ { 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 plane.svg.node(); }32:T66d,cartesianPlane = (width, height, { margin, axes } = {}) => { 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 }; const svgNode = DOM.svg( width + fixedMargin.left + fixedMargin.right, height + fixedMargin.top + fixedMargin.bottom ); const svg = d3.select(svgNode); const xscale = d3 .scaleLinear() .domain(fixedAxes.x.domain) .range([0, width]); const xaxis = g => { return g .call(d3.axisBottom(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) ); }; const yscale = d3 .scaleLinear() .domain(fixedAxes.y.domain) .range([height, 0]); const yaxis = g => { return g .call(d3.axisLeft(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) ); }; const g = svg .append('g') .attr('transform', `translate(${fixedMargin.left}, ${fixedMargin.top})`); g.append('g') .attr('transform', `translate(0, ${height})`) .call(xaxis); g.append('g').call(yaxis); return { svg, ctx: g, scale: { x: xscale, y: yscale }, domain: { x: fixedAxes.x.domain, y: fixedAxes.y.domain } }; }33:T83b,lines = (plane, data, type) => { const generator = (gradient, offset) => { if (gradient == Infinity) { return [[offset, plane.domain.y[0]], [offset, plane.domain.y[1]]]; } if (gradient == 0) { return [[plane.domain.x[0], offset], [plane.domain.x[1], offset]]; } const data = []; if (gradient > 0) { const left = gradient * plane.domain.x[0] + offset; if (left < plane.domain.y[0]) { data.push([(plane.domain.y[0] - offset) / gradient, plane.domain.y[0]]); } else { data.push([plane.domain.x[0], left]); } const right = gradient * plane.domain.x[1] + offset; if (right > plane.domain.y[1]) { data.push([(plane.domain.y[1] - offset) / gradient, plane.domain.y[1]]); } else { data.push([plane.domain.x[1], right]); } } else { const left = gradient * plane.domain.x[0] + offset; if (left > plane.domain.y[1]) { data.push([(plane.domain.y[1] - offset) / gradient, plane.domain.y[1]]); } else { data.push([plane.domain.x[0], left]); } const right = gradient * plane.domain.x[1] + offset; if (right < plane.domain.y[0]) { data.push([(plane.domain.y[0] - offset) / gradient, plane.domain.y[0]]); } else { data.push([plane.domain.x[1], right]); } } return data; }; plane.ctx .selectAll('path') .data(data) .enter() .append('path') .attr('d', d => d3.line()( generator(d.gradient, d.offset).map(val => [ plane.scale.x(val[0]), plane.scale.y(val[1]) ]) ) ) .attr('stroke', d => d.color || 'black') .attr('stroke-width', '1.6') .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}`; }); }34:T66d,parallelogram = (plane, 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. // 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 polygon(plane, data); }35:T592,polygon = (plane, 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 = plane.ctx .append('g') .attr( 'transform', `rotate(${data.rotate},${plane.scale.x(data.points[0])},${plane.scale.y( 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 => plane.scale.x(d[0])) .attr('cy', d => plane.scale.y(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 => [plane.scale.x(v[0]), plane.scale.y(v[1])]) )}Z` ) .attr('fill', color.fill) .attr('fill-opacity', 0.4) .append('title') .text(data.name || 'Polygon'); }36:[] 2e:{"title":"Math & Visualization","cells":[{"id":0,"value":"md`# Math & Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`\n## References\n- [List of Unicode Characters](https://en.wikipedia.org/wiki/List_of_Unicode_characters)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n## Linear\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\n- [Linear Equations](https://www.varsitytutors.com/hotmath/hotmath_help/topics/graphing-linear-equations.html)\n- [Mathsis Fun](https://www.mathsisfun.com/algebra/linear-equations.html)\n- [Wikipedia Linear Equations](https://en.wikipedia.org/wiki/Linear_equation)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`\n## D3\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`\n### Shapes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"md`\n### Vector\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"solidArrow()","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"dashArrow()","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`\n### General\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`\n#### Axis\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`\n- [D3 Scale](https://github.com/d3/d3-scale)\n- [D3 Axis](https://github.com/d3/d3-axis/blob/v1.0.12/README.md)\n- [SVG Element g](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g)\n- [CSS Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)\n- [Attribute Transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`\n#### Dots\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`\n- [data](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_data)\n- [enter](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_enter)\n- [SVG Element Circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"points = (plane, data) => {\n plane.ctx\n .selectAll('circle')\n .data(data)\n .enter()\n .append('circle')\n .attr('r', 4)\n .attr('cx', d => plane.scale.x(d.x))\n .attr('cy', d => plane.scale.y(d.y))\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":244,"value":"md`\n#### Lines\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`\n- [SVG Element Path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)\n- [Infinity](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity)\n- [D3 Shape](https://github.com/d3/d3-shape)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"md`\n#### Segment\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"segment = (plane, data, type) => {\n const color = {\n point: '#9aceff',\n stroke: '#9aceff',\n ...data.color\n };\n const p = data.points;\n const g = plane.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 => plane.scale.x(d[0]))\n .attr('cy', d => plane.scale.y(d[1]))\n .attr('fill', color.point)\n .append('title')\n .text(d => `(${d[0]}, ${d[1]})`);\n\n g.append('path')\n .attr(\n 'd',\n d3.line()(p.map(v => [plane.scale.x(v[0]), plane.scale.y(v[1])]))\n )\n .attr('stroke', color.stroke)\n .attr('stroke-width', 1.6)\n .attr('stroke-dasharray', data.type === 'd' ? 4.0 : undefined);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md`\n#### Triangle\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"triangle = (plane, data) => {\n const color = {\n point: '#b2dffb',\n fill: '#b2dffb',\n ...data.color\n };\n const p = data.points;\n const g = plane.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 => plane.scale.x(d[0]))\n .attr('cy', d => plane.scale.y(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 => [plane.scale.x(v[0]), plane.scale.y(v[1])]))}Z`\n )\n .attr('fill', color.fill)\n .attr('fill-opacity', 0.4)\n .append('title')\n .text(data.name || 'Triangle');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`\n#### curves\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"curves = (\n plane,\n { func, domain },\n { color = 'black', type = 'line', step = 0.01, inverse = false }\n) => {\n if (func == undefined || domain == undefined) {\n return Error('need func and domain');\n }\n const mainAxis = 'x';\n const slaveAxis = 'y';\n const steps = d3.range(\n plane.domain[mainAxis][0],\n plane.domain[mainAxis][1],\n step\n );\n const DataSet = generateDataSet(steps, func, domain, inverse);\n\n if (type == 'line') {\n continuousCurve(plane, DataSet, { color });\n if (inverse) {\n continuousCurve(plane, DataSet, { color, inverse });\n }\n } else {\n let FinalDataSet = DataSet.filter(\n step =>\n step[1] >= plane.domain[slaveAxis][0] &&\n step[1] <= plane.domain[slaveAxis][1]\n );\n\n discontinuousCurve(plane, FinalDataSet, { color });\n if (inverse) {\n discontinuousCurve(plane, FinalDataSet, { color, inverse });\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"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":422,"value":"discontinuousCurve = (plane, dataSet, { color, inverse = false }) => {\n plane.ctx\n .append('g')\n .selectAll('circles')\n .data(dataSet)\n .enter()\n .append('circle')\n .attr('r', 0.8)\n .attr('cx', val => plane.scale.x(inverse == false ? val[0] : val[1]))\n .attr('cy', val => plane.scale.y(inverse == false ? val[1] : val[0]))\n .attr('fill', inverse == false ? color || 'black' : 'black');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"continuousCurve = (plane, dataSet, { color, inverse = false }) => {\n plane.ctx\n .append('g')\n .selectAll('path')\n .data(dataSet)\n .enter()\n .append('path')\n .attr('d', d =>\n d3.line().curve(d3['curveBasis'])(\n dataSet.map(val => [\n plane.scale.x(inverse == false ? val[0] : val[1]),\n plane.scale.y(inverse == false ? val[1] : val[0])\n ])\n )\n )\n .attr('stroke-width', '1.6px')\n .attr('stroke', inverse == false ? color || 'black' : 'black')\n .attr('fill', 'none');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`\n#### Parallelogram\n- [SVG Transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)\n\n parallelogram(plane, data)'s \ndata need 4 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\n\nif there is nothing about attr, Degenerate to draw a square with sides = 1 on [0,0]\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`- [SVG Transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`\n#### Rectangle\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\ndefault angle: the angle between two sides default set to 90\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"rectangle = (plane, data) => {\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 data.angle = 90;\n return parallelogram(plane, data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`\n#### Square\n square's data need 2 attr\n - point: origin angle's position\n - sidelength: square's sidelength\n\ndefault angle: the angle between two sides set to 90\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"square = (plane, data) => {\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 data.angle = 90;\n data.width = data.length;\n return parallelogram(plane, data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"md`\n#### polygon draw function\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`#### Circle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"circle = (\n plane,\n {\n center = [0, 0],\n radius = 1,\n startAngle = 0,\n endAngle = 2 * Math.PI,\n stroke = 'black',\n fill = 'none',\n opacity = 0.5\n }\n) => {\n const transformRadius = radius => {\n return plane.scale.x(radius) - plane.scale.x(0);\n };\n plane.ctx\n .append('g')\n .append('path')\n .attr(\n 'transform',\n `translate(${plane.scale.x(center[0])} ${plane.scale.y(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}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`\n#### Arrow\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"solidArrow = ({ id = 'solid-arrow', color = 'black' } = {}) => {\n return html`\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"dashArrow = ({ id = 'dash-arrow', color = 'black' } = {}) => {\n return html`\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"md`\n#### Vector\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"vector = (plane, data) => {\n const g = plane.ctx.append('g');\n const { sin, cos, abs } = Math;\n\n const markerSize = 10;\n const dx = angle =>\n plane.scale.x.invert(plane.scale.x(0) + markerSize * cos(angle));\n const dy = angle =>\n plane.scale.y.invert(plane.scale.y(0) - markerSize * sin(angle));\n\n g.selectAll('line')\n .data(data)\n .enter()\n .append('line')\n .attr('stroke', 'black')\n .attr('stroke-dasharray', d => (d.type == 'd' ? 2 : undefined))\n .attr('x1', d => plane.scale.x(d.point[0]))\n .attr('y1', d => plane.scale.y(d.point[1]))\n .attr('x2', d =>\n plane.scale.x(d.point[0] + d.length * cos(d.angle) - dx(d.angle))\n )\n .attr('y2', d =>\n plane.scale.y(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":479,"value":"md`\n#### Annotation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"annotation = (plane, data) => {\n const g = plane.ctx.append('g');\n\n g.selectAll('text')\n .data(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 => plane.scale.x(d.point[0]))\n .attr('y', d => plane.scale.y(d.point[1]))\n .text(d => d.text);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}