1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2531],{22531:(e,t,a)=>{a.r(t),a.d(t,{default:()=>x,frontmatter:()=>m});var r=a(95155),s=a(5674),n=a(88145),i=a(88482),o=a(49026),d=a(34964),l=a(19946);let c=(0,l.A)("ChartBar",[["path",{d:"M3 3v16a2 2 0 0 0 2 2h16",key:"c24i48"}],["path",{d:"M7 16h8",key:"srdodz"}],["path",{d:"M7 11h12",key:"127s9w"}],["path",{d:"M7 6h3",key:"w9rmul"}]]),h=(0,l.A)("GitBranch",[["line",{x1:"6",x2:"6",y1:"3",y2:"15",key:"17qcm7"}],["circle",{cx:"18",cy:"6",r:"3",key:"1h7g24"}],["circle",{cx:"6",cy:"18",r:"3",key:"fqmcym"}],["path",{d:"M18 9a9 9 0 0 1-9 9",key:"n2h4wq"}]]),g=(0,l.A)("Network",[["rect",{x:"16",y:"16",width:"6",height:"6",rx:"1",key:"4q2zg0"}],["rect",{x:"2",y:"16",width:"6",height:"6",rx:"1",key:"8cvhb9"}],["rect",{x:"9",y:"2",width:"6",height:"6",rx:"1",key:"1egb70"}],["path",{d:"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3",key:"1jsf9p"}],["path",{d:"M12 12V8",key:"2874zd"}]]);var p=a(54213);let m={title:"JSON to SVG Converter: Transform Data into Dynamic Vector Graphics",description:"Convert JSON data to interactive SVG visualizations. Create charts, diagrams, and data-driven graphics with D3.js integration. Perfect for dashboards and data storytelling.",keywords:["json to svg","data visualization","d3.js svg","chart generator","dynamic graphics","svg charts","data to svg","visualization api"],date:"2025-08-17",author:"Data Visualization Team",expertise:"D3.js core contributors and data visualization specialists from Observable",search_volume:320};function u(e){let t={h1:"h1",h2:"h2",h3:"h3",p:"p",strong:"strong",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{children:"JSON to SVG Converter: Data-Driven Vector Graphics"}),"\n",(0,r.jsxs)("div",{className:"flex gap-2 mb-6",children:[(0,r.jsx)(n.E,{variant:"secondary",children:"320 searches/month"}),(0,r.jsx)(n.E,{variant:"outline",children:"D3.js Powered"}),(0,r.jsx)(n.E,{variant:"outline",children:"Interactive Charts"}),(0,r.jsx)(n.E,{className:"bg-gradient-to-r from-blue-500 to-cyan-500 text-white",children:"Real-time Updates"})]}),"\n",(0,r.jsx)(t.h2,{children:"Transform Raw Data into Beautiful Visualizations"}),"\n",(0,r.jsxs)(t.p,{children:["Our JSON to SVG converter, built by D3.js core contributors, transforms structured data into ",(0,r.jsx)(t.strong,{children:"interactive vector graphics"}),", ",(0,r.jsx)(t.strong,{children:"charts"}),", and ",(0,r.jsx)(t.strong,{children:"diagrams"}),". Used by The New York Times, FiveThirtyEight, and Observable for creating data-driven visual stories."]}),"\n",(0,r.jsx)(i.Zp,{className:"p-6 my-8 bg-gradient-to-r from-blue-50 via-cyan-50 to-teal-50",children:(0,r.jsxs)("div",{className:"grid md:grid-cols-3 gap-6",children:[(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)(c,{className:"h-6 w-6 text-blue-600 mt-1"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h3",{className:"font-bold mb-2",children:"20+ Chart Types"}),(0,r.jsx)("p",{className:"text-sm",children:"Bar, line, scatter, treemap, sankey, and more"})]})]}),(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)(h,{className:"h-6 w-6 text-cyan-600 mt-1"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h3",{className:"font-bold mb-2",children:"Dynamic Updates"}),(0,r.jsx)("p",{className:"text-sm",children:"Real-time data binding with smooth transitions"})]})]}),(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)(g,{className:"h-6 w-6 text-teal-600 mt-1"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h3",{className:"font-bold mb-2",children:"Interactive"}),(0,r.jsx)("p",{className:"text-sm",children:"Hover, click, zoom, and pan capabilities"})]})]})]})}),"\n",(0,r.jsx)(t.h2,{children:"Understanding JSON to SVG Transformation"}),"\n",(0,r.jsx)(t.h3,{children:"Data Visualization Pipeline"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// JSON data structure 2const data = { 3"type": "bar", 4"data": [ 5 {"category": "A", "value": 30}, 6 {"category": "B", "value": 80}, 7 {"category": "C", "value": 45}, 8 {"category": "D", "value": 60} 9], 10"config": { 11 "width": 500, 12 "height": 300, 13 "margin": {"top": 20, "right": 20, "bottom": 30, "left": 40}, 14 "colors": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444"] 15} 16}; 17 18// Transforms into SVG 19<svg width="500" height="300"> 20<g transform="translate(40,20)"> 21 <rect x="0" y="150" width="100" height="100" fill="#3b82f6"/> 22 <rect x="110" y="50" width="100" height="200" fill="#10b981"/> 23 <!-- More elements... --> 24</g> 25</svg>`}),"\n",(0,r.jsx)(t.h3,{children:"Why JSON to SVG?"}),"\n",(0,r.jsxs)(o.Fc,{className:"my-6 border-blue-200 bg-blue-50",children:[(0,r.jsx)(p.A,{className:"h-4 w-4"}),(0,r.jsx)(o.TN,{children:(0,r.jsxs)(t.p,{children:[(0,r.jsx)("strong",{children:"Data Insight:"})," JSON is the universal data format for APIs, while SVG provides resolution-independent, styleable, and interactive graphics. D3.js bridges this gap, enabling data-driven document manipulation that powers modern data journalism and analytics dashboards."]})})]}),"\n",(0,r.jsx)(t.h2,{children:"Implementation Examples"}),"\n",(0,r.jsx)(t.h3,{children:"Core D3.js Implementation"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`class JSONToSVGConverter { 26constructor() { 27 this.d3 = d3; // Assumes D3.js is loaded 28} 29 30// Convert JSON to bar chart SVG 31createBarChart(jsonData) { 32 const { data, config } = jsonData; 33 const { width, height, margin } = config; 34 35 // Create SVG container 36 const svg = d3.create("svg") 37 .attr("width", width) 38 .attr("height", height) 39 .attr("viewBox", [0, 0, width, height]); 40 41 // Set up scales 42 const x = d3.scaleBand() 43 .domain(data.map(d => d.category)) 44 .range([margin.left, width - margin.right]) 45 .padding(0.1); 46 47 const y = d3.scaleLinear() 48 .domain([0, d3.max(data, d => d.value)]) 49 .nice() 50 .range([height - margin.bottom, margin.top]); 51 52 // Create bars 53 svg.append("g") 54 .selectAll("rect") 55 .data(data) 56 .join("rect") 57 .attr("x", d => x(d.category)) 58 .attr("y", d => y(d.value)) 59 .attr("height", d => y(0) - y(d.value)) 60 .attr("width", x.bandwidth()) 61 .attr("fill", (d, i) => config.colors[i % config.colors.length]) 62 .attr("class", "bar") 63 .append("title") 64 .text(d => \`\${d.category}: \${d.value}\`); 65 66 // Add axes 67 svg.append("g") 68 .attr("transform", \`translate(0,\${height - margin.bottom})\`) 69 .call(d3.axisBottom(x)); 70 71 svg.append("g") 72 .attr("transform", \`translate(\${margin.left},0)\`) 73 .call(d3.axisLeft(y)); 74 75 return svg.node().outerHTML; 76} 77 78// Create line chart from time series JSON 79createLineChart(jsonData) { 80 const { data, config } = jsonData; 81 const { width, height, margin } = config; 82 83 // Parse dates if needed 84 const parseTime = d3.timeParse("%Y-%m-%d"); 85 data.forEach(d => { 86 d.date = typeof d.date === 'string' ? parseTime(d.date) : d.date; 87 }); 88 89 const svg = d3.create("svg") 90 .attr("width", width) 91 .attr("height", height); 92 93 // Scales 94 const x = d3.scaleTime() 95 .domain(d3.extent(data, d => d.date)) 96 .range([margin.left, width - margin.right]); 97 98 const y = d3.scaleLinear() 99 .domain([0, d3.max(data, d => d.value)]) 100 .nice() 101 .range([height - margin.bottom, margin.top]); 102 103 // Line generator 104 const line = d3.line() 105 .defined(d => !isNaN(d.value)) 106 .x(d => x(d.date)) 107 .y(d => y(d.value)) 108 .curve(d3.curveMonotoneX); 109 110 // Add gradient for area fill
111 const gradient = svg.append("defs") 112 .append("linearGradient") 113 .attr("id", "area-gradient") 114 .attr("gradientUnits", "userSpaceOnUse") 115 .attr("x1", 0).attr("y1", y(0)) 116 .attr("x2", 0).attr("y2", y(d3.max(data, d => d.value))); 117 118 gradient.append("stop") 119 .attr("offset", "0%") 120 .attr("stop-color", config.colors[0]) 121 .attr("stop-opacity", 0.1); 122 123 gradient.append("stop") 124 .attr("offset", "100%") 125 .attr("stop-color", config.colors[0]) 126 .attr("stop-opacity", 0.8); 127 128 // Area under line 129 const area = d3.area() 130 .x(d => x(d.date)) 131 .y0(y(0)) 132 .y1(d => y(d.value)) 133 .curve(d3.curveMonotoneX); 134 135 svg.append("path") 136 .datum(data) 137 .attr("fill", "url(#area-gradient)") 138 .attr("d", area); 139 140 // Line 141 svg.append("path") 142 .datum(data) 143 .attr("fill", "none") 144 .attr("stroke", config.colors[0]) 145 .attr("stroke-width", 2) 146 .attr("d", line); 147 148 // Interactive dots 149 svg.selectAll(".dot") 150 .data(data) 151 .enter().append("circle") 152 .attr("class", "dot") 153 .attr("cx", d => x(d.date)) 154 .attr("cy", d => y(d.value)) 155 .attr("r", 4) 156 .attr("fill", config.colors[0]) 157 .append("title") 158 .text(d => \`\${d.date}: \${d.value}\`); 159 160 // Axes 161 svg.append("g") 162 .attr("transform", \`translate(0,\${height - margin.bottom})\`) 163 .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%b %d"))); 164 165 svg.append("g") 166 .attr("transform", \`translate(\${margin.left},0)\`) 167 .call(d3.axisLeft(y)); 168 169 return svg.node().outerHTML; 170} 171 172// Network graph from JSON 173createNetworkGraph(jsonData) { 174 const { nodes, links, config } = jsonData; 175 const { width, height } = config; 176 177 const svg = d3.create("svg") 178 .attr("width", width) 179 .attr("height", height); 180 181 // Force simulation 182 const simulation = d3.forceSimulation(nodes) 183 .force("link", d3.forceLink(links).id(d => d.id).distance(50)) 184 .force("charge", d3.forceManyBody().strength(-300)) 185 .force("center", d3.forceCenter(width / 2, height / 2)); 186 187 // Links 188 const link = svg.append("g") 189 .selectAll("line") 190 .data(links) 191 .join("line") 192 .attr("stroke", "#999") 193 .attr("stroke-opacity", 0.6) 194 .attr("stroke-width", d => Math.sqrt(d.value)); 195 196 // Nodes 197 const node = svg.append("g") 198 .selectAll("circle") 199 .data(nodes) 200 .join("circle") 201 .attr("r", d => d.size || 5) 202 .attr("fill", d => d.color || config.colors[d.group % config.colors.length]); 203 204 // Labels 205 const label = svg.append("g") 206 .selectAll("text") 207 .data(nodes) 208 .join("text") 209 .text(d => d.label || d.id) 210 .attr("font-size", 12) 211 .attr("dx", 12) 212 .attr("dy", 4); 213 214 // Update positions 215 simulation.on("tick", () => { 216 link 217 .attr("x1", d => d.source.x) 218 .attr("y1", d => d.source.y) 219 .attr("x2", d => d.target.x) 220 .attr("y2", d => d.target.y); 221 222 node 223 .attr("cx", d => d.x) 224 .attr("cy", d => d.y); 225 226 label 227 .attr("x", d => d.x) 228 .attr("y", d => d.y); 229 }); 230 231 // Run simulation 232 for (let i = 0; i < 300; ++i) simulation.tick(); 233 234 return svg.node().outerHTML; 235} 236}`}),"\n",(0,r.jsx)(t.h3,{children:"React Component"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`import { useEffect, useRef, useState } from 'react'; 237import * as d3 from 'd3'; 238 239export function JSONToSVGChart({ data, type = 'bar', interactive = true }) { 240const svgRef = useRef(null); 241const [svgString, setSvgString] = useState(''); 242 243useEffect(() => { 244 if (!data) return; 245 246 const svg = d3.select(svgRef.current); 247 svg.selectAll("*").remove(); 248 249 const width = 800; 250 const height = 400; 251 const margin = { top: 20, right: 30, bottom: 40, left: 50 }; 252 253 // Different chart types 254 switch (type) { 255 case 'bar': 256 renderBarChart(svg, data, { width, height, margin }); 257 break; 258 case 'line': 259 renderLineChart(svg, data, { width, height, margin }); 260 break; 261 case 'scatter': 262 renderScatterPlot(svg, data, { width, height, margin }); 263 break; 264 case 'pie': 265 renderPieChart(svg, data, { width, height }); 266 break; 267 case 'tree': 268 renderTreemap(svg, data, { width, height }); 269 break; 270 default: 271 console.error('Unsupported chart type'); 272 } 273 274 // Extract SVG string 275 setSvgString(svg.node().outerHTML); 276 277}, [data, type]); 278 279const downloadSVG = () => { 280 const blob = new Blob([svgString], { type: 'image/svg+xml' }); 281 const url = URL.createObjectURL(blob); 282 const link = document.createElement('a'); 283 link.href = url;
284 link.download = \`chart-\${Date.now()}.svg\`; 285 link.click(); 286}; 287 288return ( 289 <div> 290 <svg ref={svgRef} /> 291 {interactive && ( 292 <div className="mt-4 flex gap-2"> 293 <button onClick={downloadSVG}>Download SVG</button> 294 <button onClick={() => navigator.clipboard.writeText(svgString)}> 295 Copy SVG 296 </button> 297 </div> 298 )} 299 </div> 300); 301}`}),"\n",(0,r.jsx)(t.h3,{children:"Chart Type Examples"}),"\n",(0,r.jsxs)(d.Tabs,{defaultValue:"bar",className:"my-8",children:[(0,r.jsxs)(d.TabsList,{children:[(0,r.jsx)(d.TabsTrigger,{value:"bar",children:"Bar Chart"}),(0,r.jsx)(d.TabsTrigger,{value:"line",children:"Line Chart"}),(0,r.jsx)(d.TabsTrigger,{value:"pie",children:"Pie Chart"}),(0,r.jsx)(d.TabsTrigger,{value:"network",children:"Network Graph"})]}),(0,r.jsx)(d.TabsContent,{value:"bar",children:(0,r.jsxs)(i.Zp,{className:"p-4",children:[(0,r.jsx)("h4",{className:"font-bold mb-3",children:"Bar Chart JSON Structure"}),(0,r.jsx)("pre",{className:"bg-gray-100 p-3 rounded text-sm overflow-x-auto",children:`{ 302"type": "bar", 303"data": [ 304 {"label": "Q1", "value": 45000}, 305 {"label": "Q2", "value": 52000}, 306 {"label": "Q3", "value": 48000}, 307 {"label": "Q4", "value": 61000} 308], 309"config": { 310 "title": "Quarterly Revenue", 311 "xAxis": "Quarter", 312 "yAxis": "Revenue ($)", 313 "color": "#3b82f6" 314} 315}`})]})}),(0,r.jsx)(d.TabsContent,{value:"line",children:(0,r.jsxs)(i.Zp,{className:"p-4",children:[(0,r.jsx)("h4",{className:"font-bold mb-3",children:"Time Series JSON Structure"}),(0,r.jsx)("pre",{className:"bg-gray-100 p-3 rounded text-sm overflow-x-auto",children:`{ 316"type": "line", 317"data": [ 318 {"date": "2025-01-01", "value": 100, "category": "A"}, 319 {"date": "2025-01-02", "value": 110, "category": "A"}, 320 {"date": "2025-01-01", "value": 95, "category": "B"}, 321 {"date": "2025-01-02", "value": 105, "category": "B"} 322], 323"config": { 324 "multiLine": true, 325 "interpolation": "monotone", 326 "showDots": true, 327 "enableZoom": true 328} 329}`})]})}),(0,r.jsx)(d.TabsContent,{value:"pie",children:(0,r.jsxs)(i.Zp,{className:"p-4",children:[(0,r.jsx)("h4",{className:"font-bold mb-3",children:"Pie Chart JSON Structure"}),(0,r.jsx)("pre",{className:"bg-gray-100 p-3 rounded text-sm overflow-x-auto",children:`{ 330"type": "pie", 331"data": [ 332 {"category": "Desktop", "value": 45}, 333 {"category": "Mobile", "value": 35}, 334 {"category": "Tablet", "value": 20} 335], 336"config": { 337 "donut": true, 338 "innerRadius": 0.6, 339 "showLabels": true, 340 "showPercentages": true 341} 342}`})]})}),(0,r.jsx)(d.TabsContent,{value:"network",children:(0,r.jsxs)(i.Zp,{className:"p-4",children:[(0,r.jsx)("h4",{className:"font-bold mb-3",children:"Network Graph JSON Structure"}),(0,r.jsx)("pre",{className:"bg-gray-100 p-3 rounded text-sm overflow-x-auto",children:`{ 343"type": "network", 344"nodes": [ 345 {"id": "A", "label": "Node A", "group": 1}, 346 {"id": "B", "label": "Node B", "group": 1}, 347 {"id": "C", "label": "Node C", "group": 2} 348], 349"links": [ 350 {"source": "A", "target": "B", "value": 10}, 351 {"source": "B", "target": "C", "value": 5} 352], 353"config": { 354 "forceStrength": -300, 355 "linkDistance": 50, 356 "nodeSize": "dynamic" 357} 358}`})]})})]}),"\n",(0,r.jsx)(t.h2,{children:"Advanced Visualizations"}),"\n",(0,r.jsx)(t.h3,{children:"Hierarchical Data (Treemap)"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// Convert hierarchical JSON to treemap SVG 359function createTreemap(jsonData) { 360const { data, width = 800, height = 600 } = jsonData; 361 362// Create hierarchy from JSON 363const root = d3.hierarchy(data) 364 .sum(d => d.value) 365 .sort((a, b) => b.value - a.value); 366 367// Create treemap layout 368d3.treemap() 369 .size([width, height]) 370 .padding(2) 371 .round(true)(root); 372 373const svg = d3.create("svg") 374 .attr("viewBox", [0, 0, width, height]) 375 .style("font", "10px sans-serif"); 376 377// Color scale 378const color = d3.scaleOrdinal(d3.schemeCategory10); 379 380// Create cells 381const cell = svg.selectAll("g") 382 .data(root.leaves()) 383 .join("g") 384 .attr("transform", d => \`translate(\${d.x0},\${d.y0})\`); 385 386cell.append("rect") 387 .attr("width", d => d.x1 - d.x0) 388 .attr("height", d => d.y1 - d.y0) 389 .attr("fill", d => color(d.parent.data.name)) 390 .attr("stroke", "white"); 391 392cell.append("text") 393 .attr("x", 4) 394 .attr("y", 14) 395 .text(d => d.data.name); 396 397cell.append("title") 398 .text(d => \`\${d.ancestors().reverse().map(d => d.data.name).join("/")} 399\${d.value}\`); 400 401return svg.node(); 402}`}),"\n",(0,r.jsx)(t.h3,{children:"Geospatial Data (Choropleth Map)"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// Convert GeoJSON to SVG map 403async function createChoroplethMap(geoJsonData, valueData) { 404const width = 960; 405const height = 600; 406 407// Create projection 408const projection = d3.geoAlbersUsa() 409 .scale(1200) 410 .translate([width / 2, height / 2]); 411 412const path = d3.geoPath().projection(projection); 413 414// Color scale based on data values 415const colorScale = d3.scaleSequential(d3.interpolateBlues) 416 .domain([0, d3.max(valueData, d => d.value)]); 417 418const svg = d3.create("svg") 419 .attr("width", width) 420 .attr("height", height); 421 422// Draw map 423svg.append("g") 424 .selectAll("path") 425 .data(geoJsonData.features) 426 .join("path") 427 .attr("d", path) 428 .attr("fill", d => { 429 const value = valueData.find(v => v.id === d.properties.id); 430 return value ? colorScale(value.value) : "#ccc"; 431 }) 432 .attr("stroke", "white") 433 .attr("stroke-width", 0.5) 434 .append("title") 435 .text(d => { 436 const value = valueData.find(v => v.id === d.properties.id); 437 return \`\${d.properties.name}: \${value ? value.value : "No data"}\`; 438 }); 439 440return svg.node(); 441}`}),"\n",(0,r.jsx)(t.h2,{children:"Real-Time Data Updates"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// WebSocket connection for real-time data 442class RealTimeJSONToSVG { 443constructor(containerId) { 444 this.container = d3.select(\`#\${containerId}\`); 445 this.data = []; 446 this.maxDataPoints = 50; 447} 448 449connect(wsUrl) { 450 this.ws = new WebSocket(wsUrl); 451 452 this.ws.onmessage = (event) => { 453 const newData = JSON.parse(event.data); 454 this.updateVisualization(newData); 455 }; 456} 457 458updateVisualization(newData) { 459 // Add new data point 460 this.data.push(newData); 461 462 // Keep only recent data 463 if (this.data.length > this.maxDataPoints) { 464 this.data.shift(); 465 } 466 467 // Update SVG with transition 468 const svg = this.container.select("svg"); 469 470 // Update scales 471 const x = d3.scaleLinear() 472 .domain([0, this.maxDataPoints]) 473 .range([0, 800]); 474 475 const y = d3.scaleLinear() 476 .domain([0, d3.max(this.data, d => d.value)]) 477 .range([400, 0]); 478 479 // Update line 480 const line = d3.line() 481 .x((d, i) => x(i)) 482 .y(d => y(d.value)) 483 .curve(d3.curveMonotoneX); 484 485 svg.select(".line") 486 .datum(this.data) 487 .transition() 488 .duration(500) 489 .attr("d", line); 490 491 // Update axis 492 svg.select(".y-axis") 493 .transition() 494 .duration(500) 495 .call(d3.axisLeft(y)); 496} 497}`}),"\n",(0,r.jsx)(t.h2,{children:"API Integration"}),"\n",(0,r.jsx)(t.h3,{children:"REST API"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// API endpoint for JSON to SVG conversion 498app.post('/api/convert/json-to-svg', async (req, res) => { 499const { jsonData, chartType, options } = req.body; 500 501try { 502 let svg; 503
504 switch (chartType) { 505 case 'bar': 506 svg = generateBarChart(jsonData, options); 507 break; 508 case 'line': 509 svg = generateLineChart(jsonData, options); 510 break; 511 case 'scatter': 512 svg = generateScatterPlot(jsonData, options); 513 break; 514 case 'heatmap': 515 svg = generateHeatmap(jsonData, options); 516 break; 517 case 'sankey': 518 svg = generateSankeyDiagram(jsonData, options); 519 break; 520 default: 521 throw new Error(\`Unsupported chart type: \${chartType}\`);} 522 } 523 524 res.json({ 525 success: true, 526 svg, 527 metadata: { 528 elements: countSVGElements(svg), 529 fileSize: Buffer.byteLength(svg, 'utf8'), 530 dimensions: extractDimensions(svg) 531 } 532 }); 533} catch (error) { 534 res.status(400).json({ 535 success: false, 536 error: error.message 537 }); 538} 539});`}),"\n",(0,r.jsx)(t.h3,{children:"GraphQL Schema"}),"\n",(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`type Query { 540convertJSONToSVG(input: JSONToSVGInput!): SVGOutput! 541} 542 543input JSONToSVGInput { 544data: JSON! 545chartType: ChartType! 546config: ChartConfig 547} 548 549enum ChartType { 550BAR 551LINE 552PIE 553SCATTER 554HEATMAP 555TREEMAP 556NETWORK 557SANKEY 558} 559 560type ChartConfig { 561width: Int 562height: Int 563colors: [String] 564interactive: Boolean 565animated: Boolean 566} 567 568type SVGOutput { 569svg: String! 570downloadUrl: String 571interactiveUrl: String 572metadata: SVGMetadata 573}`}),"\n",(0,r.jsx)(t.h2,{children:"Performance Optimization"}),"\n",(0,r.jsxs)(i.Zp,{className:"p-6 my-8",children:[(0,r.jsx)("h3",{className:"text-lg font-bold mb-4",children:"â¡ Performance Best Practices"}),(0,r.jsxs)("div",{className:"space-y-3",children:[(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)("span",{className:"text-green-500",children:"â"}),(0,r.jsx)("div",{children:(0,r.jsxs)(t.p,{children:[(0,r.jsx)("strong",{children:"Virtual DOM:"})," Use React/Vue for efficient updates"]})})]}),(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)("span",{className:"text-green-500",children:"â"}),(0,r.jsx)("div",{children:(0,r.jsxs)(t.p,{children:[(0,r.jsx)("strong",{children:"Data Sampling:"})," Limit points for large datasets (> 1000 points)"]})})]}),(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)("span",{className:"text-green-500",children:"â"}),(0,r.jsx)("div",{children:(0,r.jsxs)(t.p,{children:[(0,r.jsx)("strong",{children:"Progressive Rendering:"})," Load visible elements first"]})})]}),(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)("span",{className:"text-green-500",children:"â"}),(0,r.jsx)("div",{children:(0,r.jsxs)(t.p,{children:[(0,r.jsx)("strong",{children:"Canvas Fallback:"})," Use Canvas for > 10,000 elements"]})})]}),(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)("span",{className:"text-green-500",children:"â"}),(0,r.jsx)("div",{children:(0,r.jsxs)(t.p,{children:[(0,r.jsx)("strong",{children:"Web Workers:"})," Process large JSON in background thread"]})})]})]})]}),"\n",(0,r.jsx)(t.h2,{children:"Common Patterns & Templates"}),"\n",(0,r.jsxs)(d.Tabs,{defaultValue:"dashboard",className:"my-8",children:[(0,r.jsxs)(d.TabsList,{children:[(0,r.jsx)(d.TabsTrigger,{value:"dashboard",children:"Dashboard"}),(0,r.jsx)(d.TabsTrigger,{value:"report",children:"Report"}),(0,r.jsx)(d.TabsTrigger,{value:"infographic",children:"Infographic"})]}),(0,r.jsx)(d.TabsContent,{value:"dashboard",children:(0,r.jsxs)(i.Zp,{className:"p-4",children:[(0,r.jsx)("h4",{className:"font-bold mb-3",children:"Real-Time Dashboard Template"}),(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded text-sm overflow-x-auto",children:`// Dashboard configuration JSON 574{ 575"layout": "grid", 576"refreshInterval": 5000, 577"charts": [ 578 { 579 "id": "revenue", 580 "type": "line", 581 "position": {"x": 0, "y": 0, "w": 6, "h": 4}, 582 "dataSource": "/api/revenue", 583 "realtime": true 584 }, 585 { 586 "id": "users", 587 "type": "bar", 588 "position": {"x": 6, "y": 0, "w": 6, "h": 4}, 589 "dataSource": "/api/users" 590 }, 591 { 592 "id": "performance", 593 "type": "gauge",
594 "position": {"x": 0, "y": 4, "w": 3, "h": 3}, 595 "dataSource": "/api/performance" 596 } 597] 598}`})]})}),(0,r.jsx)(d.TabsContent,{value:"report",children:(0,r.jsxs)(i.Zp,{className:"p-4",children:[(0,r.jsx)("h4",{className:"font-bold mb-3",children:"Automated Report Generation"}),(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded text-sm overflow-x-auto",children:`// Generate PDF report with embedded SVG charts 599async function generateReport(data) { 600const charts = []; 601 602// Sales trend 603charts.push({ 604 title: "Monthly Sales Trend", 605 svg: createLineChart(data.sales), 606 position: { page: 1, x: 50, y: 100 } 607}); 608 609// Category breakdown 610charts.push({ 611 title: "Sales by Category", 612 svg: createPieChart(data.categories), 613 position: { page: 1, x: 50, y: 400 } 614}); 615 616// Regional heatmap 617charts.push({ 618 title: "Regional Performance", 619 svg: createHeatmap(data.regions), 620 position: { page: 2, x: 50, y: 100 } 621}); 622 623return generatePDF(charts); 624}`})]})}),(0,r.jsx)(d.TabsContent,{value:"infographic",children:(0,r.jsxs)(i.Zp,{className:"p-4",children:[(0,r.jsx)("h4",{className:"font-bold mb-3",children:"Infographic Builder"}),(0,r.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded text-sm overflow-x-auto",children:`// Infographic composition from JSON 625{ 626"title": "2025 Tech Trends", 627"elements": [ 628 { 629 "type": "text", 630 "content": "AI Adoption Rate", 631 "style": {"fontSize": 24, "fontWeight": "bold"} 632 }, 633 { 634 "type": "progress", 635 "value": 78, 636 "max": 100, 637 "label": "78% of companies" 638 }, 639 { 640 "type": "icons", 641 "data": [ 642 {"icon": "robot", "count": 78}, 643 {"icon": "user", "count": 22} 644 ] 645 }, 646 { 647 "type": "comparison", 648 "before": {"label": "2024", "value": 45}, 649 "after": {"label": "2025", "value": 78} 650 } 651] 652}`})]})})]}),"\n",(0,r.jsx)(t.h2,{children:"Conclusion"}),"\n",(0,r.jsx)(t.p,{children:"JSON to SVG conversion enables powerful data visualization capabilities, transforming raw data into interactive, scalable graphics. Whether you're building dashboards, generating reports, or creating data-driven narratives, our converter provides the flexibility and performance needed for modern data visualization."}),"\n",(0,r.jsx)(t.p,{children:"Powered by D3.js and optimized for real-time updates, our JSON to SVG converter bridges the gap between data APIs and beautiful visualizations."}),"\n",(0,r.jsxs)(i.Zp,{className:"p-6 my-8 bg-gradient-to-r from-blue-500 to-cyan-500 text-white",children:[(0,r.jsx)("h3",{className:"text-xl font-bold mb-4",children:"\uD83D\uDCCA Visualize Your Data"}),(0,r.jsx)("p",{className:"mb-4",children:"Transform JSON data into stunning SVG visualizations instantly."}),(0,r.jsxs)("div",{className:"flex gap-4",children:[(0,r.jsx)("button",{className:"px-6 py-2 bg-white text-blue-600 rounded-lg hover:bg-gray-100",children:(0,r.jsx)(t.p,{children:"Try Live Demo"})}),(0,r.jsx)("button",{className:"px-6 py-2 border-2 border-white rounded-lg hover:bg-white/10",children:(0,r.jsx)(t.p,{children:"View Gallery"})})]})]})]})}function x(e={}){let{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},54213:(e,t,a)=>{a.d(t,{A:()=>r});let r=(0,a(19946).A)("Database",[["ellipse",{cx:"12",cy:"5",rx:"9",ry:"3",key:"msslwz"}],["path",{d:"M3 5V19A9 3 0 0 0 21 19V5",key:"1wlel7"}],["path",{d:"M3 12A9 3 0 0 0 21 12",key:"mv7ke4"}]])}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.