{ "Line Shape": { "prefix": "lineHTML5", "body": [ "const lineCanvas = document.getElementById(\"lineCanvas\");", "const lineCtx = lineCanvas.getContext(\"2d\");", "lineCtx.beginPath();", "lineCtx.moveTo(30, 50);", "lineCtx.lineTo(170, 50);", "lineCtx.strokeStyle = \"blue\";", "lineCtx.lineWidth = 5;", "lineCtx.stroke();" ], "description": "Draws a Line on Canvas" }, "Rectangle Shape": { "prefix": "rectangleHTML5", "body": [ "const rectangleCanvas = document.getElementById(\"rectangleCanvas\");", "const rectangleCtx = rectangleCanvas.getContext(\"2d\");", "rectangleCtx.fillStyle = \"green\";", "rectangleCtx.fillRect(30, 20, 140, 60);", "rectangleCtx.strokeStyle = \"red\";", "rectangleCtx.lineWidth = 5;", "rectangleCtx.strokeRect(30, 20, 140, 60);" ], "description": "Draws a Rectangle on Canvas" }, "Circle Shape": { "prefix": "circleHTML5", "body": [ "const circleCanvas = document.getElementById(\"circleCanvas\");", "const circleCtx = circleCanvas.getContext(\"2d\");", "circleCtx.beginPath();", "circleCtx.arc(100, 50, 30, 0, 2 * Math.PI);", "circleCtx.fillStyle = \"yellow\";", "circleCtx.fill();", "circleCtx.strokeStyle = \"orange\";", "circleCtx.lineWidth = 5;", "circleCtx.stroke();" ], "description": "Draws a Circle on Canvas" }, "Arc Shape": { "prefix": "arcHTML5", "body": [ "const arcCanvas = document.getElementById(\"arcCanvas\");", "const arcCtx = arcCanvas.getContext(\"2d\");", "arcCtx.beginPath();", "arcCtx.arc(100, 50, 30, Math.PI / 4, Math.PI + Math.PI / 4);", "arcCtx.strokeStyle = \"purple\";", "arcCtx.lineWidth = 5;", "arcCtx.stroke();" ], "description": "Draws an Arc on Canvas" }, "Triangle Path Shape": { "prefix": "triangleHTML5", "body": [ "const pathCanvas = document.getElementById(\"pathCanvas\");", "const pathCtx = pathCanvas.getContext(\"2d\");", "pathCtx.beginPath();", "pathCtx.moveTo(100, 20);", "pathCtx.lineTo(70, 80);", "pathCtx.lineTo(130, 80);", "pathCtx.closePath();", "pathCtx.fillStyle = \"lightblue\";", "pathCtx.fill();", "pathCtx.strokeStyle = \"darkblue\";", "pathCtx.lineWidth = 5;", "pathCtx.stroke();" ], "description": "Draws a Triangle Path on Canvas" }, "House Shape": { "prefix": "houseHTML5", "body": [ "const houseCanvas = document.getElementById(\"houseCanvas\");", "const houseCtx = houseCanvas.getContext(\"2d\");", "// House base", "houseCtx.fillStyle = \"tan\";", "houseCtx.fillRect(30, 40, 140, 60);", "// Roof", "houseCtx.beginPath();", "houseCtx.moveTo(30, 40);", "houseCtx.lineTo(100, 10);", "houseCtx.lineTo(170, 40);", "houseCtx.closePath();", "houseCtx.fillStyle = \"brown\";", "houseCtx.fill();", "houseCtx.strokeStyle = \"black\";", "houseCtx.lineWidth = 5;", "houseCtx.stroke();" ], "description": "Draws a House (base + roof) on Canvas" }, "Pie Chart HTML5": { "prefix": "pieChartHTML5", "body": [ "const pieChartCanvas = document.getElementById('pieChartCanvas');", "const pieChartCtx = pieChartCanvas.getContext('2d');", "const pieData = [120, 80, 100];", "const pieColors = ['#FF9999', '#99FF99', '#9999FF'];", "const pieTotal = pieData.reduce((sum, value) => sum + value, 0);", "let pieAngle = 0;", "", "pieData.forEach((value, index) => {", " const sliceAngle = (value / pieTotal) * 2 * Math.PI;", " pieChartCtx.beginPath();", " pieChartCtx.moveTo(150, 150);", " pieChartCtx.arc(150, 150, 100, pieAngle, pieAngle + sliceAngle);", " pieChartCtx.closePath();", " pieChartCtx.fillStyle = pieColors[index];", " pieChartCtx.fill();", " pieAngle += sliceAngle;", "});" ], "description": "Draws a Pie Chart using HTML5 Canvas" }, "Star Shape HTML5": { "prefix": "starShapeHTML5", "body": [ "const starCanvas = document.getElementById('starCanvas');", "const starCtx = starCanvas.getContext('2d');", "const centerX = 150;", "const centerY = 150;", "const starOuterRadius = 80;", "const starInnerRadius = 40;", "const starPoints = 5;", "", "starCtx.beginPath();", "for (let i = 0; i <= starPoints * 2; i++) {", " const angle = (Math.PI * i) / starPoints;", " const radius = i % 2 === 0 ? starOuterRadius : starInnerRadius;", " const x = centerX + radius * Math.cos(angle - Math.PI / 2);", " const y = centerY + radius * Math.sin(angle - Math.PI / 2);", " if (i === 0) {", " starCtx.moveTo(x, y);", " } else {", " starCtx.lineTo(x, y);", " }", "}", "starCtx.closePath();", "starCtx.fillStyle = '#FFD700';", "starCtx.fill();", "starCtx.strokeStyle = '#FF4500';", "starCtx.stroke();" ], "description": "Draws a Star Shape using HTML5 Canvas" }, "Draw Text HTML5": { "prefix": "drawTextHTML5", "body": [ "const textCanvas = document.getElementById('textCanvas');", "const textCtx = textCanvas.getContext('2d');", "textCtx.font = '22px Verdana';", "textCtx.fillStyle = '#800080';", "textCtx.fillText('Canvas is Amazing!', 30, 75);" ], "description": "Draws Text on HTML5 Canvas" }, "Polygon Shape HTML5": { "prefix": "polygonShapeHTML5", "body": [ "const polygonCanvas = document.getElementById('polygonCanvas');", "const polygonCtx = polygonCanvas.getContext('2d');", "const polygonSides = 6;", "const polygonRadius = 90;", "const polygonCenterX = 150, polygonCenterY = 150;", "", "polygonCtx.beginPath();", "for (let i = 0; i <= polygonSides; i++) {", " const angle = (2 * Math.PI * i) / polygonSides;", " const x = polygonCenterX + polygonRadius * Math.cos(angle);", " const y = polygonCenterY + polygonRadius * Math.sin(angle);", " if (i === 0) {", " polygonCtx.moveTo(x, y);", " } else {", " polygonCtx.lineTo(x, y);", " }", "}", "polygonCtx.closePath();", "polygonCtx.strokeStyle = '#008080';", "polygonCtx.stroke();", "polygonCtx.fillStyle = '#80C0C0';", "polygonCtx.fill();" ], "description": "Draws a Regular Polygon on HTML5 Canvas" }, "Three Circles HTML5": { "prefix": "threeCirclesHTML5", "body": [ "const circlesCanvas = document.getElementById('circlesCanvas');", "const circlesCtx = circlesCanvas.getContext('2d');", "const interlinkedCircleData = [", " { x: 110, y: 150, radius: 50, color: '#FF5733' },", " { x: 150, y: 150, radius: 50, color: '#33FF57' },", " { x: 190, y: 150, radius: 50, color: '#3357FF' }", "];", "interlinkedCircleData.forEach(circle => {", " circlesCtx.beginPath();", " circlesCtx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);", " circlesCtx.strokeStyle = circle.color;", " circlesCtx.lineWidth = 5;", " circlesCtx.stroke();", "});" ], "description": "Draws Three Interlinked Circles on HTML5 Canvas" }, "earthRotationHTML5": { "prefix": "earthRotationHTML5", "body": [ "", "function earthRotation() {", " const canvas = document.getElementById(\"solarSystem\");", " const ctx = canvas.getContext(\"2d\");", " const cx = canvas.width / 2, cy = canvas.height / 2;", " let angle = 0;", " function drawStatic() {", " ctx.beginPath();", " ctx.arc(cx, cy, 30, 0, Math.PI * 2);", " ctx.fillStyle = \"#ffd700\";", " ctx.fill();", " ctx.beginPath();", " ctx.arc(cx, cy, 150, 0, Math.PI * 2);", " ctx.strokeStyle = \"#aaa\";", " ctx.stroke();", " }", " drawStatic();", " setInterval(() => {", " ctx.clearRect(0, 0, canvas.width, canvas.height);", " drawStatic();", " const ex = cx + 150 * Math.cos(angle);", " const ey = cy + 150 * Math.sin(angle);", " ctx.beginPath();", " ctx.arc(ex, ey, 15, 0, Math.PI * 2);", " ctx.fillStyle = \"#0099ff\";", " ctx.fill();", " angle += (0.1 * Math.PI / 180);", " }, 16);", "}", "earthRotation();", "</script>" ], "description": "Earth rotating around the Sun using canvas" }, "bouncingBallHTML5": { "prefix": "bouncingBallHTML5", "body": [ "", "function bouncingBall() {", " const canvas = document.getElementById(\"bouncingBall\");", " const ctx = canvas.getContext(\"2d\");", " let x = 50, y = 50, dx = 2, dy = 3;", " const r = 20, gravity = 0.25, damping = 0.8;", " setInterval(() => {", " ctx.clearRect(0, 0, canvas.width, canvas.height);", " dy += gravity;", " x += dx; y += dy;", " if (x + r > canvas.width || x - r < 0) {", " dx = -dx * damping;", " x = x < r ? r : canvas.width - r;", " }", " if (y + r > canvas.height || y - r < 0) {", " dy = -dy * damping;", " y = y < r ? r : canvas.height - r;", " }", " ctx.beginPath();", " ctx.arc(x, y, r, 0, Math.PI * 2);", " ctx.fillStyle = \"#ff4444\";", " ctx.fill(); ctx.strokeStyle = \"#333\"; ctx.stroke();", " }, 16);", "}", "bouncingBall();", "</script>" ], "description": "Bouncing ball animation using canvas" }, "rotatingFanHTML5": { "prefix": "rotatingFanHTML5", "body": [ "", "function rotatingFan() {", " const canvas = document.getElementById(\"rotatingFan\");", " const ctx = canvas.getContext(\"2d\");", " let angle = 0;", " setInterval(() => {", " ctx.clearRect(0, 0, canvas.width, canvas.height);", " ctx.save();", " ctx.translate(canvas.width / 2, canvas.height / 2);", " ctx.rotate(angle);", " ctx.fillStyle = \"#333\";", " for (let i = 0; i < 4; i++) {", " ctx.fillRect(0, -5, 60, 10);", " ctx.rotate(Math.PI / 2);", " }", " ctx.beginPath();", " ctx.arc(0, 0, 10, 0, Math.PI * 2);", " ctx.fillStyle = \"#666\";", " ctx.fill();", " ctx.restore();", " angle += 0.03;", " }, 16);", "}", "rotatingFan();", "</script>" ], "description": "Rotating fan animation using canvas" }, "saveAndRestoreHTML5": { "prefix": "saveAndRestoreHTML5", "body": [ "", "function saveAndRestore() {", " const canvas = document.getElementById(\"saveRestore\");", " const ctx = canvas.getContext(\"2d\");", " let angle = 0;", " setInterval(() => {", " ctx.clearRect(0, 0, canvas.width, canvas.height);", " ctx.fillStyle = \"blue\";", " ctx.fillRect(50, 50, 50, 50);", " ctx.save();", " ctx.translate(150, 75);", " ctx.rotate(angle);", " ctx.fillStyle = \"red\";", " ctx.fillRect(-25, -25, 50, 50);", " ctx.restore();", " ctx.fillStyle = \"green\";", " ctx.fillRect(250, 50, 50, 50);", " angle += 0.02;", " }, 16);", "}", "saveAndRestore();", "</script>" ], "description": "Save and restore context animation" }, "risingBubblesHTML5": { "prefix": "risingBubblesHTML5", "body": [ "", "function risingBubbles() {", " const canvas = document.getElementById(\"risingBubbles\");", " const ctx = canvas.getContext(\"2d\");", " const bubbles = [];", " for (let i = 0; i < 20; i++) {", " bubbles.push({", " x: Math.random() * canvas.width,", " y: canvas.height + Math.random() * 100,", " radius: Math.random() * 10 + 5,", " speed: Math.random() * 2 + 1,", " drift: (Math.random() - 0.5) * 0.5", " });", " }", " setInterval(() => {", " ctx.clearRect(0, 0, canvas.width, canvas.height);", " bubbles.forEach(b => {", " b.y -= b.speed;", " b.x += b.drift;", " if (b.y < -b.radius) {", " b.y = canvas.height + b.radius;", " b.x = Math.random() * canvas.width;", " }", " ctx.beginPath();", " ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2);", " ctx.fillStyle = \"rgba(173, 216, 230, 0.6)\";", " ctx.fill();", " ctx.strokeStyle = \"white\";", " ctx.stroke();", " });", " }, 16);", "}", "risingBubbles();", "</script>" ], "description": "Rising bubbles animation using canvas" }, "svgShapesHTML5": { "prefix": "svgBasicShapes", "body": [ "<svg class=\"svg-container\" width=\"800\" height=\"600\">", " <!-- Line -->", " <line x1=\"50\" y1=\"50\" x2=\"200\" y2=\"50\" stroke=\"red\" stroke-width=\"4\"/>", " <text x=\"50\" y=\"40\" fill=\"red\" font-family=\"Arial\" font-size=\"12\">Line</text>", "", " <!-- Circle -->", " <circle cx=\"100\" cy=\"200\" r=\"40\" fill=\"green\" stroke=\"black\" stroke-width=\"2\"/>", " <text x=\"70\" y=\"250\" fill=\"green\" font-family=\"Arial\" font-size=\"12\">Circle</text>", "", " <!-- Ellipse -->", " <ellipse cx=\"300\" cy=\"200\" rx=\"60\" ry=\"40\" fill=\"blue\" stroke=\"black\" stroke-width=\"2\"/>", " <text x=\"260\" y=\"250\" fill=\"blue\" font-family=\"Arial\" font-size=\"12\">Ellipse</text>", "", " <!-- Rectangle -->", " <rect x=\"500\" y=\"100\" width=\"150\" height=\"100\" rx=\"15\" ry=\"15\" fill=\"purple\" stroke=\"black\" stroke-width=\"2\"/>", " <text x=\"540\" y=\"220\" fill=\"purple\" font-family=\"Arial\" font-size=\"12\">Rounded Rectangle</text>", "", " <!-- Text -->", " <text x=\"50\" y=\"400\" fill=\"orange\" font-family=\"Verdana\" font-size=\"30\" font-weight=\"bold\">", " SVG Basics", " <tspan x=\"50\" y=\"440\" font-size=\"20\" fill=\"#666\">(Line, Circle, Ellipse, Rectangle, Text)</tspan>", " </text>", "</svg>" ], "description": "SVG drawing with line, circle, ellipse, rectangle, and text" }, "svgGradientsAndFiltersHTML5": { "prefix": "svgGradientsAndFilters", "body": [ "<svg width=\"500\" height=\"500\">", " <defs>", " <linearGradient id=\"linearGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">", " <stop offset=\"0%\" stop-color=\"blue\" />", " <stop offset=\"100%\" stop-color=\"red\" />", " </linearGradient>", "", " <radialGradient id=\"radialGrad\" cx=\"50%\" cy=\"50%\" r=\"50%\">", " <stop offset=\"0%\" stop-color=\"yellow\" />", " <stop offset=\"100%\" stop-color=\"green\" />", " </radialGradient>", "", " <filter id=\"blurFilter\">", " <feGaussianBlur stdDeviation=\"3\" />", " </filter>", "", " <filter id=\"dropShadowFilter\">", " <feDropShadow dx=\"5\" dy=\"5\" stdDeviation=\"2\" flood-color=\"black\" />", " </filter>", "", " <filter id=\"grayFilter\">", " <feColorMatrix type=\"saturate\" values=\"0\" />", " </filter>", " </defs>", "", " <polygon points=\"50,150 100,50 150,150\" fill=\"url(#linearGrad)\" />", "", " <polyline points=\"200,100 250,50 300,100 350,50 400,100\" stroke=\"black\" stroke-width=\"3\" fill=\"none\" />", "", " <path d=\"M50 250 Q150 150 250 250 T450 250\" stroke=\"purple\" stroke-width=\"3\" fill=\"none\" />", "", " <circle cx=\"350\" cy=\"350\" r=\"50\" fill=\"url(#radialGrad)\" />", "", " <rect x=\"50\" y=\"300\" width=\"100\" height=\"100\" fill=\"orange\" filter=\"url(#blurFilter)\" />", "", " <ellipse cx=\"200\" cy=\"350\" rx=\"80\" ry=\"40\" fill=\"cyan\" filter=\"url(#dropShadowFilter)\" />", "", " <rect x=\"10\" y=\"10\" width=\"80\" height=\"80\" fill=\"purple\" filter=\"url(#grayFilter)\" />", "</svg>" ], "description": "SVG example with gradients, filters, polygon, polyline, path, circle, rect, ellipse" }, "SVG Animation": { "prefix": "svgweather forecast", "body": [ "<svg width=\"600\" height=\"300\">", " <circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"yellow\">", " <animate attributeName=\"cx\" from=\"50\" to=\"550\" dur=\"10s\" repeatCount=\"indefinite\" />", " </circle>", " <g>", " <circle cx=\"100\" cy=\"100\" r=\"20\" fill=\"white\" />", " <circle cx=\"130\" cy=\"100\" r=\"25\" fill=\"white\" />", " <circle cx=\"120\" cy=\"80\" r=\"20\" fill=\"white\" />", " <animateTransform attributeName=\"transform\" type=\"translate\" from=\"0,0\" to=\"500,0\" dur=\"8s\" repeatCount=\"indefinite\" />", " </g>", " <g>", " <line x1=\"200\" y1=\"0\" x2=\"200\" y2=\"20\" stroke=\"blue\" stroke-width=\"2\">", " <animate attributeName=\"y1\" from=\"0\" to=\"300\" dur=\"2s\" repeatCount=\"indefinite\" />", " <animate attributeName=\"y2\" from=\"20\" to=\"320\" dur=\"2s\" repeatCount=\"indefinite\" />", " </line>", " </g>", " <g>", " <circle cx=\"300\" cy=\"0\" r=\"3\" fill=\"#ccc\">", " <animate attributeName=\"cy\" from=\"0\" to=\"300\" dur=\"5s\" repeatCount=\"indefinite\" values=\"0;300;0\" />", " </circle>", " <circle cx=\"350\" cy=\"0\" r=\"3\" fill=\"#ccc\">", " <animate attributeName=\"cy\" from=\"0\" to=\"300\" dur=\"6s\" repeatCount=\"indefinite\" values=\"0;300;0\" />", " </circle>", " </g>", "</svg>" ], "description": "SVG animated shapes with circles and lines" }, "SVG Tree Scene": { "prefix": "svglandscap", "body": [ "<svg width=\"600\" height=\"300\">", " <rect x=\"0\" y=\"0\" width=\"600\" height=\"200\" fill=\"lightblue\" />", " <circle cx=\"100\" cy=\"80\" r=\"40\" fill=\"yellow\" />", " <rect x=\"0\" y=\"200\" width=\"600\" height=\"100\" fill=\"green\" />", " <g>", " <rect x=\"100\" y=\"150\" width=\"20\" height=\"50\" fill=\"brown\" />", " <polygon points=\"100,150 120,150 110,100\" fill=\"darkgreen\">", " <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"-5 110 150\" to=\"5 110 150\" dur=\"2s\" repeatCount=\"indefinite\" />", " </polygon>", " </g>", " <g>", " <rect x=\"400\" y=\"150\" width=\"20\" height=\"50\" fill=\"brown\" />", " <polygon points=\"400,150 420,150 410,100\" fill=\"darkgreen\">", " <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"-5 410 150\" to=\"5 410 150\" dur=\"2s\" repeatCount=\"indefinite\" />", " </polygon>", " </g>", "</svg>" ], "description": "SVG scene with animated trees" }, "SVG Moving Car": { "prefix": "svgCarMotion", "body": [ "<svg width=\"600\" height=\"300\">", " <path id=\"curvePath\" d=\"M50,250 C150,50 450,50 550,250\" stroke=\"gray\" stroke-width=\"2\" fill=\"none\" />", " <g>", " <rect x=\"-20\" y=\"-10\" width=\"40\" height=\"20\" fill=\"red\" />", " <circle cx=\"-10\" cy=\"10\" r=\"5\" fill=\"black\" />", " <circle cx=\"10\" cy=\"10\" r=\"5\" fill=\"black\" />", " <animateMotion dur=\"6s\" repeatCount=\"indefinite\" rotate=\"auto\">", " <mpath xlink:href=\"#curvePath\" />", " </animateMotion>", " </g>", "</svg>" ], "description": "SVG animation of a car moving along a curved path" }, "txt/bar/jquery": { "prefix": "txt/bar/jquery", "body": [ "$(document).ready(function() {", " $.get('data/data.txt', function(data) {", " const lines = data.trim().split('\\n');", " const headers = lines[0].trim().split(' ');", " const rows = lines.slice(1).map(l => l.trim().split(' '));", " let txtTable = '<tr>' + headers.map(h => `<th>${h}</th>`).join('') + '</tr>';", " rows.forEach(row => {", " txtTable += '<tr>' + row.map(cell => `<td>${cell}</td>`).join('') + '</tr>';", " });", " $('#txtTable').html(txtTable);", " const labels = rows.map(r => r[0]);", " const values = rows.map(r => parseFloat(r[1]));", " new Chart($('#txtBarChart'), {", " type: 'bar',", " data: {", " labels: labels,", " datasets: [{", " label: 'Values',", " data: values,", " backgroundColor: 'cornflowerblue'", " }]", " }", " });", " });", "});" ], "description": "Load TXT data, generate table and bar chart with jQuery" }, "csv/pie/jquery": { "prefix": "csv/pie/jquery", "body": [ "$(document).ready(function() {", " $.get('data/data.csv', function(data) {", " const lines = data.trim().split('\\n');", " const headers = lines[0].split(',');", " const rows = lines.slice(1).map(l => l.split(','));", " let csvTable = '<tr>' + headers.map(h => `<th>${h}</th>`).join('') + '</tr>';", " rows.forEach(row => {", " csvTable += '<tr>' + row.map(cell => `<td>${cell}</td>`).join('') + '</tr>';", " });", " $('#csvTable').html(csvTable);", " const labels = rows.map(r => r[0]);", " const values = rows.map(r => parseFloat(r[1]));", " new Chart($('#csvPieChart'), {", " type: 'pie',", " data: {", " labels: labels,", " datasets: [{", " label: 'Quantity',", " data: values,", " backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#2ecc71', '#9b59b6']", " }]", " }", " });", " });", "});" ], "description": "Load CSV data, generate table and pie chart with jQuery" }, "xml/bar/jquery": { "prefix": "xml/bar/jquery", "body": [ "$(document).ready(function() {", " $.get('data/data.xml', function(xml) {", " const records = $(xml).find('record');", " let xmlTable = '<tr><th>Name</th><th>Value</th></tr>';", " let labels = [], values = [];", " records.each(function() {", " const name = $(this).find('name').text();", " const value = $(this).find('value').text();", " labels.push(name);", " values.push(parseFloat(value));", " xmlTable += `<tr><td>${name}</td><td>${value}</td></tr>`;", " });", " $('#xmlTable').html(xmlTable);", " new Chart($('#xmlBarChart'), {", " type: 'bar',", " data: {", " labels: labels,", " datasets: [{", " label: 'Value',", " data: values,", " backgroundColor: 'salmon'", " }]", " }", " });", " });", "});" ], "description": "Load XML data, generate table and bar chart with jQuery" }, "json/donut/jquery": { "prefix": "json/donut/jquery", "body": [ "$(document).ready(function() {", " $.getJSON('data/data.json', function(data) {", " let jsonTable = '<tr><th>Name</th><th>Value</th></tr>';", " let labels = [], values = [];", " data.forEach(row => {", " labels.push(row.Name);", " values.push(row.Value);", " jsonTable += `<tr><td>${row.Name}</td><td>${row.Value}</td></tr>`;", " });", " $('#jsonTable').html(jsonTable);", " new Chart($('#jsonDonutChart'), {", " type: 'doughnut',", " data: {", " labels: labels,", " datasets: [{", " label: 'Value',", " data: values,", " backgroundColor: ['#3498db', '#e67e22', '#1abc9c', '#9b59b6', '#e74c3c']", " }]", " }", " });", " });", "});" ], "description": "Load JSON data, generate table and donut chart with jQuery" }, "jquery-chartjs/scripts": { "prefix": "jquery-chartjs imports", "body": [ "<script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>", "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>" ], "description": "Include jQuery 3.5.1 and Chart.js scripts" }, "canvasjs/script": { "prefix": "canvasjs import", "body": [ "<script src=\"https://cdn.canvasjs.com/canvasjs.min.js\"></script>" ], "description": "Include CanvasJS script" }, "columnChart/canvasjs": { "prefix": "columnChart/canvasjs", "body": [ "window.onload = function () {", " const dataPoints = [", " { label: \"apple\", y: 10 },", " { label: \"orange\", y: 15 },", " { label: \"banana\", y: 25 },", " { label: \"mango\", y: 30 },", " { label: \"grape\", y: 28 }", " ];", " new CanvasJS.Chart(\"columnChart\", {", " title: { text: \"Column Chart\" },", " data: [{", " type: \"column\",", " dataPoints: dataPoints", " }]", " }).render();", "};" ], "description": "Render a CanvasJS Column Chart" }, "barChart/canvasjs": { "prefix": "barChart/canvasjs", "body": [ "window.onload = function () {", " const dataPoints = [", " { label: \"apple\", y: 10 },", " { label: \"orange\", y: 15 },", " { label: \"banana\", y: 25 },", " { label: \"mango\", y: 30 },", " { label: \"grape\", y: 28 }", " ];", " new CanvasJS.Chart(\"barChart\", {", " title: { text: \"Bar Chart\" },", " data: [{", " type: \"bar\",", " dataPoints: dataPoints", " }]", " }).render();", "};" ], "description": "Render a CanvasJS Bar Chart" }, "lineChart/canvasjs": { "prefix": "lineChart/canvasjs", "body": [ "window.onload = function () {", " const dataPoints = [", " { label: \"apple\", y: 10 },", " { label: \"orange\", y: 15 },", " { label: \"banana\", y: 25 },", " { label: \"mango\", y: 30 },", " { label: \"grape\", y: 28 }", " ];", " new CanvasJS.Chart(\"lineChart\", {", " title: { text: \"Line Chart\" },", " data: [{", " type: \"line\",", " dataPoints: dataPoints", " }]", " }).render();", "};" ], "description": "Render a CanvasJS Line Chart" }, "pieChart/canvasjs": { "prefix": "pieChart/canvasjs", "body": [ "window.onload = function () {", " const dataPoints = [", " { label: \"apple\", y: 10 },", " { label: \"orange\", y: 15 },", " { label: \"banana\", y: 25 },", " { label: \"mango\", y: 30 },", " { label: \"grape\", y: 28 }", " ];", " new CanvasJS.Chart(\"pieChart\", {", " title: { text: \"Pie Chart\" },", " data: [{", " type: \"pie\",", " showInLegend: true,", " dataPoints: dataPoints", " }]", " }).render();", "};" ], "description": "Render a CanvasJS Pie Chart" }, "doughnutChart/canvasjs": { "prefix": "doughnutChart/canvasjs", "body": [ "window.onload = function () {", " const dataPoints = [", " { label: \"apple\", y: 10 },", " { label: \"orange\", y: 15 },", " { label: \"banana\", y: 25 },", " { label: \"mango\", y: 30 },", " { label: \"grape\", y: 28 }", " ];", " new CanvasJS.Chart(\"doughnutChart\", {", " title: { text: \"Doughnut Chart\" },", " data: [{", " type: \"doughnut\",", " showInLegend: true,", " dataPoints: dataPoints", " }]", " }).render();", "};" ], "description": "Render a CanvasJS Doughnut Chart" }, "chartBarAnimationCanvasjs": { "prefix": "chartBarAnimationCanvasjs", "body": [ "window.onload = function () {", " const barChart = new CanvasJS.Chart(\"barChartContainer\", {", " animationEnabled: true,", " theme: \"light2\",", " title: { text: \"Year-wise Sales\" },", " axisY: { title: \"Sales (in USD)\" },", " data: [", " {", " type: \"bar\",", " dataPoints: [", " { y: 3500000, label: \"1993\" },", " { y: 4800000, label: \"1995\" },", " { y: 6200000, label: \"1997\" },", " { y: 7500000, label: \"1999\" },", " { y: 4200000, label: \"2001\" },", " { y: 5800000, label: \"2003\" },", " { y: 2800000, label: \"2005\" },", " { y: 1500000, label: \"2007\" }", " ]", " }", " ]", " });", " barChart.render();", "};" ], "description": "CanvasJS animated Bar Chart" }, "chartPieAnimationCanvasjs": { "prefix": "chartPieAnimationCanvasjs", "body": [ "window.onload = function () {", " const pieChart = new CanvasJS.Chart(\"pieChartContainer\", {", " animationEnabled: true,", " theme: \"light2\",", " title: { text: \"Browser Usage Share\" },", " data: [", " {", " type: \"pie\",", " showInLegend: true,", " legendText: \"{indexLabel}\",", " dataPoints: [", " { y: 40, indexLabel: \"Chrome\" },", " { y: 25, indexLabel: \"Safari\" },", " { y: 20, indexLabel: \"Edge\" },", " { y: 10, indexLabel: \"Firefox\" },", " { y: 5, indexLabel: \"Other\" }", " ]", " }", " ]", " });", " pieChart.render();", "};" ], "description": "CanvasJS animated Pie Chart" }, "chartLineAnimationCanvasjs": { "prefix": "chartLineAnimationCanvasjs", "body": [ "window.onload = function () {", " const lineChart = new CanvasJS.Chart(\"lineChartContainer\", {", " animationEnabled: true,", " theme: \"light2\",", " title: { text: \"Monthly Expenses\" },", " axisY: { title: \"Expenses (in USD)\" },", " data: [", " {", " type: \"line\",", " dataPoints: [", " { y: 400, label: \"Jan\" },", " { y: 480, label: \"Feb\" },", " { y: 450, label: \"Mar\" },", " { y: 430, label: \"Apr\" },", " { y: 440, label: \"May\" },", " { y: 470, label: \"Jun\" },", " { y: 460, label: \"Jul\" },", " { y: 410, label: \"Aug\" },", " { y: 430, label: \"Sep\" },", " { y: 450, label: \"Oct\" },", " { y: 460, label: \"Nov\" },", " { y: 500, label: \"Dec\" }", " ]", " }", " ]", " });", " lineChart.render();", "};" ], "description": "CanvasJS animated Line Chart" }, "chartColumnAnimationCanvasjs": { "prefix": "chartColumnAnimationCanvasjs", "body": [ "window.onload = function () {", " const columnChart = new CanvasJS.Chart(\"columnChartContainer\", {", " animationEnabled: true,", " theme: \"light2\",", " title: { text: \"Population by Region\" },", " axisY: { title: \"Population (in millions)\" },", " data: [", " {", " type: \"column\",", " dataPoints: [", " { y: 1400, label: \"Asia\" },", " { y: 1200, label: \"Africa\" },", " { y: 800, label: \"Europe\" },", " { y: 600, label: \"North America\" },", " { y: 500, label: \"South America\" },", " { y: 400, label: \"Australia\" },", " { y: 200, label: \"Antarctica\" }", " ]", " }", " ]", " });", " columnChart.render();", "};" ], "description": "CanvasJS animated Column Chart" }, "barChartD3": { "prefix": "barChartD3", "body": [ "function createBarChart() {", " const width = 400,", " height = 300,", " margin = { top: 20, right: 30, bottom: 40, left: 40 };", " const data = [30, 80, 45, 60, 20, 90, 50];", " const svg = d3.select('#barChart')", " .append('svg')", " .attr('width', width)", " .attr('height', height)", " .classed('chart', true);", " const x = d3.scaleLinear()", " .domain([0, d3.max(data)])", " .range([margin.left, width - margin.right]);", " const y = d3.scaleBand()", " .domain(d3.range(data.length))", " .range([margin.top, height - margin.bottom])", " .padding(0.1);", " svg.selectAll('rect')", " .data(data)", " .join('rect')", " .attr('x', margin.left)", " .attr('y', (d, i) => y(i))", " .attr('width', d => x(d) - margin.left)", " .attr('height', y.bandwidth())", " .attr('fill', 'steelblue');", " svg.append('g')", " .attr('transform', `translate(0,${margin.top})`)", " .call(d3.axisTop(x));", " svg.append('g')", " .attr('transform', `translate(${margin.left},0)`)", " .call(d3.axisLeft(y).tickFormat(i => `Item ${i + 1}`));", "}" ], "description": "Horizontal Bar Chart using D3.js" }, "lineChartD3": { "prefix": "lineChartD3", "body": [ "function createLineChart() {", " const width = 400,", " height = 300,", " margin = { top: 20, right: 30, bottom: 40, left: 40 };", " const data = [", " { x: 0, y: 30 },", " { x: 1, y: 80 },", " { x: 2, y: 45 },", " { x: 3, y: 60 },", " { x: 4, y: 20 },", " { x: 5, y: 90 },", " { x: 6, y: 50 }", " ];", " const svg = d3.select('#lineChart')", " .append('svg')", " .attr('width', width)", " .attr('height', height)", " .classed('chart', true);", " const x = d3.scaleLinear()", " .domain(d3.extent(data, d => d.x))", " .range([margin.left, width - margin.right]);", " const y = d3.scaleLinear()", " .domain([0, d3.max(data, d => d.y)]).nice()", " .range([height - margin.bottom, margin.top]);", " const line = d3.line()", " .x(d => x(d.x))", " .y(d => y(d.y));", " svg.append('path')", " .datum(data)", " .attr('fill', 'none')", " .attr('stroke', 'tomato')", " .attr('stroke-width', 2)", " .attr('d', line);", " svg.append('g')", " .attr('transform', `translate(0,${height - margin.bottom})`)", " .call(d3.axisBottom(x).ticks(data.length));", " svg.append('g')", " .attr('transform', `translate(${margin.left},0)`)", " .call(d3.axisLeft(y));", "}" ], "description": "Line Chart using D3.js" }, "pieChartD3": { "prefix": "pieChartD3", "body": [ "function createPieChart() {", " const width = 400,", " height = 300,", " margin = { top: 20, right: 30, bottom: 40, left: 40 };", " const data = [10, 20, 30, 40];", " const radius = Math.min(width, height) / 2 - margin.top;", " const svg = d3.select('#pieChart')", " .append('svg')", " .attr('width', width)", " .attr('height', height)", " .classed('chart', true)", " .append('g')", " .attr('transform', `translate(${width / 2},${height / 2})`);", " const pie = d3.pie();", " const arc = d3.arc()", " .innerRadius(0)", " .outerRadius(radius);", " const color = d3.scaleOrdinal()", " .domain(data)", " .range(d3.schemeCategory10);", " const arcs = svg.selectAll('arc')", " .data(pie(data))", " .enter()", " .append('g')", " .attr('class', 'arc');", " arcs.append('path')", " .attr('d', arc)", " .attr('fill', d => color(d.data));", " arcs.append('text')", " .attr('transform', d => `translate(${arc.centroid(d)})`)", " .attr('text-anchor', 'middle')", " .attr('dy', '0.35em')", " .text(d => d.data);", "}" ], "description": "Pie Chart using D3.js" }, "columnChartD3": { "prefix": "columnChartD3", "body": [ "function createColumnChart() {", " const width = 400,", " height = 300,", " margin = { top: 20, right: 30, bottom: 40, left: 40 };", " const data = [30, 80, 45, 60, 20, 90, 50];", " const svg = d3.select('#columnChart')", " .append('svg')", " .attr('width', width)", " .attr('height', height)", " .classed('chart', true);", " const x = d3.scaleBand()", " .domain(data.map((d, i) => i))", " .range([margin.left, width - margin.right])", " .padding(0.1);", " const y = d3.scaleLinear()", " .domain([0, d3.max(data)]).nice()", " .range([height - margin.bottom, margin.top]);", " svg.selectAll('rect')", " .data(data)", " .join('rect')", " .attr('x', (d, i) => x(i))", " .attr('y', d => y(d))", " .attr('height', d => y(0) - y(d))", " .attr('width', x.bandwidth())", " .attr('fill', 'seagreen');", " svg.append('g')", " .attr('transform', `translate(0,${height - margin.bottom})`)", " .call(d3.axisBottom(x).tickFormat(i => `Item ${i + 1}`));", " svg.append('g')", " .attr('transform', `translate(${margin.left},0)`)", " .call(d3.axisLeft(y));", "}" ], "description": "Vertical Column Chart using D3.js" }, "Insert D3 v7 script tag": { "prefix": "d3import", "body": [ "<script src=\"https://d3js.org/d3.v7.min.js\"></script>" ], "description": "Insert D3.js v7 script tag" }, "Insert Google Charts and Leaflet": { "prefix": "googlechartsimports", "body": [ "<!-- Google Charts -->", "<script src=\"https://www.gstatic.com/charts/loader.js\"></script>", "", "<!-- Leaflet CSS & JS -->", "<link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet/dist/leaflet.css\" />", "<script src=\"https://unpkg.com/leaflet/dist/leaflet.js\"></script>" ], "description": "Insert Google Charts and Leaflet CSS/JS" }, "Bar Chart (google-chart-api)": { "prefix": "bar-google-chart-api", "body": [ "var barData = google.visualization.arrayToDataTable([", " ['Country', 'Production'],", " ['Italy', 55],", " ['France', 49],", " ['Spain', 44],", " ['USA', 24],", " ['Argentina', 15]", "]);", "var barChart = new google.visualization.BarChart(document.getElementById('barChart'));", "barChart.draw(barData, { title: 'Wine Production' });" ], "description": "Bar chart using Google Charts API" }, "Line Chart (google-chart-api)": { "prefix": "line-google-chart-api", "body": [ "var lineData = google.visualization.arrayToDataTable([", " ['Size', 'Price'],", " [50,7], [60,8], [70,8], [80,9],", " [90,9], [100,9], [110,10], [120,11],", " [130,14], [140,14], [150,15]", "]);", "var lineChart = new google.visualization.LineChart(document.getElementById('lineChart'));", "lineChart.draw(lineData, { title: 'House Price vs Size' });" ], "description": "Line chart using Google Charts API" }, "Pie Chart (google-chart-api)": { "prefix": "pie-google-chart-api", "body": [ "var pieData = barData;", "var pieChart = new google.visualization.PieChart(document.getElementById('pieChart'));", "pieChart.draw(pieData, { title: 'Wine Production' });" ], "description": "Pie chart using Google Charts API" }, "Donut Chart (google-chart-api)": { "prefix": "donut-google-chart-api", "body": [ "var donutChart = new google.visualization.PieChart(document.getElementById('donutChart'));", "donutChart.draw(pieData, {", " title: 'Wine Production',", " pieHole: 0.4", "});" ], "description": "Donut chart using Google Charts API" }, "Candlestick Chart (google-chart-api)": { "prefix": "candle-google-chart-api", "body": [ "var candleData = google.visualization.arrayToDataTable([", " ['Day', 'Low', 'Open', 'Close', 'High'],", " ['Mon', 100, 105, 110, 115],", " ['Tue', 110, 115, 120, 125],", " ['Wed', 120, 125, 130, 135],", " ['Thu', 130, 135, 140, 145]", "]);", "var candleChart = new google.visualization.CandlestickChart(document.getElementById('candleChart'));", "candleChart.draw(candleData, { legend: 'none' });" ], "description": "Candlestick chart using Google Charts API" }, "Gantt Chart (google-chart-api)": { "prefix": "gantt-google-chart-api", "body": [ "var data = new google.visualization.DataTable();", "data.addColumn('string', 'TaskID');", "data.addColumn('string', 'TaskName');", "data.addColumn('string', 'Resource');", "data.addColumn('date', 'Start');", "data.addColumn('date', 'End');", "data.addColumn('number', 'Duration');", "data.addColumn('number', 'PercentComplete');", "data.addColumn('string', 'Dependencies');", "", "data.addRows([", " ['1', 'Planning', 'Research', new Date(2025, 0, 1), new Date(2025, 0, 7), null, 100, null],", " ['2', 'Design', 'UI', new Date(2025, 0, 8), new Date(2025, 0, 15), null, 80, '1'],", " ['3', 'Development', 'Dev', new Date(2025, 0, 16), new Date(2025, 1, 10), null, 50, '2'],", " ['4', 'Testing', 'QA', new Date(2025, 1, 11), new Date(2025, 1, 20), null, 0, '3']", "]);", "", "var ganttChart = new google.visualization.Gantt(document.getElementById('ganttChart'));", "ganttChart.draw(data, {", " height: 300,", " gantt: { trackHeight: 30 }", "});" ], "description": "Gantt chart using Google Charts API" }, "Leaflet Map with JSON Markers": { "prefix": "leaflet-map-json", "body": [ "const map = L.map('map').setView([21.1702, 72.8311], 5);", "", "L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {", " attribution: '© OpenStreetMap contributors'", "}).addTo(map);", "", "fetch('locations.json')", " .then(response => response.json())", " .then(data => {", " data.forEach(location => {", " L.marker([location.lat, location.lng])", " .addTo(map)", " .bindPopup(location.name);", " });", " })", " .catch(error => console.error('Error loading JSON:', error));" ], "description": "Leaflet map loading markers from external JSON" }, "Happiness Dashboard (google-chart-api)": { "prefix": "dashboard-google-chart-api", "body": [ "<!DOCTYPE html>", "<html>", "<head>", " <title>Happiness Dashboard</title>", " <script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>", " <style>", " body {", " font-family: Arial, sans-serif;", " padding: 20px;", " }", " #continentSelect {", " padding: 10px;", " font-size: 16px;", " margin-bottom: 20px;", " }", " .chart-row {", " display: flex;", " justify-content: space-between;", " gap: 20px;", " flex-wrap: wrap;", " }", " .chart-box {", " flex: 1;", " min-width: 300px;", " height: 400px;", " border: 1px solid #ddd;", " border-radius: 10px;", " padding: 10px;", " box-shadow: 2px 2px 5px #aaa;", " }", " </style>", "</head>", "<body>", "", "<h2>🌍 World Happiness Dashboard</h2>", "", "<select id=\"continentSelect\" onchange=\"drawBarChart()\">", " <option value=\"Asia\">Asia</option>", " <option value=\"Europe\">Europe</option>", "</select>", "", "<div class=\"chart-row\">", " <div id=\"barChart\" class=\"chart-box\"></div>", " <div id=\"pieChart\" class=\"chart-box\"></div>", " <div id=\"lineChart\" class=\"chart-box\"></div>", "</div>", "", "", " google.charts.load('current', {'packages':['corechart']});", " google.charts.setOnLoadCallback(initDashboard);", "", " const jsonData = [", " { \"Country\": \"India\", \"Continent\": \"Asia\", \"Score\": 4.5, \"Economy\": 1.2, \"Health\": 0.7, \"Freedom\": 0.5 },", " { \"Country\": \"Japan\", \"Continent\": \"Asia\", \"Score\": 5.8, \"Economy\": 1.4, \"Health\": 0.9, \"Freedom\": 0.6 },", " { \"Country\": \"Germany\", \"Continent\": \"Europe\", \"Score\": 6.9, \"Economy\": 1.6, \"Health\": 1.0, \"Freedom\": 0.7 },", " { \"Country\": \"France\", \"Continent\": \"Europe\", \"Score\": 6.4, \"Economy\": 1.5, \"Health\": 0.9, \"Freedom\": 0.6 }", " ];", "", " const trendData = {", " \"India\": [ [2019, 4.1], [2020, 4.3], [2021, 4.4], [2022, 4.5] ],", " \"Japan\": [ [2019, 5.5], [2020, 5.7], [2021, 5.8], [2022, 5.8] ],", " \"Germany\": [ [2019, 6.7], [2020, 6.8], [2021, 6.9], [2022, 6.9] ],", " \"France\": [ [2019, 6.2], [2020, 6.3], [2021, 6.4], [2022, 6.4] ]", " };", "", " function initDashboard() {", " drawBarChart();", " }", "", " function drawBarChart() {", " const continent = document.getElementById('continentSelect').value;", " const filteredData = jsonData.filter(item => item.Continent === continent);", "", " const dataArray = [['Country', 'Happiness Score']];", " filteredData.forEach(item => {", " dataArray.push([item.Country, item.Score]);", " });", "", " const data = google.visualization.arrayToDataTable(dataArray);", " const options = {", " title: `Top Countries by Happiness Score (${continent})`,", " legend: { position: 'none' },", " colors: ['#1E88E5']", " };", "", " const chart = new google.visualization.BarChart(document.getElementById('barChart'));", " chart.draw(data, options);", "", " google.visualization.events.addListener(chart, 'select', function () {", " const selectedItem = chart.getSelection()[0];", " if (selectedItem) {", " const country = data.getValue(selectedItem.row, 0);", " drawPieChart(country);", " drawLineChart(country);", " }", " });", "", " if (filteredData.length > 0) {", " drawPieChart(filteredData[0].Country);", " drawLineChart(filteredData[0].Country);", " }", " }", "", " function drawPieChart(country) {", " const countryData = jsonData.find(item => item.Country === country);", " const data = google.visualization.arrayToDataTable([", " ['Factor', 'Value'],", " ['Economy', countryData.Economy],", " ['Health', countryData.Health],", " ['Freedom', countryData.Freedom]", " ]);", "", " const options = {", " title: `Happiness Factors: ${country}`,", " pieHole: 0.4,", " colors: ['#43A047', '#FB8C00', '#F4511E']", " };", "", " const chart = new google.visualization.PieChart(document.getElementById('pieChart'));", " chart.draw(data, options);", " }", "", " function drawLineChart(country) {", " const trend = trendData[country];", " const dataArray = [['Year', 'Happiness Score']];", " trend.forEach(([year, score]) => dataArray.push([year.toString(), score]));", "", " const data = google.visualization.arrayToDataTable(dataArray);", "", " const options = {", " title: `Happiness Score Trend: ${country}`,", " curveType: 'function',", " legend: { position: 'bottom' },", " colors: ['#8E24AA']", " };", "", " const chart = new google.visualization.LineChart(document.getElementById('lineChart'));", " chart.draw(data, options);", " }", "</script>", "", "</body>", "</html>" ], "description": "Full World Happiness Dashboard using Google Charts" } }