xability · jooyoungseo · Feb 24, 2026 · Feb 25, 2026 · Feb 25, 2026
diff --git a/examples/d3-bindbar.html b/examples/d3-bindbar.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>MAIDR + D3.js Bar Chart Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script type="text/javascript" src="../dist/maidr.js"></script>
+    <script type="text/javascript" src="../dist/d3.js"></script>
+  </head>
+  <body>
+    <h1>MAIDR + D3.js Bar Chart</h1>
+    <p>Click on the chart and use arrow keys to navigate. Press 'b' for braille, 't' for text descriptions.</p>
+    <div id="chart"></div>
+
+    <script>
+      // Sample data
+      const data = [
+        { day: 'Mon', count: 45 },
+        { day: 'Tue', count: 72 },
+        { day: 'Wed', count: 89 },
+        { day: 'Thu', count: 64 },
+        { day: 'Fri', count: 53 },
+        { day: 'Sat', count: 95 },
+        { day: 'Sun', count: 38 },
+      ];
+
+      // Chart dimensions
+      const margin = { top: 40, right: 20, bottom: 50, left: 60 };
+      const width = 600 - margin.left - margin.right;
+      const height = 400 - margin.top - margin.bottom;
+
+      // Create SVG
+      const svg = d3.select('#chart')
+        .append('svg')
+        .attr('id', 'd3-bar-chart')
+        .attr('width', width + margin.left + margin.right)
+        .attr('height', height + margin.top + margin.bottom)
+        .append('g')
+        .attr('transform', `translate(${margin.left},${margin.top})`);
+
+      // Scales
+      const x = d3.scaleBand()
+        .domain(data.map(d => d.day))
+        .range([0, width])
+        .padding(0.2);
+
+      const y = d3.scaleLinear()
+        .domain([0, d3.max(data, d => d.count)])
+        .nice()
+        .range([height, 0]);
+
+      // Bars
+      svg.selectAll('rect.bar')
+        .data(data)
+        .join('rect')
+        .attr('class', 'bar')
+        .attr('x', d => x(d.day))
+        .attr('y', d => y(d.count))
+        .attr('width', x.bandwidth())
+        .attr('height', d => height - y(d.count))
+        .attr('fill', '#4682b4');
+
+      // Axes
+      svg.append('g')
+        .attr('transform', `translate(0,${height})`)
+        .call(d3.axisBottom(x));
+
+      svg.append('g')
+        .call(d3.axisLeft(y));
+
+      // Title
+      svg.append('text')
+        .attr('x', width / 2)
+        .attr('y', -10)
+        .attr('text-anchor', 'middle')
+        .style('font-size', '16px')
+        .text('Daily Activity Count');
+
+      // Axis labels
+      svg.append('text')
+        .attr('x', width / 2)
+        .attr('y', height + 40)
+        .attr('text-anchor', 'middle')
+        .text('Day of Week');
+
+      svg.append('text')
+        .attr('transform', 'rotate(-90)')
+        .attr('x', -height / 2)
+        .attr('y', -45)
+        .attr('text-anchor', 'middle')
+        .text('Count');
+
+      // === MAIDR Integration ===
+      // Use the D3 binder to generate MAIDR data from the D3 chart
+      const svgElement = document.getElementById('d3-bar-chart');
+      const result = maidrD3.bindD3Bar(svgElement, {
+        selector: 'rect.bar',
+        title: 'Daily Activity Count',
+        axes: { x: 'Day of Week', y: 'Count' },
+        x: 'day',
+        y: 'count',
+      });
+
+      // Apply MAIDR data to the SVG element
+      svgElement.setAttribute('maidr-data', JSON.stringify(result.maidr));
+    </script>
+  </body>
+</html>
diff --git a/examples/d3-bindbox.html b/examples/d3-bindbox.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>MAIDR + D3.js Box Plot Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script type="text/javascript" src="../dist/maidr.js"></script>
+    <script type="text/javascript" src="../dist/d3.js"></script>
+  </head>
+  <body>
+    <h1>MAIDR + D3.js Box Plot</h1>
+    <p>Click on the chart and use arrow keys to navigate between boxes.</p>
+    <div id="chart"></div>
+
+    <script>
+      const data = [
+        { fill: 'Group A', min: 15, q1: 25, q2: 35, q3: 45, max: 55, lowerOutliers: [5, 8], upperOutliers: [62, 70] },
+        { fill: 'Group B', min: 20, q1: 30, q2: 42, q3: 52, max: 65, lowerOutliers: [12], upperOutliers: [72] },
+        { fill: 'Group C', min: 10, q1: 22, q2: 30, q3: 40, max: 50, lowerOutliers: [], upperOutliers: [58] },
+      ];
+
+      const margin = { top: 40, right: 20, bottom: 50, left: 60 };
+      const width = 500 - margin.left - margin.right;
+      const height = 400 - margin.top - margin.bottom;
+
+      const svg = d3.select('#chart')
+        .append('svg')
+        .attr('id', 'd3-box-chart')
+        .attr('width', width + margin.left + margin.right)
+        .attr('height', height + margin.top + margin.bottom)
+        .append('g')
+        .attr('transform', `translate(${margin.left},${margin.top})`);
+
+      const x = d3.scaleBand().domain(data.map(d => d.fill)).range([0, width]).padding(0.3);
+      const y = d3.scaleLinear().domain([0, 80]).range([height, 0]);
+
+      // Draw box groups
+      const groups = svg.selectAll('g.box')
+        .data(data)
+        .join('g')
+        .attr('class', 'box')
+        .attr('transform', d => `translate(${x(d.fill)}, 0)`);
+
+      // IQR box
+      groups.append('rect')
+        .attr('y', d => y(d.q3))
+        .attr('width', x.bandwidth())
+        .attr('height', d => y(d.q1) - y(d.q3))
+        .attr('fill', '#87ceeb')
+        .attr('stroke', '#333');
+
+      // Median
+      groups.append('line')
+        .attr('x1', 0).attr('x2', x.bandwidth())
+        .attr('y1', d => y(d.q2)).attr('y2', d => y(d.q2))
+        .attr('stroke', '#333').attr('stroke-width', 2);
+
+      // Whiskers
+      groups.append('line')
+        .attr('x1', x.bandwidth() / 2).attr('x2', x.bandwidth() / 2)
+        .attr('y1', d => y(d.min)).attr('y2', d => y(d.q1))
+        .attr('stroke', '#333');
+
+      groups.append('line')
+        .attr('x1', x.bandwidth() / 2).attr('x2', x.bandwidth() / 2)
+        .attr('y1', d => y(d.q3)).attr('y2', d => y(d.max))
+        .attr('stroke', '#333');
+
+      svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(x));
+      svg.append('g').call(d3.axisLeft(y));
+      svg.append('text').attr('x', width / 2).attr('y', -10).attr('text-anchor', 'middle').text('Distribution by Group');
+
+      // === MAIDR Integration ===
+      const svgElement = document.getElementById('d3-box-chart');
+      const result = maidrD3.bindD3Box(svgElement, {
+        selector: 'g.box',
+        title: 'Distribution by Group',
+        axes: { x: 'Group', y: 'Value' },
+      });
+      svgElement.setAttribute('maidr-data', JSON.stringify(result.maidr));
+    </script>
+  </body>
+</html>
diff --git a/examples/d3-bindcandlestick.html b/examples/d3-bindcandlestick.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>MAIDR + D3.js Candlestick Chart Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script type="text/javascript" src="../dist/maidr.js"></script>
+    <script type="text/javascript" src="../dist/d3.js"></script>
+  </head>
+  <body>
+    <h1>MAIDR + D3.js Candlestick Chart</h1>
+    <p>Click on the chart and use arrow keys to navigate between trading days.</p>
+    <div id="chart"></div>
+
+    <script>
+      const data = [
+        { date: 'Mon', open: 100, high: 110, low: 95, close: 105, volume: 1200 },
+        { date: 'Tue', open: 105, high: 115, low: 100, close: 112, volume: 1500 },
+        { date: 'Wed', open: 112, high: 118, low: 108, close: 109, volume: 1100 },
+        { date: 'Thu', open: 109, high: 114, low: 104, close: 113, volume: 1400 },
+        { date: 'Fri', open: 113, high: 120, low: 110, close: 118, volume: 1800 },
+      ];
+
+      const margin = { top: 40, right: 20, bottom: 50, left: 60 };
+      const width = 500 - margin.left - margin.right;
+      const height = 350 - margin.top - margin.bottom;
+
+      const svg = d3.select('#chart')
+        .append('svg')
+        .attr('id', 'd3-candlestick-chart')
+        .attr('width', width + margin.left + margin.right)
+        .attr('height', height + margin.top + margin.bottom)
+        .append('g')
+        .attr('transform', `translate(${margin.left},${margin.top})`);
+
+      const x = d3.scaleBand().domain(data.map(d => d.date)).range([0, width]).padding(0.3);
+      const y = d3.scaleLinear().domain([90, 125]).range([height, 0]);
+
+      // Wicks
+      svg.selectAll('line.wick')
+        .data(data)
+        .join('line')
+        .attr('class', 'wick')
+        .attr('x1', d => x(d.date) + x.bandwidth() / 2)
+        .attr('x2', d => x(d.date) + x.bandwidth() / 2)
+        .attr('y1', d => y(d.high))
+        .attr('y2', d => y(d.low))
+        .attr('stroke', '#333');
+
+      // Bodies
+      svg.selectAll('rect.candle')
+        .data(data)
+        .join('rect')
+        .attr('class', 'candle')
+        .attr('x', d => x(d.date))
+        .attr('y', d => y(Math.max(d.open, d.close)))
+        .attr('width', x.bandwidth())
+        .attr('height', d => Math.abs(y(d.open) - y(d.close)) || 1)
+        .attr('fill', d => d.close >= d.open ? '#4caf50' : '#f44336');
+
+      svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(x));
+      svg.append('g').call(d3.axisLeft(y));
+      svg.append('text').attr('x', width / 2).attr('y', -10).attr('text-anchor', 'middle').text('Weekly Stock Price');
+
+      // === MAIDR Integration ===
+      const svgElement = document.getElementById('d3-candlestick-chart');
+      const result = maidrD3.bindD3Candlestick(svgElement, {
+        selector: 'rect.candle',
+        title: 'Weekly Stock Price',
+        axes: { x: 'Day', y: 'Price ($)' },
+        value: 'date',
+        open: 'open',
+        high: 'high',
+        low: 'low',
+        close: 'close',
+        volume: 'volume',
+      });
+      svgElement.setAttribute('maidr-data', JSON.stringify(result.maidr));
+    </script>
+  </body>
+</html>
diff --git a/examples/d3-binddodged.html b/examples/d3-binddodged.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>MAIDR + D3.js Dodged Bar Chart Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script type="text/javascript" src="../dist/maidr.js"></script>
+    <script type="text/javascript" src="../dist/d3.js"></script>
+  </head>
+  <body>
+    <h1>MAIDR + D3.js Dodged (Grouped) Bar Chart</h1>
+    <p>Click on the chart and use arrow keys to navigate bars.</p>
+    <div id="chart"></div>
+
+    <script>
+      const data = [
+        { subject: 'Math', grade: 'A', count: 30 },
+        { subject: 'Math', grade: 'B', count: 45 },
+        { subject: 'Math', grade: 'C', count: 20 },
+        { subject: 'Science', grade: 'A', count: 35 },
+        { subject: 'Science', grade: 'B', count: 40 },
+        { subject: 'Science', grade: 'C', count: 25 },
+        { subject: 'English', grade: 'A', count: 40 },
+        { subject: 'English', grade: 'B', count: 35 },
+        { subject: 'English', grade: 'C', count: 15 },
+      ];
+
+      const subjects = ['Math', 'Science', 'English'];
+      const grades = ['A', 'B', 'C'];
+      const colors = { A: '#4CAF50', B: '#2196F3', C: '#FF9800' };
+
+      const margin = { top: 40, right: 100, bottom: 50, left: 60 };
+      const width = 600 - margin.left - margin.right;
+      const height = 400 - margin.top - margin.bottom;
+
+      const svg = d3.select('#chart')
+        .append('svg')
+        .attr('id', 'd3-dodged-chart')
+        .attr('width', width + margin.left + margin.right)
+        .attr('height', height + margin.top + margin.bottom)
+        .append('g')
+        .attr('transform', `translate(${margin.left},${margin.top})`);
+
+      const x0 = d3.scaleBand().domain(subjects).range([0, width]).padding(0.2);
+      const x1 = d3.scaleBand().domain(grades).range([0, x0.bandwidth()]).padding(0.05);
+      const y = d3.scaleLinear().domain([0, 50]).range([height, 0]);
+
+      svg.selectAll('rect.bar')
+        .data(data.map(d => ({ x: d.subject, y: d.count, fill: d.grade })))
+        .join('rect')
+        .attr('class', 'bar')
+        .attr('x', d => x0(d.x) + x1(d.fill))
+        .attr('y', d => y(d.y))
+        .attr('width', x1.bandwidth())
+        .attr('height', d => height - y(d.y))
+        .attr('fill', d => colors[d.fill]);
+
+      svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(x0));
+      svg.append('g').call(d3.axisLeft(y));
+      svg.append('text').attr('x', width / 2).attr('y', -10).attr('text-anchor', 'middle').text('Student Grades by Subject');
+
+      // === MAIDR Integration ===
+      const svgElement = document.getElementById('d3-dodged-chart');
+      const result = maidrD3.bindD3Segmented(svgElement, {
+        selector: 'rect.bar',
+        type: 'dodged_bar',
+        title: 'Student Grades by Subject',
+        axes: { x: 'Subject', y: 'Count', fill: 'Grade' },
+        x: 'x',
+        y: 'y',
+        fill: 'fill',
+      });
+      svgElement.setAttribute('maidr-data', JSON.stringify(result.maidr));
+    </script>
+  </body>
+</html>