NdFeB Demagnetization Curve Tool | King-Nd Magnet<\/title>\r\n <style>\r\n :root { --primary-blue: #002ea7; --primary-hover: #001f7a; --bg-light: #e6e8f5; --card-bg: #ffffff; --text-dark: #172b4d; --text-muted: #5e6c84; --border-color: #dfe1e6; --accent-red: #e61373; }\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n body { font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; padding: 30px 15px; }\r\n .calc-container { max-width: 1000px; margin: 0 auto; }\r\n .page-header { text-align: center; margin-bottom: 30px; }\r\n .page-header h1 { font-size: 30px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }\r\n .page-header p { font-size: 15px; color: var(--text-muted); max-width: 700px; margin: 0 auto; }\r\n .calc-card, .method-card { background: #ffffff; border-radius: 16px; box-shadow: 0 4px 16px rgba(9,30,66,0.08); padding: 28px; margin-bottom: 24px; }\r\n .section-title { font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }\r\n h3.sub-title { font-size: 15px; font-weight: 700; color: var(--primary-blue); margin: 22px 0 6px; }\r\n p.body-text { font-size: 13px; color: var(--text-dark); margin-bottom: 10px; max-width: 760px; }\r\n .section-intro { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; max-width: 700px; }\r\n .control-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }\r\n .selectors-wrapper { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }\r\n .select-box { display: flex; align-items: center; gap: 10px; }\r\n .select-box label { font-size: 14px; font-weight: 600; color: var(--text-dark); }\r\n .vs-divider { font-weight: bold; color: #999; }\r\n .tag-indicator { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }\r\n .tag-a { background-color: #2563eb; } .tag-b { background-color: #dc2626; }\r\n select.custom-select { padding: 8px 14px; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border-color); background-color: #fff; color: var(--text-dark); outline: none; cursor: pointer; min-width: 120px; }\r\n select.custom-select:focus { border-color: var(--primary-blue); }\r\n .temp-toggle-group { display: flex; background: #e5e5ea; padding: 3px; border-radius: 9px; flex-wrap: wrap; gap: 2px; transition: opacity 0.2s ease; }\r\n .temp-toggle-group.disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }\r\n .temp-btn { border: none; background: transparent; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #86868b; border-radius: 7px; cursor: pointer; transition: all 0.2s ease; }\r\n .temp-btn.active { background: #ffffff; color: var(--text-dark); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }\r\n .temp-btn.partial::after { content: \" *\"; color: #d97706; }\r\n .svg-container { width: 100%; height: 460px; position: relative; }\r\n svg#demagSvg { width: 100%; height: 100%; overflow: visible; }\r\n .legend-bar { display: flex; justify-content: center; gap: 20px; margin-top: 12px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }\r\n .legend-item { display: flex; align-items: center; gap: 6px; }\r\n .legend-line { width: 24px; height: 3px; }\r\n .legend-missing { font-weight: 600; font-style: italic; }\r\n .live-delta-bar { background: #fafbfc; border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 14px; }\r\n .delta-item { display: flex; flex-direction: column; }\r\n .delta-item .title { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\r\n .delta-item .val { font-size: 18px; font-weight: 700; }\r\n .data-status { background: #1e293b; color: #cbd5e1; padding: 12px 18px; border-radius: 10px; font-size: 12px; margin-top: 14px; }\r\n .method-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }\r\n .method-list li { font-size: 13px; color: var(--text-dark); padding-left: 18px; position: relative; }\r\n .method-list li::before { content: \"\u2014\"; position: absolute; left: 0; color: var(--primary-blue); }\r\n .std-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }\r\n .std-table th, .std-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); }\r\n .std-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; }\r\n .disclaimer-card { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border-color); }\r\n .disclaimer-card h3 { color: var(--accent-red); font-size: 15px; font-weight: 700; margin-bottom: 6px; }\r\n .disclaimer-card p { font-size: 13px; color: #42526e; }\r\n .cta-box { background: linear-gradient(135deg, #002ea7 0%, #001f7a 100%); color: #ffffff; border-radius: 12px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }\r\n .cta-content h3 { font-size: 20px; margin-bottom: 6px; color: #ffffff !important; }\r\n .cta-content p { font-size: 14px; color: #ffffff !important; opacity: 0.9; }\r\n .btn-cta { background-color: #ffffff; color: var(--primary-blue) !important; padding: 12px 28px; font-size: 15px; font-weight: 700; border-radius: 6px; text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s; }\r\n .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"calc-container\">\r\n\r\n <div class=\"page-header\">\r\n <h1>NdFeB Demagnetization Curve Tool<\/h1>\r\n <p>Compare the B-H and J-H demagnetization curves of two sintered NdFeB grades. Each curve covers room temperature up to 180\u00b0C. Use the chart to see where a grade starts to lose flux under a reverse field. Then check whether it stays stable at your operating temperature.<\/p>\r\n <\/div>\r\n\r\n <div class=\"calc-card\">\r\n <h2 class=\"section-title\">Select Grades and Temperature<\/h2>\r\n <p class=\"section-intro\">Choose two grades to compare their curves at the same temperature. Alternatively, select the same grade twice. The chart then shows every available temperature for that grade.<\/p>\r\n\r\n <div class=\"control-bar\">\r\n <div class=\"selectors-wrapper\">\r\n <div class=\"select-box\">\r\n <span class=\"tag-indicator tag-a\"><\/span>\r\n <label for=\"gradeA\">Grade A:<\/label>\r\n <select id=\"gradeA\" class=\"custom-select\">\r\n <option value=\"50SH\">50SH<\/option><option value=\"52SH\">52SH<\/option><option value=\"42SHT\">42SHT<\/option><option value=\"48SH\">48SH<\/option><option value=\"52H\">52H<\/option>\r\n <option value=\"48UH\">48UH<\/option><option value=\"48H\">48H<\/option><option value=\"45SH\">45SH<\/option>\r\n <option value=\"40SH\" selected>40SH<\/option><option value=\"38UH\">38UH<\/option><option value=\"35SH\">35SH<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"vs-divider\">VS<\/div>\r\n <div class=\"select-box\">\r\n <span class=\"tag-indicator tag-b\"><\/span>\r\n <label for=\"gradeB\">Grade B:<\/label>\r\n <select id=\"gradeB\" class=\"custom-select\">\r\n <option value=\"48UH\" selected>48UH<\/option><option value=\"50SH\">50SH<\/option><option value=\"52SH\">52SH<\/option><option value=\"42SHT\">42SHT<\/option><option value=\"48SH\">48SH<\/option>\r\n <option value=\"52H\">52H<\/option><option value=\"48H\">48H<\/option><option value=\"45SH\">45SH<\/option>\r\n <option value=\"40SH\">40SH<\/option><option value=\"38UH\">38UH<\/option><option value=\"35SH\">35SH<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"temp-toggle-group\" id=\"tempToggleGroup\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"svg-container\" id=\"svgWrapper\">\r\n <svg id=\"demagSvg\" viewBox=\"0 0 800 450\"><\/svg>\r\n <\/div>\r\n <div class=\"legend-bar\" id=\"legendBar\"><\/div>\r\n\r\n <div class=\"live-delta-bar\">\r\n <div class=\"delta-item\"><span class=\"title\">Reverse Field -H<\/span><span class=\"val\" id=\"hoverH\">Hover Chart<\/span><\/div>\r\n <div class=\"delta-item\"><span class=\"title\" id=\"titleDeltaB\">Flux Density Delta B (B - A)<\/span><span class=\"val\" id=\"deltaBVal\">-<\/span><\/div>\r\n <div class=\"delta-item\"><span class=\"title\" id=\"titleDeltaJ\">Intrinsic Magnetization Delta J (B - A)<\/span><span class=\"val\" id=\"deltaJVal\">-<\/span><\/div>\r\n <div class=\"delta-item\"><span class=\"title\">Demagnetization Margin<\/span><span class=\"val\" id=\"marginVal\" style=\"color:#0066cc;\">Move mouse over graph<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"data-status\">\r\n <strong>Data status:<\/strong> The tool covers 50SH, 52SH, 42SHT, 48SH, 52H, 48UH, 48H, 45SH, 40SH, 38UH and 35SH. An asterisk (*) on a temperature button means only one of the two grades has data at that temperature. In that case, the tool plots only that grade. It never fills the gap with the nearest temperature, because that would show a curve that does not exist.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"method-card\">\r\n <h2 class=\"section-title\">How These Curves Are Built<\/h2>\r\n <p class=\"section-intro\">The curves come from each grade's key specification points. They are not digitized raw test data. Below, we explain how we build them, so you know what the tool can and cannot tell you.<\/p>\r\n\r\n <h3 class=\"sub-title\">Step 1: Start With Four Datasheet Values<\/h3>\r\n <p class=\"body-text\">First, each curve starts from four values in the grade's datasheet. These are remanence (Br), normal coercivity (HcB), intrinsic coercivity (HcJ) and knee field (Hk). In addition, we follow the test convention in <strong>GB\/T 3217<\/strong>, the standard for the magnetic properties of permanent magnet materials.<\/p>\r\n\r\n <h3 class=\"sub-title\">Step 2: Shape the Intrinsic Curve<\/h3>\r\n <p class=\"body-text\">Then, between zero field and the knee field Hk, the intrinsic curve J(H) declines slowly and stays close to Br. This flat region is where the magnet is not yet at risk. Beyond Hk, the curve drops more steeply toward HcJ. This drop is the knee, where a grade with lower squareness loses magnetization faster.<\/p>\r\n\r\n <h3 class=\"sub-title\">Step 3: Derive the Normal Curve<\/h3>\r\n <p class=\"body-text\">Next, we derive the normal B-H curve from the intrinsic curve with the standard relation <strong>B = J \u2212 \u03bc\u2080H<\/strong>. In the units used here, this becomes B = J \u2212 0.1 \u00d7 H. H is in kOe, and B and J are in Tesla.<\/p>\r\n\r\n <h3 class=\"sub-title\">What the Tool Cannot Tell You<\/h3>\r\n <p class=\"body-text\">These curves are smooth models fitted to four key points per grade. As a result, they show the overall shape and the knee position well. However, they miss the small irregularities of a real measured curve. For that level of detail, you need full measured hysteresis loop data.<\/p>\r\n\r\n <h3 class=\"sub-title\">Symbol Reference<\/h3>\r\n <table class=\"std-table\">\r\n <thead><tr><th>Symbol<\/th><th>Meaning<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>Br<\/td><td>Remanence \u2014 flux density at H = 0<\/td><\/tr>\r\n <tr><td>HcB<\/td><td>Normal (B-H) coercivity \u2014 field at which B reaches 0<\/td><\/tr>\r\n <tr><td>HcJ<\/td><td>Intrinsic (J-H) coercivity \u2014 field at which J reaches 0<\/td><\/tr>\r\n <tr><td>Hk<\/td><td>Knee field \u2014 where the J-H curve begins to fall steeply<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n\r\n <div class=\"disclaimer-card\">\r\n <h3>Engineering Reference<\/h3>\r\n <p>Use these curves for grade selection and early demagnetization-risk screening. However, for FEA simulation or a safety-critical design, request full B-H and J-H data from our engineers. Do not read exact values off this chart.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-box\">\r\n <div class=\"cta-content\">\r\n <h3>Evaluating demagnetization risk for your project?<\/h3>\r\n <p>Our interactive tool shows standard curves. However, your application may need full B-H and J-H data for FEA simulation at high temperatures. Contact our team, and we will send you the complete hysteresis data.<\/p>\r\n <\/div>\r\n <a href=\"\/contact-us\" class=\"btn-cta\">Request Full B-H Curve Data →<\/a>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n let currentTemp = 20;\r\n const tempColors = ['#2563eb', '#dc2626', '#16a34a', '#d97706', '#9333ea', '#0891b2'];\r\n\r\n const curveDatabase = {\r\n \"50SH\": { 20: gp(1.402,13.58,20.70,20.03), 100: gp(1.290,9.866,9.997,9.743), 120: gp(1.250,7.834,7.889,7.678), 150: gp(1.183,5.312,5.354,5.134) },\r\n \/\/ \u3010\u65b0\u589e\u301152SH\r\n \"52SH\": { 20: gp(1.431,13.85,20.70,20.03), 100: gp(1.308,9.871,9.997,9.743), 120: gp(1.268,7.836,7.889,7.678), 150: gp(1.200,5.313,5.354,5.134) },\r\n \/\/ \u3010\u65b0\u589e\u301142SHT\r\n \"42SHT\": { 20: gp(1.300,12.41,21.23,20.63), 100: gp(1.192,11.01,11.38,11.19), 120: gp(1.154,9.505,9.633,9.427), 150: gp(1.097,6.836,6.880,6.712) },\r\n \"48SH\": { 20: gp(1.388,13.38,20.34,19.63), 80: gp(1.305,11.82,12.16,11.83), 100: gp(1.264,9.562,9.727,9.438), 120: gp(1.228,7.598,7.700,7.449), 150: gp(1.161,5.177,5.231,5.001) },\r\n \"52H\": { 20: gp(1.437,13.73,17.81,17.13), 80: gp(1.351,10.77,11.00,10.62), 100: gp(1.320,8.944,9.086,8.753), 120: gp(1.279,7.338,7.428,7.146) },\r\n \"48UH\": { 20: gp(1.383,13.41,25.71,23.96), 100: gp(1.280,12.17,14.87,14.10), 150: gp(1.181,9.151,9.450,8.933) },\r\n \"48H\": { 20: gp(1.389,13.45,17.34,16.70), 100: gp(1.291,8.259,8.326,8.081), 120: gp(1.254,6.669,6.705,6.499), 150: gp(1.194,4.740,4.757,4.578) },\r\n \"45SH\": { 20: gp(1.344,13.05,20.23,19.46), 100: gp(1.231,9.899,10.12,9.767), 120: gp(1.193,8.090,8.226,7.913), 150: gp(1.132,5.827,5.882,5.627), 180: gp(1.062,4.029,4.058,3.836) },\r\n \"40SH\": { 20: gp(1.274,12.420,20.260,19.670), 60: gp(1.2317,11.860,15.200,14.720), 80: gp(1.201,11.520,12.770,12.390), 100: gp(1.1701,10.240,10.540,10.210), 120: gp(1.1378,8.471,8.619,8.355), 150: gp(1.077,6.125,6.229,6.000) },\r\n \"38UH\": { 20: gp(1.251,12.21,25.95,24.45), 60: gp(1.207,11.61,20.33,19.62), 100: gp(1.148,10.79,15.15,14.71), 120: gp(1.115,10.34,12.76,12.36), 150: gp(1.059,9.324,9.595,9.263), 180: gp(0.996,6.769,6.847,6.585) },\r\n \"35SH\": { 20: gp(1.204,11.70,20.42,19.90), 100: gp(1.106,10.00,10.28,10.01), 120: gp(1.072,8.203,8.314,8.096), 150: gp(1.019,5.928,5.986,5.798) }\r\n };\r\n\r\n function gp(Br, HcB, HcJ, Hk) {\r\n const pointsB = [], pointsJ = [], maxH = 28;\r\n for (let H = 0; H <= maxH; H += 0.2) {\r\n let B = 0, J = 0;\r\n if (H <= Hk) J = Br * (1 - 0.05 * Math.pow(H \/ Hk, 4));\r\n else if (H <= HcJ) { const ratio = (H - Hk) \/ (HcJ - Hk || 0.1); J = Br * 0.95 * (1 - 0.95 * Math.pow(ratio, 2)); }\r\n else { const dropRate = Br * 0.8; J = Math.max(0, Br * 0.05 - dropRate * (H - HcJ)); }\r\n B = J - 0.100 * H;\r\n if (B > 0) pointsB.push({ H, val: parseFloat(B.toFixed(3)) });\r\n else if (pointsB.length > 0 && pointsB[pointsB.length - 1].val > 0) pointsB.push({ H, val: 0 });\r\n if (J > 0) pointsJ.push({ H, val: parseFloat(J.toFixed(3)) });\r\n else if (pointsJ.length > 0 && pointsJ[pointsJ.length - 1].val > 0) pointsJ.push({ H, val: 0 });\r\n }\r\n return { B: pointsB, J: pointsJ };\r\n }\r\n\r\n const margin = { top: 40, right: 60, bottom: 50, left: 60 };\r\n const width = 800 - margin.left - margin.right;\r\n const height = 450 - margin.top - margin.bottom;\r\n function mapX(H) { return margin.left + width - (H \/ 28) * width; }\r\n function mapY(val) { return margin.top + height - (val \/ 1.6) * height; }\r\n\r\n function updateTempButtons() {\r\n const nameA = document.getElementById('gradeA').value, nameB = document.getElementById('gradeB').value;\r\n const container = document.getElementById('tempToggleGroup');\r\n container.classList.toggle('disabled', nameA === nameB);\r\n const tempsA = Object.keys(curveDatabase[nameA]).map(Number), tempsB = Object.keys(curveDatabase[nameB]).map(Number);\r\n const allTemps = Array.from(new Set([...tempsA, ...tempsB])).sort((a,b) => a - b);\r\n container.innerHTML = '';\r\n if (!allTemps.includes(currentTemp)) currentTemp = allTemps[0];\r\n allTemps.forEach(temp => {\r\n const btn = document.createElement('button');\r\n const isPartial = !(tempsA.includes(temp) && tempsB.includes(temp));\r\n btn.className = `temp-btn ${temp === currentTemp ? 'active' : ''} ${isPartial ? 'partial' : ''}`;\r\n btn.title = isPartial ? 'Only one of the two selected grades has data at this temperature' : '';\r\n btn.innerText = temp === 20 ? '20\u2103 (RT)' : `${temp}\u2103`;\r\n btn.onclick = function() {\r\n if (nameA === nameB) return;\r\n document.querySelectorAll('.temp-btn').forEach(b => b.classList.remove('active'));\r\n this.classList.add('active'); currentTemp = temp; drawChart();\r\n };\r\n container.appendChild(btn);\r\n });\r\n }\r\n\r\n function drawChart() {\r\n const svg = document.getElementById('demagSvg');\r\n const nameA = document.getElementById('gradeA').value, nameB = document.getElementById('gradeB').value;\r\n const legendBar = document.getElementById('legendBar');\r\n const isSameGrade = (nameA === nameB);\r\n let html = '';\r\n for (let b = 0; b <= 1.6; b += 0.2) { let y = mapY(b); html += `<line x1=\"${margin.left}\" y1=\"${y}\" x2=\"${margin.left+width}\" y2=\"${y}\" stroke=\"#e5e5e7\" stroke-width=\"1\"\/><text x=\"${margin.left+width+10}\" y=\"${y+4}\" font-size=\"11\" fill=\"#86868b\">${b.toFixed(1)}<\/text>`; }\r\n for (let h = 0; h <= 28; h += 4) { let x = mapX(h); html += `<line x1=\"${x}\" y1=\"${margin.top}\" x2=\"${x}\" y2=\"${margin.top+height}\" stroke=\"#e5e5e7\" stroke-width=\"1\"\/><text x=\"${x}\" y=\"${margin.top+height+20}\" font-size=\"11\" fill=\"#86868b\" text-anchor=\"middle\">${h}<\/text>`; }\r\n html += `<rect x=\"${margin.left}\" y=\"${margin.top}\" width=\"${width}\" height=\"${height}\" fill=\"none\" stroke=\"#d2d2d7\" stroke-width=\"1.5\"\/>`;\r\n html += `<text x=\"${margin.left-10}\" y=\"${margin.top-15}\" font-size=\"12\" font-weight=\"bold\" fill=\"#1d1d1f\">-H (kOe)<\/text>`;\r\n html += `<text x=\"${margin.left+width+10}\" y=\"${margin.top-15}\" font-size=\"12\" font-weight=\"bold\" fill=\"#1d1d1f\">B \/ J (T)<\/text>`;\r\n const titleText = isSameGrade ? `${nameA} Demagnetization Curves at All Temperatures` : `${nameA} vs ${nameB} Demagnetization Curves (${currentTemp}\u2103)`;\r\n html += `<text x=\"400\" y=\"25\" font-size=\"15\" font-weight=\"bold\" fill=\"#1d1d1f\" text-anchor=\"middle\">${titleText}<\/text>`;\r\n function makePath(points) { if (!points || points.length === 0) return ''; return points.map((p,i) => `${i===0?'M':'L'} ${mapX(p.H)} ${mapY(p.val)}`).join(' '); }\r\n\r\n let legendHtml = '', currentChartData = [];\r\n if (isSameGrade) {\r\n const temps = Object.keys(curveDatabase[nameA]).map(Number).sort((a,b) => a-b);\r\n temps.forEach((t, index) => {\r\n const color = tempColors[index % tempColors.length]; const data = curveDatabase[nameA][t];\r\n html += `<path d=\"${makePath(data.B)}\" fill=\"none\" stroke=\"${color}\" stroke-width=\"2.5\"\/>`;\r\n html += `<path d=\"${makePath(data.J)}\" fill=\"none\" stroke=\"${color}\" stroke-width=\"1.5\" stroke-dasharray=\"4,4\"\/>`;\r\n if (data.B && data.B.length > 0) { const p0 = data.B[0]; html += `<text x=\"${mapX(p0.H)-8}\" y=\"${mapY(p0.val)-6}\" font-size=\"10\" font-weight=\"bold\" fill=\"${color}\">${t}\u2103<\/text>`; }\r\n legendHtml += `<div class=\"legend-item\"><div class=\"legend-line\" style=\"background:${color};\"><\/div><span>${t}\u2103 (B-H)<\/span><\/div>`;\r\n currentChartData.push({ label: `${t}\u2103`, data, color });\r\n });\r\n document.getElementById('titleDeltaB').innerText = \"Max B-H at Field\";\r\n document.getElementById('titleDeltaJ').innerText = \"Max J-H at Field\";\r\n } else {\r\n const dataA = curveDatabase[nameA][currentTemp], dataB = curveDatabase[nameB][currentTemp];\r\n if (dataA) { html += `<path d=\"${makePath(dataA.B)}\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"3\"\/><path d=\"${makePath(dataA.J)}\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2\" stroke-dasharray=\"5,5\"\/>`; }\r\n if (dataB) { html += `<path d=\"${makePath(dataB.B)}\" fill=\"none\" stroke=\"#dc2626\" stroke-width=\"3\"\/><path d=\"${makePath(dataB.J)}\" fill=\"none\" stroke=\"#dc2626\" stroke-width=\"2\" stroke-dasharray=\"5,5\"\/>`; }\r\n legendHtml += dataA ? `<div class=\"legend-item\"><div class=\"legend-line\" style=\"background:#2563eb;\"><\/div><span>${nameA} (B-H)<\/span><\/div><div class=\"legend-item\"><div class=\"legend-line\" style=\"border-bottom:2px dashed #2563eb;height:0;\"><\/div><span>${nameA} (J-H)<\/span><\/div>` : `<div class=\"legend-item legend-missing\" style=\"color:#2563eb;\">${nameA}: no data at ${currentTemp}\u2103<\/div>`;\r\n legendHtml += dataB ? `<div class=\"legend-item\"><div class=\"legend-line\" style=\"background:#dc2626;\"><\/div><span>${nameB} (B-H)<\/span><\/div><div class=\"legend-item\"><div class=\"legend-line\" style=\"border-bottom:2px dashed #dc2626;height:0;\"><\/div><span>${nameB} (J-H)<\/span><\/div>` : `<div class=\"legend-item legend-missing\" style=\"color:#dc2626;\">${nameB}: no data at ${currentTemp}\u2103<\/div>`;\r\n document.getElementById('titleDeltaB').innerText = \"Flux Density Delta B (B - A)\";\r\n document.getElementById('titleDeltaJ').innerText = \"Intrinsic Magnetization Delta J (B - A)\";\r\n if (dataA) currentChartData.push({ label: nameA, data: dataA, color: '#2563eb' });\r\n if (dataB) currentChartData.push({ label: nameB, data: dataB, color: '#dc2626' });\r\n }\r\n legendBar.innerHTML = legendHtml;\r\n html += `<g id=\"hoverGroup\" style=\"display:none;\"><line id=\"hoverLine\" x1=\"0\" y1=\"${margin.top}\" x2=\"0\" y2=\"${margin.top+height}\" stroke=\"#666\" stroke-width=\"1\" stroke-dasharray=\"3,3\"\/><g id=\"hoverDots\"><\/g><\/g>`;\r\n svg.innerHTML = html;\r\n\r\n svg.onmousemove = function(e) {\r\n const rect = svg.getBoundingClientRect();\r\n const mouseX = (e.clientX - rect.left) * (800 \/ rect.width);\r\n if (mouseX >= margin.left && mouseX <= margin.left + width) {\r\n const H = ((margin.left + width - mouseX) \/ width) * 28, hClamped = Math.min(Math.max(H, 0), 28);\r\n const hoverGroup = document.getElementById('hoverGroup'), hoverLine = document.getElementById('hoverLine'), hoverDots = document.getElementById('hoverDots');\r\n if (hoverGroup) hoverGroup.style.display = 'block';\r\n if (hoverLine) { hoverLine.setAttribute('x1', mouseX); hoverLine.setAttribute('x2', mouseX); }\r\n const getClosest = (pts, hVal) => { if (!pts || pts.length === 0) return { H: hVal, val: 0 }; return pts.reduce((p,c) => Math.abs(c.H-hVal) < Math.abs(p.H-hVal) ? c : p); };\r\n let dotsHtml = '';\r\n if (isSameGrade) {\r\n currentChartData.forEach(item => { const pt = getClosest(item.data.B, hClamped); dotsHtml += `<circle cx=\"${mapX(pt.H)}\" cy=\"${mapY(pt.val)}\" r=\"4\" fill=\"${item.color}\"\/>`; });\r\n if (hoverDots) hoverDots.innerHTML = dotsHtml;\r\n updateSingleGradeDeltaBar(hClamped.toFixed(1), currentChartData, getClosest);\r\n } else {\r\n const entryA = currentChartData.find(i => i.label === nameA), entryB = currentChartData.find(i => i.label === nameB);\r\n if (entryA) { const p = getClosest(entryA.data.B, hClamped); dotsHtml += `<circle cx=\"${mapX(p.H)}\" cy=\"${mapY(p.val)}\" r=\"4\" fill=\"#2563eb\"\/>`; }\r\n if (entryB) { const p = getClosest(entryB.data.B, hClamped); dotsHtml += `<circle cx=\"${mapX(p.H)}\" cy=\"${mapY(p.val)}\" r=\"4\" fill=\"#dc2626\"\/>`; }\r\n if (hoverDots) hoverDots.innerHTML = dotsHtml;\r\n updateDeltaBar(hClamped.toFixed(1), entryA, entryB, getClosest, nameA, nameB);\r\n }\r\n }\r\n };\r\n svg.onmouseleave = function() { const g = document.getElementById('hoverGroup'); if (g) g.style.display = 'none'; };\r\n }\r\n\r\n function updateDeltaBar(H, entryA, entryB, getClosest, nameA, nameB) {\r\n document.getElementById('hoverH').innerText = `${H} kOe`;\r\n const elB = document.getElementById('deltaBVal'), elJ = document.getElementById('deltaJVal'), marginEl = document.getElementById('marginVal');\r\n if (!entryA && !entryB) { elB.innerText='-'; elJ.innerText='-'; marginEl.innerText='Neither grade has data at this temperature'; marginEl.style.color='#86868b'; return; }\r\n if (!entryA || !entryB) { const missing = !entryA?nameA:nameB, present = entryA?nameA:nameB; elB.innerText='-'; elJ.innerText='-'; marginEl.innerText=`${missing}: no data at this temperature \u2014 only ${present} shown`; marginEl.style.color='#d97706'; return; }\r\n const pAB=getClosest(entryA.data.B,H), pBB=getClosest(entryB.data.B,H), pAJ=getClosest(entryA.data.J,H), pBJ=getClosest(entryB.data.J,H);\r\n const diffB=(pBB.val-pAB.val).toFixed(3), diffJ=(pBJ.val-pAJ.val).toFixed(3);\r\n elB.innerText=`${diffB>0?'+'+diffB:diffB} T`; elB.style.color=diffB>=0?'#16a34a':'#dc2626';\r\n elJ.innerText=`${diffJ>0?'+'+diffJ:diffJ} T`; elJ.style.color=diffJ>=0?'#16a34a':'#dc2626';\r\n if (pBB.val>0 && pAB.val===0) { marginEl.innerText=`${nameB} Active | ${nameA} Fully Demagnetized`; marginEl.style.color='#dc2626'; }\r\n else if (pAB.val>0 && pBB.val===0) { marginEl.innerText=`${nameA} Active | ${nameB} Fully Demagnetized`; marginEl.style.color='#2563eb'; }\r\n else { marginEl.innerText='Both grades within stable range'; marginEl.style.color='#16a34a'; }\r\n }\r\n\r\n function updateSingleGradeDeltaBar(H, chartData, getClosest) {\r\n document.getElementById('hoverH').innerText = `${H} kOe`;\r\n let maxB=0, maxJ=0, activeTemps=0;\r\n chartData.forEach(item => { const ptB=getClosest(item.data.B,H), ptJ=getClosest(item.data.J,H); if(ptB.val>maxB)maxB=ptB.val; if(ptJ.val>maxJ)maxJ=ptJ.val; if(ptB.val>0)activeTemps++; });\r\n document.getElementById('deltaBVal').innerText = `${maxB.toFixed(3)} T`; document.getElementById('deltaBVal').style.color='#1d1d1f';\r\n document.getElementById('deltaJVal').innerText = `${maxJ.toFixed(3)} T`; document.getElementById('deltaJVal').style.color='#1d1d1f';\r\n const marginEl = document.getElementById('marginVal');\r\n marginEl.innerText = `${activeTemps} \/ ${chartData.length} Temps Active`;\r\n marginEl.style.color = activeTemps === chartData.length ? '#16a34a' : '#d97706';\r\n }\r\n\r\n function init() {\r\n const gradeA = document.getElementById('gradeA'), gradeB = document.getElementById('gradeB');\r\n const onGradeChange = () => { updateTempButtons(); drawChart(); };\r\n gradeA.addEventListener('change', onGradeChange); gradeB.addEventListener('change', onGradeChange);\r\n updateTempButtons(); drawChart();\r\n }\r\n init();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n<style>\r\n.kndtc { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 18px 0 0; padding: 18px 22px; border-radius: 10px; background: linear-gradient(135deg, #e61373 0%, #b30e58 100%); box-sizing: border-box; }\r\n.kndtc *, .kndtc *::before, .kndtc *::after { box-sizing: border-box; }\r\n.kndtc-text { flex: 1 1 260px; min-width: 0; }\r\n.kndtc-kicker { display: block; margin: 0 0 6px; font-size: 21px; font-weight: 800; line-height: 1.25; color: #ffffff !important; }\r\n.kndtc-spec { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #ffffff !important; opacity: 0.95; }\r\n.kndtc-spec:empty { display: none; }\r\n.kndtc-sub { display: block; font-size: 14px; line-height: 1.5; color: #ffffff !important; }\r\n.kndtc-pill { display: inline-block; margin-right: 8px; padding: 2px 10px; background: #ffffff; border-radius: 999px; color: #b30e58 !important; font-size: 12px; font-weight: 800; vertical-align: 1px; }\r\n.kndtc-btn { flex: none; display: inline-block; padding: 13px 26px; background: #ffffff !important; border-radius: 8px; color: #b30e58 !important; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none !important; animation: kndtcPulse 2.2s ease-out infinite; transition: transform 0.2s; }\r\n.kndtc-btn:hover { transform: translateY(-2px); animation: none; }\r\n@keyframes kndtcPulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }\r\n 70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }\r\n}\r\n@media (prefers-reduced-motion: reduce) { .kndtc-btn { animation: none; } }\r\n@media (max-width: 600px) { .kndtc-btn { width: 100%; } }\r\n<\/style>\r\n<div class=\"kndtc\" id=\"kndtc\" style=\"margin: 0 0 16px;\">\r\n <div class=\"kndtc-text\">\r\n <span class=\"kndtc-kicker\">Want a free sample?<\/span>\r\n <span class=\"kndtc-spec\" id=\"kndtcSpec\"><\/span>\r\n <span class=\"kndtc-sub\"><b class=\"kndtc-pill\">Under 1 minute<\/b>Your grade is filled in. Just choose a shape and coating, then add your email.<\/span>\r\n <\/div>\r\n <a class=\"kndtc-btn\" id=\"kndtcBtn\" href=\"\/custom-ndfeb-magnets\/\">Get My Free Sample →<\/a>\r\n<\/div>\r\n<script>\r\n(function () {\r\n var card = document.getElementById('kndtc');\r\n var btn = document.getElementById('kndtcBtn');\r\n var specEl = document.getElementById('kndtcSpec');\r\n if (!card || !btn || !specEl) { return; }\r\n\r\n var TOOL = 'Demagnetization Curve Tool';\r\n var $ = function (id) { return document.getElementById(id); };\r\n var qs1 = function (sel) { return document.querySelector(sel); };\r\n var val = function (id) { var e = $(id); return e ? parseFloat(e.value) : NaN; };\r\n\r\n \/* What this tool hands over to the custom form *\/\r\n function collect() {\r\n var a = $('gradeA').value, b = $('gradeB').value;\r\n var tb = qs1('#tempToggleGroup .temp-btn.active');\r\n var temp = tb ? tb.textContent.replace(\/\\s*\$RT\$\/, '').replace('\\u2103', '\\u00b0C').trim() : '';\r\n var q = { grade: 'N' + b };\r\n if (a !== b) {\r\n q.tk1 = 'Grade A'; q.tv1 = a;\r\n q.tk2 = 'Grade B'; q.tv2 = b;\r\n if (temp) { q.tk3 = 'Compared at'; q.tv3 = temp; }\r\n return { spec: a + ' vs ' + b + (temp ? ' \/ ' + temp : ''), q: q };\r\n }\r\n q.tk1 = 'Grade viewed'; q.tv1 = a;\r\n return { spec: a + ' \/ all available temperatures', q: q };\r\n }\r\n\r\n \/* The card is moved to sit right under the results *\/\r\n function anchor() {\r\n return qs1('.control-bar');\r\n }\r\n\r\n function place() {\r\n var t = anchor();\r\n if (t && t.parentNode && t.nextElementSibling !== card) { t.parentNode.insertBefore(card, t.nextSibling); }\r\n }\r\n\r\n function toQuery(q) {\r\n return Object.keys(q).filter(function (k) {\r\n var v = q[k];\r\n return typeof v === 'string' ? v !== '' : (typeof v === 'number' && isFinite(v) && v > 0);\r\n }).map(function (k) {\r\n var v = q[k];\r\n return k + '=' + encodeURIComponent(typeof v === 'number' ? String(parseFloat(v.toFixed(3))) : v);\r\n }).join('&');\r\n }\r\n\r\n function setHref(a, qs) {\r\n var base = (a.getAttribute('href') || '').split('?')[0];\r\n a.setAttribute('href', base + '?' + qs);\r\n }\r\n\r\n function update() {\r\n var d = null;\r\n try { d = collect(); } catch (e) { d = null; }\r\n d = d || { spec: '', q: {} };\r\n specEl.textContent = d.spec || '';\r\n var q = { from: 'tool', tool: TOOL };\r\n Object.keys(d.q).forEach(function (k) { q[k] = d.q[k]; });\r\n var qs = toQuery(q);\r\n setHref(btn, qs);\r\n\r\n }\r\n\r\n function later() { window.setTimeout(function () { place(); update(); }, 0); }\r\n ['input', 'change', 'click', 'keyup'].forEach(function (ev) { document.addEventListener(ev, later, true); });\r\n\r\n btn.addEventListener('click', function () {\r\n window.dataLayer = window.dataLayer || [];\r\n window.dataLayer.push({ event: 'tool_entry_click', tool_name: TOOL });\r\n });\r\n\r\n place();\r\n update();\r\n window.setTimeout(function () { place(); update(); }, 300);\r\n window.setTimeout(function () { place(); update(); }, 1200);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NdFeB Demagnetization Curve Tool | King-Nd Magnet NdFeB Demagnetization Curve Tool Compare the B-H and J-H demagnetization curves of two […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1553,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2089","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/2089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/comments?post=2089"}],"version-history":[{"count":28,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/2089\/revisions"}],"predecessor-version":[{"id":3532,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/2089\/revisions\/3532"}],"up":[{"embeddable":true,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/1553"}],"wp:attachment":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/media?parent=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n NdFeB Demagnetization Curve Tool | King-Nd Magnet<\/title>\r\n <style>\r\n :root { --primary-blue: #002ea7; --primary-hover: #001f7a; --bg-light: #e6e8f5; --card-bg: #ffffff; --text-dark: #172b4d; --text-muted: #5e6c84; --border-color: #dfe1e6; --accent-red: #e61373; }\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n body { font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; padding: 30px 15px; }\r\n .calc-container { max-width: 1000px; margin: 0 auto; }\r\n .page-header { text-align: center; margin-bottom: 30px; }\r\n .page-header h1 { font-size: 30px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }\r\n .page-header p { font-size: 15px; color: var(--text-muted); max-width: 700px; margin: 0 auto; }\r\n .calc-card, .method-card { background: #ffffff; border-radius: 16px; box-shadow: 0 4px 16px rgba(9,30,66,0.08); padding: 28px; margin-bottom: 24px; }\r\n .section-title { font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }\r\n h3.sub-title { font-size: 15px; font-weight: 700; color: var(--primary-blue); margin: 22px 0 6px; }\r\n p.body-text { font-size: 13px; color: var(--text-dark); margin-bottom: 10px; max-width: 760px; }\r\n .section-intro { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; max-width: 700px; }\r\n .control-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }\r\n .selectors-wrapper { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }\r\n .select-box { display: flex; align-items: center; gap: 10px; }\r\n .select-box label { font-size: 14px; font-weight: 600; color: var(--text-dark); }\r\n .vs-divider { font-weight: bold; color: #999; }\r\n .tag-indicator { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }\r\n .tag-a { background-color: #2563eb; } .tag-b { background-color: #dc2626; }\r\n select.custom-select { padding: 8px 14px; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border-color); background-color: #fff; color: var(--text-dark); outline: none; cursor: pointer; min-width: 120px; }\r\n select.custom-select:focus { border-color: var(--primary-blue); }\r\n .temp-toggle-group { display: flex; background: #e5e5ea; padding: 3px; border-radius: 9px; flex-wrap: wrap; gap: 2px; transition: opacity 0.2s ease; }\r\n .temp-toggle-group.disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }\r\n .temp-btn { border: none; background: transparent; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #86868b; border-radius: 7px; cursor: pointer; transition: all 0.2s ease; }\r\n .temp-btn.active { background: #ffffff; color: var(--text-dark); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }\r\n .temp-btn.partial::after { content: \" *\"; color: #d97706; }\r\n .svg-container { width: 100%; height: 460px; position: relative; }\r\n svg#demagSvg { width: 100%; height: 100%; overflow: visible; }\r\n .legend-bar { display: flex; justify-content: center; gap: 20px; margin-top: 12px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }\r\n .legend-item { display: flex; align-items: center; gap: 6px; }\r\n .legend-line { width: 24px; height: 3px; }\r\n .legend-missing { font-weight: 600; font-style: italic; }\r\n .live-delta-bar { background: #fafbfc; border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 14px; }\r\n .delta-item { display: flex; flex-direction: column; }\r\n .delta-item .title { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\r\n .delta-item .val { font-size: 18px; font-weight: 700; }\r\n .data-status { background: #1e293b; color: #cbd5e1; padding: 12px 18px; border-radius: 10px; font-size: 12px; margin-top: 14px; }\r\n .method-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }\r\n .method-list li { font-size: 13px; color: var(--text-dark); padding-left: 18px; position: relative; }\r\n .method-list li::before { content: \"\u2014\"; position: absolute; left: 0; color: var(--primary-blue); }\r\n .std-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }\r\n .std-table th, .std-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); }\r\n .std-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; }\r\n .disclaimer-card { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border-color); }\r\n .disclaimer-card h3 { color: var(--accent-red); font-size: 15px; font-weight: 700; margin-bottom: 6px; }\r\n .disclaimer-card p { font-size: 13px; color: #42526e; }\r\n .cta-box { background: linear-gradient(135deg, #002ea7 0%, #001f7a 100%); color: #ffffff; border-radius: 12px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }\r\n .cta-content h3 { font-size: 20px; margin-bottom: 6px; color: #ffffff !important; }\r\n .cta-content p { font-size: 14px; color: #ffffff !important; opacity: 0.9; }\r\n .btn-cta { background-color: #ffffff; color: var(--primary-blue) !important; padding: 12px 28px; font-size: 15px; font-weight: 700; border-radius: 6px; text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s; }\r\n .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"calc-container\">\r\n\r\n <div class=\"page-header\">\r\n <h1>NdFeB Demagnetization Curve Tool<\/h1>\r\n <p>Compare the B-H and J-H demagnetization curves of two sintered NdFeB grades. Each curve covers room temperature up to 180\u00b0C. Use the chart to see where a grade starts to lose flux under a reverse field. Then check whether it stays stable at your operating temperature.<\/p>\r\n <\/div>\r\n\r\n <div class=\"calc-card\">\r\n <h2 class=\"section-title\">Select Grades and Temperature<\/h2>\r\n <p class=\"section-intro\">Choose two grades to compare their curves at the same temperature. Alternatively, select the same grade twice. The chart then shows every available temperature for that grade.<\/p>\r\n\r\n <div class=\"control-bar\">\r\n <div class=\"selectors-wrapper\">\r\n <div class=\"select-box\">\r\n <span class=\"tag-indicator tag-a\"><\/span>\r\n <label for=\"gradeA\">Grade A:<\/label>\r\n <select id=\"gradeA\" class=\"custom-select\">\r\n <option value=\"50SH\">50SH<\/option><option value=\"52SH\">52SH<\/option><option value=\"42SHT\">42SHT<\/option><option value=\"48SH\">48SH<\/option><option value=\"52H\">52H<\/option>\r\n <option value=\"48UH\">48UH<\/option><option value=\"48H\">48H<\/option><option value=\"45SH\">45SH<\/option>\r\n <option value=\"40SH\" selected>40SH<\/option><option value=\"38UH\">38UH<\/option><option value=\"35SH\">35SH<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"vs-divider\">VS<\/div>\r\n <div class=\"select-box\">\r\n <span class=\"tag-indicator tag-b\"><\/span>\r\n <label for=\"gradeB\">Grade B:<\/label>\r\n <select id=\"gradeB\" class=\"custom-select\">\r\n <option value=\"48UH\" selected>48UH<\/option><option value=\"50SH\">50SH<\/option><option value=\"52SH\">52SH<\/option><option value=\"42SHT\">42SHT<\/option><option value=\"48SH\">48SH<\/option>\r\n <option value=\"52H\">52H<\/option><option value=\"48H\">48H<\/option><option value=\"45SH\">45SH<\/option>\r\n <option value=\"40SH\">40SH<\/option><option value=\"38UH\">38UH<\/option><option value=\"35SH\">35SH<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"temp-toggle-group\" id=\"tempToggleGroup\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"svg-container\" id=\"svgWrapper\">\r\n <svg id=\"demagSvg\" viewBox=\"0 0 800 450\"><\/svg>\r\n <\/div>\r\n <div class=\"legend-bar\" id=\"legendBar\"><\/div>\r\n\r\n <div class=\"live-delta-bar\">\r\n <div class=\"delta-item\"><span class=\"title\">Reverse Field -H<\/span><span class=\"val\" id=\"hoverH\">Hover Chart<\/span><\/div>\r\n <div class=\"delta-item\"><span class=\"title\" id=\"titleDeltaB\">Flux Density Delta B (B - A)<\/span><span class=\"val\" id=\"deltaBVal\">-<\/span><\/div>\r\n <div class=\"delta-item\"><span class=\"title\" id=\"titleDeltaJ\">Intrinsic Magnetization Delta J (B - A)<\/span><span class=\"val\" id=\"deltaJVal\">-<\/span><\/div>\r\n <div class=\"delta-item\"><span class=\"title\">Demagnetization Margin<\/span><span class=\"val\" id=\"marginVal\" style=\"color:#0066cc;\">Move mouse over graph<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"data-status\">\r\n <strong>Data status:<\/strong> The tool covers 50SH, 52SH, 42SHT, 48SH, 52H, 48UH, 48H, 45SH, 40SH, 38UH and 35SH. An asterisk (*) on a temperature button means only one of the two grades has data at that temperature. In that case, the tool plots only that grade. It never fills the gap with the nearest temperature, because that would show a curve that does not exist.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"method-card\">\r\n <h2 class=\"section-title\">How These Curves Are Built<\/h2>\r\n <p class=\"section-intro\">The curves come from each grade's key specification points. They are not digitized raw test data. Below, we explain how we build them, so you know what the tool can and cannot tell you.<\/p>\r\n\r\n <h3 class=\"sub-title\">Step 1: Start With Four Datasheet Values<\/h3>\r\n <p class=\"body-text\">First, each curve starts from four values in the grade's datasheet. These are remanence (Br), normal coercivity (HcB), intrinsic coercivity (HcJ) and knee field (Hk). In addition, we follow the test convention in <strong>GB\/T 3217<\/strong>, the standard for the magnetic properties of permanent magnet materials.<\/p>\r\n\r\n <h3 class=\"sub-title\">Step 2: Shape the Intrinsic Curve<\/h3>\r\n <p class=\"body-text\">Then, between zero field and the knee field Hk, the intrinsic curve J(H) declines slowly and stays close to Br. This flat region is where the magnet is not yet at risk. Beyond Hk, the curve drops more steeply toward HcJ. This drop is the knee, where a grade with lower squareness loses magnetization faster.<\/p>\r\n\r\n <h3 class=\"sub-title\">Step 3: Derive the Normal Curve<\/h3>\r\n <p class=\"body-text\">Next, we derive the normal B-H curve from the intrinsic curve with the standard relation <strong>B = J \u2212 \u03bc\u2080H<\/strong>. In the units used here, this becomes B = J \u2212 0.1 \u00d7 H. H is in kOe, and B and J are in Tesla.<\/p>\r\n\r\n <h3 class=\"sub-title\">What the Tool Cannot Tell You<\/h3>\r\n <p class=\"body-text\">These curves are smooth models fitted to four key points per grade. As a result, they show the overall shape and the knee position well. However, they miss the small irregularities of a real measured curve. For that level of detail, you need full measured hysteresis loop data.<\/p>\r\n\r\n <h3 class=\"sub-title\">Symbol Reference<\/h3>\r\n <table class=\"std-table\">\r\n <thead><tr><th>Symbol<\/th><th>Meaning<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>Br<\/td><td>Remanence \u2014 flux density at H = 0<\/td><\/tr>\r\n <tr><td>HcB<\/td><td>Normal (B-H) coercivity \u2014 field at which B reaches 0<\/td><\/tr>\r\n <tr><td>HcJ<\/td><td>Intrinsic (J-H) coercivity \u2014 field at which J reaches 0<\/td><\/tr>\r\n <tr><td>Hk<\/td><td>Knee field \u2014 where the J-H curve begins to fall steeply<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n\r\n <div class=\"disclaimer-card\">\r\n <h3>Engineering Reference<\/h3>\r\n <p>Use these curves for grade selection and early demagnetization-risk screening. However, for FEA simulation or a safety-critical design, request full B-H and J-H data from our engineers. Do not read exact values off this chart.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-box\">\r\n <div class=\"cta-content\">\r\n <h3>Evaluating demagnetization risk for your project?<\/h3>\r\n <p>Our interactive tool shows standard curves. However, your application may need full B-H and J-H data for FEA simulation at high temperatures. Contact our team, and we will send you the complete hysteresis data.<\/p>\r\n <\/div>\r\n <a href=\"\/contact-us\" class=\"btn-cta\">Request Full B-H Curve Data →<\/a>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n let currentTemp = 20;\r\n const tempColors = ['#2563eb', '#dc2626', '#16a34a', '#d97706', '#9333ea', '#0891b2'];\r\n\r\n const curveDatabase = {\r\n \"50SH\": { 20: gp(1.402,13.58,20.70,20.03), 100: gp(1.290,9.866,9.997,9.743), 120: gp(1.250,7.834,7.889,7.678), 150: gp(1.183,5.312,5.354,5.134) },\r\n \/\/ \u3010\u65b0\u589e\u301152SH\r\n \"52SH\": { 20: gp(1.431,13.85,20.70,20.03), 100: gp(1.308,9.871,9.997,9.743), 120: gp(1.268,7.836,7.889,7.678), 150: gp(1.200,5.313,5.354,5.134) },\r\n \/\/ \u3010\u65b0\u589e\u301142SHT\r\n \"42SHT\": { 20: gp(1.300,12.41,21.23,20.63), 100: gp(1.192,11.01,11.38,11.19), 120: gp(1.154,9.505,9.633,9.427), 150: gp(1.097,6.836,6.880,6.712) },\r\n \"48SH\": { 20: gp(1.388,13.38,20.34,19.63), 80: gp(1.305,11.82,12.16,11.83), 100: gp(1.264,9.562,9.727,9.438), 120: gp(1.228,7.598,7.700,7.449), 150: gp(1.161,5.177,5.231,5.001) },\r\n \"52H\": { 20: gp(1.437,13.73,17.81,17.13), 80: gp(1.351,10.77,11.00,10.62), 100: gp(1.320,8.944,9.086,8.753), 120: gp(1.279,7.338,7.428,7.146) },\r\n \"48UH\": { 20: gp(1.383,13.41,25.71,23.96), 100: gp(1.280,12.17,14.87,14.10), 150: gp(1.181,9.151,9.450,8.933) },\r\n \"48H\": { 20: gp(1.389,13.45,17.34,16.70), 100: gp(1.291,8.259,8.326,8.081), 120: gp(1.254,6.669,6.705,6.499), 150: gp(1.194,4.740,4.757,4.578) },\r\n \"45SH\": { 20: gp(1.344,13.05,20.23,19.46), 100: gp(1.231,9.899,10.12,9.767), 120: gp(1.193,8.090,8.226,7.913), 150: gp(1.132,5.827,5.882,5.627), 180: gp(1.062,4.029,4.058,3.836) },\r\n \"40SH\": { 20: gp(1.274,12.420,20.260,19.670), 60: gp(1.2317,11.860,15.200,14.720), 80: gp(1.201,11.520,12.770,12.390), 100: gp(1.1701,10.240,10.540,10.210), 120: gp(1.1378,8.471,8.619,8.355), 150: gp(1.077,6.125,6.229,6.000) },\r\n \"38UH\": { 20: gp(1.251,12.21,25.95,24.45), 60: gp(1.207,11.61,20.33,19.62), 100: gp(1.148,10.79,15.15,14.71), 120: gp(1.115,10.34,12.76,12.36), 150: gp(1.059,9.324,9.595,9.263), 180: gp(0.996,6.769,6.847,6.585) },\r\n \"35SH\": { 20: gp(1.204,11.70,20.42,19.90), 100: gp(1.106,10.00,10.28,10.01), 120: gp(1.072,8.203,8.314,8.096), 150: gp(1.019,5.928,5.986,5.798) }\r\n };\r\n\r\n function gp(Br, HcB, HcJ, Hk) {\r\n const pointsB = [], pointsJ = [], maxH = 28;\r\n for (let H = 0; H <= maxH; H += 0.2) {\r\n let B = 0, J = 0;\r\n if (H <= Hk) J = Br * (1 - 0.05 * Math.pow(H \/ Hk, 4));\r\n else if (H <= HcJ) { const ratio = (H - Hk) \/ (HcJ - Hk || 0.1); J = Br * 0.95 * (1 - 0.95 * Math.pow(ratio, 2)); }\r\n else { const dropRate = Br * 0.8; J = Math.max(0, Br * 0.05 - dropRate * (H - HcJ)); }\r\n B = J - 0.100 * H;\r\n if (B > 0) pointsB.push({ H, val: parseFloat(B.toFixed(3)) });\r\n else if (pointsB.length > 0 && pointsB[pointsB.length - 1].val > 0) pointsB.push({ H, val: 0 });\r\n if (J > 0) pointsJ.push({ H, val: parseFloat(J.toFixed(3)) });\r\n else if (pointsJ.length > 0 && pointsJ[pointsJ.length - 1].val > 0) pointsJ.push({ H, val: 0 });\r\n }\r\n return { B: pointsB, J: pointsJ };\r\n }\r\n\r\n const margin = { top: 40, right: 60, bottom: 50, left: 60 };\r\n const width = 800 - margin.left - margin.right;\r\n const height = 450 - margin.top - margin.bottom;\r\n function mapX(H) { return margin.left + width - (H \/ 28) * width; }\r\n function mapY(val) { return margin.top + height - (val \/ 1.6) * height; }\r\n\r\n function updateTempButtons() {\r\n const nameA = document.getElementById('gradeA').value, nameB = document.getElementById('gradeB').value;\r\n const container = document.getElementById('tempToggleGroup');\r\n container.classList.toggle('disabled', nameA === nameB);\r\n const tempsA = Object.keys(curveDatabase[nameA]).map(Number), tempsB = Object.keys(curveDatabase[nameB]).map(Number);\r\n const allTemps = Array.from(new Set([...tempsA, ...tempsB])).sort((a,b) => a - b);\r\n container.innerHTML = '';\r\n if (!allTemps.includes(currentTemp)) currentTemp = allTemps[0];\r\n allTemps.forEach(temp => {\r\n const btn = document.createElement('button');\r\n const isPartial = !(tempsA.includes(temp) && tempsB.includes(temp));\r\n btn.className = `temp-btn ${temp === currentTemp ? 'active' : ''} ${isPartial ? 'partial' : ''}`;\r\n btn.title = isPartial ? 'Only one of the two selected grades has data at this temperature' : '';\r\n btn.innerText = temp === 20 ? '20\u2103 (RT)' : `${temp}\u2103`;\r\n btn.onclick = function() {\r\n if (nameA === nameB) return;\r\n document.querySelectorAll('.temp-btn').forEach(b => b.classList.remove('active'));\r\n this.classList.add('active'); currentTemp = temp; drawChart();\r\n };\r\n container.appendChild(btn);\r\n });\r\n }\r\n\r\n function drawChart() {\r\n const svg = document.getElementById('demagSvg');\r\n const nameA = document.getElementById('gradeA').value, nameB = document.getElementById('gradeB').value;\r\n const legendBar = document.getElementById('legendBar');\r\n const isSameGrade = (nameA === nameB);\r\n let html = '';\r\n for (let b = 0; b <= 1.6; b += 0.2) { let y = mapY(b); html += `<line x1=\"${margin.left}\" y1=\"${y}\" x2=\"${margin.left+width}\" y2=\"${y}\" stroke=\"#e5e5e7\" stroke-width=\"1\"\/><text x=\"${margin.left+width+10}\" y=\"${y+4}\" font-size=\"11\" fill=\"#86868b\">${b.toFixed(1)}<\/text>`; }\r\n for (let h = 0; h <= 28; h += 4) { let x = mapX(h); html += `<line x1=\"${x}\" y1=\"${margin.top}\" x2=\"${x}\" y2=\"${margin.top+height}\" stroke=\"#e5e5e7\" stroke-width=\"1\"\/><text x=\"${x}\" y=\"${margin.top+height+20}\" font-size=\"11\" fill=\"#86868b\" text-anchor=\"middle\">${h}<\/text>`; }\r\n html += `<rect x=\"${margin.left}\" y=\"${margin.top}\" width=\"${width}\" height=\"${height}\" fill=\"none\" stroke=\"#d2d2d7\" stroke-width=\"1.5\"\/>`;\r\n html += `<text x=\"${margin.left-10}\" y=\"${margin.top-15}\" font-size=\"12\" font-weight=\"bold\" fill=\"#1d1d1f\">-H (kOe)<\/text>`;\r\n html += `<text x=\"${margin.left+width+10}\" y=\"${margin.top-15}\" font-size=\"12\" font-weight=\"bold\" fill=\"#1d1d1f\">B \/ J (T)<\/text>`;\r\n const titleText = isSameGrade ? `${nameA} Demagnetization Curves at All Temperatures` : `${nameA} vs ${nameB} Demagnetization Curves (${currentTemp}\u2103)`;\r\n html += `<text x=\"400\" y=\"25\" font-size=\"15\" font-weight=\"bold\" fill=\"#1d1d1f\" text-anchor=\"middle\">${titleText}<\/text>`;\r\n function makePath(points) { if (!points || points.length === 0) return ''; return points.map((p,i) => `${i===0?'M':'L'} ${mapX(p.H)} ${mapY(p.val)}`).join(' '); }\r\n\r\n let legendHtml = '', currentChartData = [];\r\n if (isSameGrade) {\r\n const temps = Object.keys(curveDatabase[nameA]).map(Number).sort((a,b) => a-b);\r\n temps.forEach((t, index) => {\r\n const color = tempColors[index % tempColors.length]; const data = curveDatabase[nameA][t];\r\n html += `<path d=\"${makePath(data.B)}\" fill=\"none\" stroke=\"${color}\" stroke-width=\"2.5\"\/>`;\r\n html += `<path d=\"${makePath(data.J)}\" fill=\"none\" stroke=\"${color}\" stroke-width=\"1.5\" stroke-dasharray=\"4,4\"\/>`;\r\n if (data.B && data.B.length > 0) { const p0 = data.B[0]; html += `<text x=\"${mapX(p0.H)-8}\" y=\"${mapY(p0.val)-6}\" font-size=\"10\" font-weight=\"bold\" fill=\"${color}\">${t}\u2103<\/text>`; }\r\n legendHtml += `<div class=\"legend-item\"><div class=\"legend-line\" style=\"background:${color};\"><\/div><span>${t}\u2103 (B-H)<\/span><\/div>`;\r\n currentChartData.push({ label: `${t}\u2103`, data, color });\r\n });\r\n document.getElementById('titleDeltaB').innerText = \"Max B-H at Field\";\r\n document.getElementById('titleDeltaJ').innerText = \"Max J-H at Field\";\r\n } else {\r\n const dataA = curveDatabase[nameA][currentTemp], dataB = curveDatabase[nameB][currentTemp];\r\n if (dataA) { html += `<path d=\"${makePath(dataA.B)}\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"3\"\/><path d=\"${makePath(dataA.J)}\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2\" stroke-dasharray=\"5,5\"\/>`; }\r\n if (dataB) { html += `<path d=\"${makePath(dataB.B)}\" fill=\"none\" stroke=\"#dc2626\" stroke-width=\"3\"\/><path d=\"${makePath(dataB.J)}\" fill=\"none\" stroke=\"#dc2626\" stroke-width=\"2\" stroke-dasharray=\"5,5\"\/>`; }\r\n legendHtml += dataA ? `<div class=\"legend-item\"><div class=\"legend-line\" style=\"background:#2563eb;\"><\/div><span>${nameA} (B-H)<\/span><\/div><div class=\"legend-item\"><div class=\"legend-line\" style=\"border-bottom:2px dashed #2563eb;height:0;\"><\/div><span>${nameA} (J-H)<\/span><\/div>` : `<div class=\"legend-item legend-missing\" style=\"color:#2563eb;\">${nameA}: no data at ${currentTemp}\u2103<\/div>`;\r\n legendHtml += dataB ? `<div class=\"legend-item\"><div class=\"legend-line\" style=\"background:#dc2626;\"><\/div><span>${nameB} (B-H)<\/span><\/div><div class=\"legend-item\"><div class=\"legend-line\" style=\"border-bottom:2px dashed #dc2626;height:0;\"><\/div><span>${nameB} (J-H)<\/span><\/div>` : `<div class=\"legend-item legend-missing\" style=\"color:#dc2626;\">${nameB}: no data at ${currentTemp}\u2103<\/div>`;\r\n document.getElementById('titleDeltaB').innerText = \"Flux Density Delta B (B - A)\";\r\n document.getElementById('titleDeltaJ').innerText = \"Intrinsic Magnetization Delta J (B - A)\";\r\n if (dataA) currentChartData.push({ label: nameA, data: dataA, color: '#2563eb' });\r\n if (dataB) currentChartData.push({ label: nameB, data: dataB, color: '#dc2626' });\r\n }\r\n legendBar.innerHTML = legendHtml;\r\n html += `<g id=\"hoverGroup\" style=\"display:none;\"><line id=\"hoverLine\" x1=\"0\" y1=\"${margin.top}\" x2=\"0\" y2=\"${margin.top+height}\" stroke=\"#666\" stroke-width=\"1\" stroke-dasharray=\"3,3\"\/><g id=\"hoverDots\"><\/g><\/g>`;\r\n svg.innerHTML = html;\r\n\r\n svg.onmousemove = function(e) {\r\n const rect = svg.getBoundingClientRect();\r\n const mouseX = (e.clientX - rect.left) * (800 \/ rect.width);\r\n if (mouseX >= margin.left && mouseX <= margin.left + width) {\r\n const H = ((margin.left + width - mouseX) \/ width) * 28, hClamped = Math.min(Math.max(H, 0), 28);\r\n const hoverGroup = document.getElementById('hoverGroup'), hoverLine = document.getElementById('hoverLine'), hoverDots = document.getElementById('hoverDots');\r\n if (hoverGroup) hoverGroup.style.display = 'block';\r\n if (hoverLine) { hoverLine.setAttribute('x1', mouseX); hoverLine.setAttribute('x2', mouseX); }\r\n const getClosest = (pts, hVal) => { if (!pts || pts.length === 0) return { H: hVal, val: 0 }; return pts.reduce((p,c) => Math.abs(c.H-hVal) < Math.abs(p.H-hVal) ? c : p); };\r\n let dotsHtml = '';\r\n if (isSameGrade) {\r\n currentChartData.forEach(item => { const pt = getClosest(item.data.B, hClamped); dotsHtml += `<circle cx=\"${mapX(pt.H)}\" cy=\"${mapY(pt.val)}\" r=\"4\" fill=\"${item.color}\"\/>`; });\r\n if (hoverDots) hoverDots.innerHTML = dotsHtml;\r\n updateSingleGradeDeltaBar(hClamped.toFixed(1), currentChartData, getClosest);\r\n } else {\r\n const entryA = currentChartData.find(i => i.label === nameA), entryB = currentChartData.find(i => i.label === nameB);\r\n if (entryA) { const p = getClosest(entryA.data.B, hClamped); dotsHtml += `<circle cx=\"${mapX(p.H)}\" cy=\"${mapY(p.val)}\" r=\"4\" fill=\"#2563eb\"\/>`; }\r\n if (entryB) { const p = getClosest(entryB.data.B, hClamped); dotsHtml += `<circle cx=\"${mapX(p.H)}\" cy=\"${mapY(p.val)}\" r=\"4\" fill=\"#dc2626\"\/>`; }\r\n if (hoverDots) hoverDots.innerHTML = dotsHtml;\r\n updateDeltaBar(hClamped.toFixed(1), entryA, entryB, getClosest, nameA, nameB);\r\n }\r\n }\r\n };\r\n svg.onmouseleave = function() { const g = document.getElementById('hoverGroup'); if (g) g.style.display = 'none'; };\r\n }\r\n\r\n function updateDeltaBar(H, entryA, entryB, getClosest, nameA, nameB) {\r\n document.getElementById('hoverH').innerText = `${H} kOe`;\r\n const elB = document.getElementById('deltaBVal'), elJ = document.getElementById('deltaJVal'), marginEl = document.getElementById('marginVal');\r\n if (!entryA && !entryB) { elB.innerText='-'; elJ.innerText='-'; marginEl.innerText='Neither grade has data at this temperature'; marginEl.style.color='#86868b'; return; }\r\n if (!entryA || !entryB) { const missing = !entryA?nameA:nameB, present = entryA?nameA:nameB; elB.innerText='-'; elJ.innerText='-'; marginEl.innerText=`${missing}: no data at this temperature \u2014 only ${present} shown`; marginEl.style.color='#d97706'; return; }\r\n const pAB=getClosest(entryA.data.B,H), pBB=getClosest(entryB.data.B,H), pAJ=getClosest(entryA.data.J,H), pBJ=getClosest(entryB.data.J,H);\r\n const diffB=(pBB.val-pAB.val).toFixed(3), diffJ=(pBJ.val-pAJ.val).toFixed(3);\r\n elB.innerText=`${diffB>0?'+'+diffB:diffB} T`; elB.style.color=diffB>=0?'#16a34a':'#dc2626';\r\n elJ.innerText=`${diffJ>0?'+'+diffJ:diffJ} T`; elJ.style.color=diffJ>=0?'#16a34a':'#dc2626';\r\n if (pBB.val>0 && pAB.val===0) { marginEl.innerText=`${nameB} Active | ${nameA} Fully Demagnetized`; marginEl.style.color='#dc2626'; }\r\n else if (pAB.val>0 && pBB.val===0) { marginEl.innerText=`${nameA} Active | ${nameB} Fully Demagnetized`; marginEl.style.color='#2563eb'; }\r\n else { marginEl.innerText='Both grades within stable range'; marginEl.style.color='#16a34a'; }\r\n }\r\n\r\n function updateSingleGradeDeltaBar(H, chartData, getClosest) {\r\n document.getElementById('hoverH').innerText = `${H} kOe`;\r\n let maxB=0, maxJ=0, activeTemps=0;\r\n chartData.forEach(item => { const ptB=getClosest(item.data.B,H), ptJ=getClosest(item.data.J,H); if(ptB.val>maxB)maxB=ptB.val; if(ptJ.val>maxJ)maxJ=ptJ.val; if(ptB.val>0)activeTemps++; });\r\n document.getElementById('deltaBVal').innerText = `${maxB.toFixed(3)} T`; document.getElementById('deltaBVal').style.color='#1d1d1f';\r\n document.getElementById('deltaJVal').innerText = `${maxJ.toFixed(3)} T`; document.getElementById('deltaJVal').style.color='#1d1d1f';\r\n const marginEl = document.getElementById('marginVal');\r\n marginEl.innerText = `${activeTemps} \/ ${chartData.length} Temps Active`;\r\n marginEl.style.color = activeTemps === chartData.length ? '#16a34a' : '#d97706';\r\n }\r\n\r\n function init() {\r\n const gradeA = document.getElementById('gradeA'), gradeB = document.getElementById('gradeB');\r\n const onGradeChange = () => { updateTempButtons(); drawChart(); };\r\n gradeA.addEventListener('change', onGradeChange); gradeB.addEventListener('change', onGradeChange);\r\n updateTempButtons(); drawChart();\r\n }\r\n init();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n<style>\r\n.kndtc { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 18px 0 0; padding: 18px 22px; border-radius: 10px; background: linear-gradient(135deg, #e61373 0%, #b30e58 100%); box-sizing: border-box; }\r\n.kndtc *, .kndtc *::before, .kndtc *::after { box-sizing: border-box; }\r\n.kndtc-text { flex: 1 1 260px; min-width: 0; }\r\n.kndtc-kicker { display: block; margin: 0 0 6px; font-size: 21px; font-weight: 800; line-height: 1.25; color: #ffffff !important; }\r\n.kndtc-spec { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #ffffff !important; opacity: 0.95; }\r\n.kndtc-spec:empty { display: none; }\r\n.kndtc-sub { display: block; font-size: 14px; line-height: 1.5; color: #ffffff !important; }\r\n.kndtc-pill { display: inline-block; margin-right: 8px; padding: 2px 10px; background: #ffffff; border-radius: 999px; color: #b30e58 !important; font-size: 12px; font-weight: 800; vertical-align: 1px; }\r\n.kndtc-btn { flex: none; display: inline-block; padding: 13px 26px; background: #ffffff !important; border-radius: 8px; color: #b30e58 !important; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none !important; animation: kndtcPulse 2.2s ease-out infinite; transition: transform 0.2s; }\r\n.kndtc-btn:hover { transform: translateY(-2px); animation: none; }\r\n@keyframes kndtcPulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }\r\n 70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }\r\n}\r\n@media (prefers-reduced-motion: reduce) { .kndtc-btn { animation: none; } }\r\n@media (max-width: 600px) { .kndtc-btn { width: 100%; } }\r\n<\/style>\r\n<div class=\"kndtc\" id=\"kndtc\" style=\"margin: 0 0 16px;\">\r\n <div class=\"kndtc-text\">\r\n <span class=\"kndtc-kicker\">Want a free sample?<\/span>\r\n <span class=\"kndtc-spec\" id=\"kndtcSpec\"><\/span>\r\n <span class=\"kndtc-sub\"><b class=\"kndtc-pill\">Under 1 minute<\/b>Your grade is filled in. Just choose a shape and coating, then add your email.<\/span>\r\n <\/div>\r\n <a class=\"kndtc-btn\" id=\"kndtcBtn\" href=\"\/custom-ndfeb-magnets\/\">Get My Free Sample →<\/a>\r\n<\/div>\r\n<script>\r\n(function () {\r\n var card = document.getElementById('kndtc');\r\n var btn = document.getElementById('kndtcBtn');\r\n var specEl = document.getElementById('kndtcSpec');\r\n if (!card || !btn || !specEl) { return; }\r\n\r\n var TOOL = 'Demagnetization Curve Tool';\r\n var $ = function (id) { return document.getElementById(id); };\r\n var qs1 = function (sel) { return document.querySelector(sel); };\r\n var val = function (id) { var e = $(id); return e ? parseFloat(e.value) : NaN; };\r\n\r\n \/* What this tool hands over to the custom form *\/\r\n function collect() {\r\n var a = $('gradeA').value, b = $('gradeB').value;\r\n var tb = qs1('#tempToggleGroup .temp-btn.active');\r\n var temp = tb ? tb.textContent.replace(\/\\s*\$RT\$\/, '').replace('\\u2103', '\\u00b0C').trim() : '';\r\n var q = { grade: 'N' + b };\r\n if (a !== b) {\r\n q.tk1 = 'Grade A'; q.tv1 = a;\r\n q.tk2 = 'Grade B'; q.tv2 = b;\r\n if (temp) { q.tk3 = 'Compared at'; q.tv3 = temp; }\r\n return { spec: a + ' vs ' + b + (temp ? ' \/ ' + temp : ''), q: q };\r\n }\r\n q.tk1 = 'Grade viewed'; q.tv1 = a;\r\n return { spec: a + ' \/ all available temperatures', q: q };\r\n }\r\n\r\n \/* The card is moved to sit right under the results *\/\r\n function anchor() {\r\n return qs1('.control-bar');\r\n }\r\n\r\n function place() {\r\n var t = anchor();\r\n if (t && t.parentNode && t.nextElementSibling !== card) { t.parentNode.insertBefore(card, t.nextSibling); }\r\n }\r\n\r\n function toQuery(q) {\r\n return Object.keys(q).filter(function (k) {\r\n var v = q[k];\r\n return typeof v === 'string' ? v !== '' : (typeof v === 'number' && isFinite(v) && v > 0);\r\n }).map(function (k) {\r\n var v = q[k];\r\n return k + '=' + encodeURIComponent(typeof v === 'number' ? String(parseFloat(v.toFixed(3))) : v);\r\n }).join('&');\r\n }\r\n\r\n function setHref(a, qs) {\r\n var base = (a.getAttribute('href') || '').split('?')[0];\r\n a.setAttribute('href', base + '?' + qs);\r\n }\r\n\r\n function update() {\r\n var d = null;\r\n try { d = collect(); } catch (e) { d = null; }\r\n d = d || { spec: '', q: {} };\r\n specEl.textContent = d.spec || '';\r\n var q = { from: 'tool', tool: TOOL };\r\n Object.keys(d.q).forEach(function (k) { q[k] = d.q[k]; });\r\n var qs = toQuery(q);\r\n setHref(btn, qs);\r\n\r\n }\r\n\r\n function later() { window.setTimeout(function () { place(); update(); }, 0); }\r\n ['input', 'change', 'click', 'keyup'].forEach(function (ev) { document.addEventListener(ev, later, true); });\r\n\r\n btn.addEventListener('click', function () {\r\n window.dataLayer = window.dataLayer || [];\r\n window.dataLayer.push({ event: 'tool_entry_click', tool_name: TOOL });\r\n });\r\n\r\n place();\r\n update();\r\n window.setTimeout(function () { place(); update(); }, 300);\r\n window.setTimeout(function () { place(); update(); }, 1200);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NdFeB Demagnetization Curve Tool | King-Nd Magnet NdFeB Demagnetization Curve Tool Compare the B-H and J-H demagnetization curves of two […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1553,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2089","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/2089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/comments?post=2089"}],"version-history":[{"count":28,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/2089\/revisions"}],"predecessor-version":[{"id":3532,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/2089\/revisions\/3532"}],"up":[{"embeddable":true,"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/pages\/1553"}],"wp:attachment":[{"href":"https:\/\/kingndmagnet.com\/ja\/wp-json\/wp\/v2\/media?parent=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}