datly 0.0.1 → 0.0.2

package/src/dataviz/index.js

@@ -0,0 +1,1566 @@
+// d3-selection
+import { select, selectAll } from "d3-selection";
+import {
+  scaleLinear,
+  scaleBand,
+  scalePoint,
+  scaleOrdinal,
+  scaleSequential,
+} from "d3-scale";
+import {
+  extent,
+  max,
+  min,
+  sum,
+  range,
+  mean,
+  deviation,
+  histogram,
+  quantile,
+} from "d3-array";
+import { axisBottom, axisLeft } from "d3-axis";
+import {
+  schemeCategory10,
+  interpolateRdYlBu,
+  interpolateViridis,
+} from "d3-scale-chromatic";
+import { line, area, curveBasis, pie, arc } from "d3-shape";
+
+const d3 = {
+  select,
+  selectAll,
+  scaleLinear,
+  scaleBand,
+  scalePoint,
+  scaleOrdinal,
+  scaleSequential,
+  extent,
+  max,
+  min,
+  sum,
+  deviation,
+  mean,
+  quantile,
+  histogram,
+  range,
+  axisBottom,
+  axisLeft,
+  line,
+  area,
+  curveBasis,
+  pie,
+  arc,
+  schemeCategory10,
+  interpolateViridis,
+  interpolateRdYlBu,
+};
+
+class DataViz {
+  constructor(containerId = "dataviz-container") {
+    this.containerId = containerId;
+    this.defaultWidth = 800;
+    this.defaultHeight = 600;
+    this.defaultMargin = { top: 40, right: 40, bottom: 60, left: 60 };
+    this.colors = d3.schemeCategory10;
+  }
+
+  /**
+   * Cria ou atualiza um container para visualização
+   * @param {string} containerId - ID do elemento container
+   * @param {number} width - Largura do SVG
+   * @param {number} height - Altura do SVG
+   */
+  createContainer(
+    containerId,
+    width = this.defaultWidth,
+    height = this.defaultHeight
+  ) {
+    const targetId = containerId || this.containerId;
+    let container = d3.select(`#${targetId}`);
+
+    if (container.empty()) {
+      container = d3
+        .select("body")
+        .append("div")
+        .attr("id", targetId)
+        .style("margin", "20px");
+    }
+
+    container.selectAll("*").remove();
+
+    const svg = container
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .style("background", "#fff")
+      .style("border", "1px solid #ddd")
+      .style("border-radius", "8px");
+
+    return { container, svg };
+  }
+
+  // ============================================
+  // HISTOGRAMA
+  // ============================================
+  histogram(data, options = {}) {
+    const {
+      title = "Histogram",
+      xlabel = "Value",
+      ylabel = "Frequency",
+      bins = 30,
+      color = "#4299e1",
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const x = d3.scaleLinear().domain(d3.extent(data)).range([0, innerWidth]);
+
+    const histogram = d3
+      .histogram()
+      .domain(x.domain())
+      .thresholds(x.ticks(bins));
+
+    const histData = histogram(data);
+
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(histData, (d) => d.length)])
+      .range([innerHeight, 0]);
+
+    g.selectAll("rect")
+      .data(histData)
+      .join("rect")
+      .attr("x", (d) => x(d.x0) + 1)
+      .attr("width", (d) => Math.max(0, x(d.x1) - x(d.x0) - 2))
+      .attr("y", (d) => y(d.length))
+      .attr("height", (d) => innerHeight - y(d.length))
+      .attr("fill", color)
+      .attr("opacity", 0.8)
+      .on("mouseover", function () {
+        d3.select(this).attr("opacity", 1);
+      })
+      .on("mouseout", function () {
+        d3.select(this).attr("opacity", 0.8);
+      });
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // BOX PLOT
+  // ============================================
+  boxplot(data, options = {}) {
+    const {
+      title = "Box Plot",
+      xlabel = "Category",
+      ylabel = "Value",
+      labels = null,
+      color = "#4299e1",
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const datasets = Array.isArray(data[0]) ? data : [data];
+    const categoryLabels = labels || datasets.map((_, i) => `Group ${i + 1}`);
+
+    const boxData = datasets.map((dataset, i) => {
+      const sorted = [...dataset].sort((a, b) => a - b);
+      const q1 = d3.quantile(sorted, 0.25);
+      const median = d3.quantile(sorted, 0.5);
+      const q3 = d3.quantile(sorted, 0.75);
+      const iqr = q3 - q1;
+      const min = Math.max(d3.min(sorted), q1 - 1.5 * iqr);
+      const max = Math.min(d3.max(sorted), q3 + 1.5 * iqr);
+      const outliers = sorted.filter((d) => d < min || d > max);
+
+      return { label: categoryLabels[i], q1, median, q3, min, max, outliers };
+    });
+
+    const x = d3
+      .scaleBand()
+      .domain(categoryLabels)
+      .range([0, innerWidth])
+      .padding(0.3);
+
+    const y = d3
+      .scaleLinear()
+      .domain([d3.min(boxData, (d) => d.min), d3.max(boxData, (d) => d.max)])
+      .nice()
+      .range([innerHeight, 0]);
+
+    boxData.forEach((d, i) => {
+      const center = x(d.label) + x.bandwidth() / 2;
+      const boxWidth = x.bandwidth();
+
+      g.append("line")
+        .attr("x1", center)
+        .attr("x2", center)
+        .attr("y1", y(d.min))
+        .attr("y2", y(d.max))
+        .attr("stroke", "#000")
+        .attr("stroke-width", 1);
+
+      g.append("rect")
+        .attr("x", x(d.label))
+        .attr("y", y(d.q3))
+        .attr("width", boxWidth)
+        .attr("height", y(d.q1) - y(d.q3))
+        .attr("fill", color)
+        .attr("stroke", "#000")
+        .attr("opacity", 0.7);
+
+      g.append("line")
+        .attr("x1", x(d.label))
+        .attr("x2", x(d.label) + boxWidth)
+        .attr("y1", y(d.median))
+        .attr("y2", y(d.median))
+        .attr("stroke", "#000")
+        .attr("stroke-width", 2);
+
+      [d.min, d.max].forEach((val) => {
+        g.append("line")
+          .attr("x1", center - boxWidth / 4)
+          .attr("x2", center + boxWidth / 4)
+          .attr("y1", y(val))
+          .attr("y2", y(val))
+          .attr("stroke", "#000")
+          .attr("stroke-width", 1);
+      });
+
+      d.outliers.forEach((outlier) => {
+        g.append("circle")
+          .attr("cx", center)
+          .attr("cy", y(outlier))
+          .attr("r", 3)
+          .attr("fill", "red")
+          .attr("opacity", 0.6);
+      });
+    });
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // SCATTER PLOT
+  // ============================================
+  scatter(xData, yData, options = {}) {
+    const {
+      title = "Scatter Plot",
+      xlabel = "X",
+      ylabel = "Y",
+      color = "#4299e1",
+      size = 5,
+      labels = null,
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const data = xData.map((x, i) => ({
+      x,
+      y: yData[i],
+      label: labels ? labels[i] : null,
+    }));
+
+    const x = d3
+      .scaleLinear()
+      .domain(d3.extent(xData))
+      .nice()
+      .range([0, innerWidth]);
+
+    const y = d3
+      .scaleLinear()
+      .domain(d3.extent(yData))
+      .nice()
+      .range([innerHeight, 0]);
+
+    const tooltip = d3
+      .select("body")
+      .append("div")
+      .style("position", "absolute")
+      .style("background", "rgba(0,0,0,0.8)")
+      .style("color", "#fff")
+      .style("padding", "8px")
+      .style("border-radius", "4px")
+      .style("font-size", "12px")
+      .style("pointer-events", "none")
+      .style("opacity", 0);
+
+    g.selectAll("circle")
+      .data(data)
+      .join("circle")
+      .attr("cx", (d) => x(d.x))
+      .attr("cy", (d) => y(d.y))
+      .attr("r", size)
+      .attr("fill", color)
+      .attr("opacity", 0.7)
+      .on("mouseover", function (event, d) {
+        d3.select(this)
+          .attr("r", size * 1.5)
+          .attr("opacity", 1);
+        tooltip
+          .style("opacity", 1)
+          .html(
+            `X: ${d.x.toFixed(2)}<br>Y: ${d.y.toFixed(2)}${
+              d.label ? "<br>" + d.label : ""
+            }`
+          )
+          .style("left", event.pageX + 10 + "px")
+          .style("top", event.pageY - 10 + "px");
+      })
+      .on("mouseout", function () {
+        d3.select(this).attr("r", size).attr("opacity", 0.7);
+        tooltip.style("opacity", 0);
+      });
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // LINE CHART
+  // ============================================
+  line(xData, yData, options = {}) {
+    const {
+      title = "Line Chart",
+      xlabel = "X",
+      ylabel = "Y",
+      color = "#4299e1",
+      lineWidth = 2,
+      showPoints = true,
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const data = xData.map((x, i) => ({ x, y: yData[i] }));
+
+    const x = d3.scaleLinear().domain(d3.extent(xData)).range([0, innerWidth]);
+
+    const y = d3
+      .scaleLinear()
+      .domain(d3.extent(yData))
+      .nice()
+      .range([innerHeight, 0]);
+
+    const line = d3
+      .line()
+      .x((d) => x(d.x))
+      .y((d) => y(d.y));
+
+    g.append("path")
+      .datum(data)
+      .attr("fill", "none")
+      .attr("stroke", color)
+      .attr("stroke-width", lineWidth)
+      .attr("d", line);
+
+    if (showPoints) {
+      g.selectAll("circle")
+        .data(data)
+        .join("circle")
+        .attr("cx", (d) => x(d.x))
+        .attr("cy", (d) => y(d.y))
+        .attr("r", 4)
+        .attr("fill", color);
+    }
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // BAR CHART
+  // ============================================
+  bar(categories, values, options = {}) {
+    const {
+      title = "Bar Chart",
+      xlabel = "Category",
+      ylabel = "Value",
+      color = "#4299e1",
+      horizontal = false,
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const data = categories.map((cat, i) => ({
+      category: cat,
+      value: values[i],
+    }));
+
+    if (!horizontal) {
+      const x = d3
+        .scaleBand()
+        .domain(categories)
+        .range([0, innerWidth])
+        .padding(0.2);
+
+      const y = d3
+        .scaleLinear()
+        .domain([0, d3.max(values)])
+        .nice()
+        .range([innerHeight, 0]);
+
+      g.selectAll("rect")
+        .data(data)
+        .join("rect")
+        .attr("x", (d) => x(d.category))
+        .attr("y", (d) => y(d.value))
+        .attr("width", x.bandwidth())
+        .attr("height", (d) => innerHeight - y(d.value))
+        .attr("fill", color)
+        .attr("opacity", 0.8)
+        .on("mouseover", function () {
+          d3.select(this).attr("opacity", 1);
+        })
+        .on("mouseout", function () {
+          d3.select(this).attr("opacity", 0.8);
+        });
+
+      g.append("g")
+        .attr("transform", `translate(0,${innerHeight})`)
+        .call(d3.axisBottom(x))
+        .selectAll("text")
+        .attr("transform", "rotate(-45)")
+        .style("text-anchor", "end");
+
+      g.append("g").call(d3.axisLeft(y));
+    } else {
+      const x = d3
+        .scaleLinear()
+        .domain([0, d3.max(values)])
+        .nice()
+        .range([0, innerWidth]);
+
+      const y = d3
+        .scaleBand()
+        .domain(categories)
+        .range([0, innerHeight])
+        .padding(0.2);
+
+      g.selectAll("rect")
+        .data(data)
+        .join("rect")
+        .attr("x", 0)
+        .attr("y", (d) => y(d.category))
+        .attr("width", (d) => x(d.value))
+        .attr("height", y.bandwidth())
+        .attr("fill", color)
+        .attr("opacity", 0.8)
+        .on("mouseover", function () {
+          d3.select(this).attr("opacity", 1);
+        })
+        .on("mouseout", function () {
+          d3.select(this).attr("opacity", 0.8);
+        });
+
+      g.append("g")
+        .attr("transform", `translate(0,${innerHeight})`)
+        .call(d3.axisBottom(x));
+
+      g.append("g").call(d3.axisLeft(y));
+    }
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", height - 10)
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    svg
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -height / 2)
+      .attr("y", 15)
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // PIE CHART
+  // ============================================
+  pie(labels, values, options = {}) {
+    const {
+      title = "Pie Chart",
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      showLabels = true,
+      showPercentage = true,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const radius = Math.min(width, height) / 2 - 40;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${width / 2},${height / 2})`);
+
+    const data = labels.map((label, i) => ({ label, value: values[i] }));
+    const total = d3.sum(values);
+
+    const color = d3.scaleOrdinal().domain(labels).range(this.colors);
+
+    const pie = d3.pie().value((d) => d.value);
+
+    const arc = d3.arc().innerRadius(0).outerRadius(radius);
+
+    const labelArc = d3
+      .arc()
+      .innerRadius(radius * 0.7)
+      .outerRadius(radius * 0.7);
+
+    const arcs = g
+      .selectAll("arc")
+      .data(pie(data))
+      .join("g")
+      .attr("class", "arc");
+
+    arcs
+      .append("path")
+      .attr("d", arc)
+      .attr("fill", (d) => color(d.data.label))
+      .attr("stroke", "#fff")
+      .attr("stroke-width", 2)
+      .attr("opacity", 0.8)
+      .on("mouseover", function () {
+        d3.select(this).attr("opacity", 1);
+      })
+      .on("mouseout", function () {
+        d3.select(this).attr("opacity", 0.8);
+      });
+
+    if (showLabels) {
+      arcs
+        .append("text")
+        .attr("transform", (d) => `translate(${labelArc.centroid(d)})`)
+        .attr("text-anchor", "middle")
+        .style("font-size", "12px")
+        .style("font-weight", "bold")
+        .style("fill", "#fff")
+        .text((d) => {
+          if (showPercentage) {
+            const percentage = ((d.data.value / total) * 100).toFixed(1);
+            return `${d.data.label}\n${percentage}%`;
+          }
+          return d.data.label;
+        });
+    }
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // HEATMAP
+  // ============================================
+  heatmap(matrix, options = {}) {
+    const {
+      title = "Heatmap",
+      labels = null,
+      colorScheme = "RdYlBu",
+      showValues = true,
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = { top: 80, right: 40, bottom: 80, left: 80 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const n = matrix.length;
+    const rowLabels =
+      labels || Array.from({ length: n }, (_, i) => `Var${i + 1}`);
+    const colLabels =
+      labels || Array.from({ length: n }, (_, i) => `Var${i + 1}`);
+
+    const data = [];
+    for (let i = 0; i < n; i++) {
+      for (let j = 0; j < n; j++) {
+        data.push({
+          row: i,
+          col: j,
+          value: matrix[i][j],
+          rowLabel: rowLabels[i],
+          colLabel: colLabels[j],
+        });
+      }
+    }
+
+    const x = d3
+      .scaleBand()
+      .domain(colLabels)
+      .range([0, innerWidth])
+      .padding(0.05);
+
+    const y = d3
+      .scaleBand()
+      .domain(rowLabels)
+      .range([0, innerHeight])
+      .padding(0.05);
+
+    const colorScale = d3
+      .scaleSequential()
+      .domain([-1, 1])
+      .interpolator(d3[`interpolate${colorScheme}`]);
+
+    g.selectAll("rect")
+      .data(data)
+      .join("rect")
+      .attr("x", (d) => x(d.colLabel))
+      .attr("y", (d) => y(d.rowLabel))
+      .attr("width", x.bandwidth())
+      .attr("height", y.bandwidth())
+      .attr("fill", (d) => colorScale(d.value))
+      .attr("stroke", "#fff")
+      .attr("stroke-width", 1);
+
+    if (showValues) {
+      g.selectAll("text.value")
+        .data(data)
+        .join("text")
+        .attr("class", "value")
+        .attr("x", (d) => x(d.colLabel) + x.bandwidth() / 2)
+        .attr("y", (d) => y(d.rowLabel) + y.bandwidth() / 2)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .style("font-size", "10px")
+        .style("fill", (d) => (Math.abs(d.value) > 0.5 ? "#fff" : "#000"))
+        .text((d) => d.value.toFixed(2));
+    }
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .selectAll("text")
+      .attr("transform", "rotate(-45)")
+      .style("text-anchor", "end");
+
+    g.append("g").call(d3.axisLeft(y));
+
+    const legendWidth = 200;
+    const legendHeight = 20;
+    const legendG = svg
+      .append("g")
+      .attr(
+        "transform",
+        `translate(${width - margin.right - legendWidth},${margin.top - 40})`
+      );
+
+    const legendScale = d3
+      .scaleLinear()
+      .domain([-1, 1])
+      .range([0, legendWidth]);
+
+    const legendAxis = d3.axisBottom(legendScale).ticks(5);
+
+    legendG
+      .selectAll("rect")
+      .data(d3.range(-1, 1, 0.01))
+      .join("rect")
+      .attr("x", (d) => legendScale(d))
+      .attr("y", 0)
+      .attr("width", legendWidth / 200)
+      .attr("height", legendHeight)
+      .attr("fill", (d) => colorScale(d));
+
+    legendG
+      .append("g")
+      .attr("transform", `translate(0,${legendHeight})`)
+      .call(legendAxis);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // VIOLIN PLOT
+  // ============================================
+  violin(data, options = {}) {
+    const {
+      title = "Violin Plot",
+      xlabel = "Category",
+      ylabel = "Value",
+      labels = null,
+      color = "#4299e1",
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const datasets = Array.isArray(data[0]) ? data : [data];
+    const categoryLabels = labels || datasets.map((_, i) => `Group ${i + 1}`);
+
+    const x = d3
+      .scaleBand()
+      .domain(categoryLabels)
+      .range([0, innerWidth])
+      .padding(0.3);
+
+    const allValues = datasets.flat();
+    const y = d3
+      .scaleLinear()
+      .domain(d3.extent(allValues))
+      .nice()
+      .range([innerHeight, 0]);
+
+    const kde = (data, bandwidth = 0.5) => {
+      const thresholds = y.ticks(50);
+      return thresholds.map((t) => {
+        const density = d3.mean(data, (d) => {
+          return (
+            Math.exp(-0.5 * Math.pow((d - t) / bandwidth, 2)) /
+            (bandwidth * Math.sqrt(2 * Math.PI))
+          );
+        });
+        return [t, density];
+      });
+    };
+
+    datasets.forEach((dataset, i) => {
+      const density = kde(dataset);
+      const maxDensity = d3.max(density, (d) => d[1]);
+
+      const xScale = d3
+        .scaleLinear()
+        .domain([0, maxDensity])
+        .range([0, x.bandwidth() / 2]);
+
+      const area = d3
+        .area()
+        .x0((d) => x(categoryLabels[i]) + x.bandwidth() / 2 - xScale(d[1]))
+        .x1((d) => x(categoryLabels[i]) + x.bandwidth() / 2 + xScale(d[1]))
+        .y((d) => y(d[0]))
+        .curve(d3.curveBasis);
+
+      g.append("path")
+        .datum(density)
+        .attr("fill", color)
+        .attr("opacity", 0.6)
+        .attr("stroke", "#000")
+        .attr("stroke-width", 1)
+        .attr("d", area);
+    });
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // QQ PLOT
+  // ============================================
+  qqplot(data, options = {}) {
+    const {
+      title = "Q-Q Plot",
+      xlabel = "Theoretical Quantiles",
+      ylabel = "Sample Quantiles",
+      color = "#4299e1",
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const sorted = [...data].sort((a, b) => a - b);
+    const n = sorted.length;
+
+    const theoretical = sorted.map((_, i) => {
+      const p = (i + 0.5) / n;
+      return this.invNormalCDF(p);
+    });
+
+    const qqData = theoretical.map((t, i) => ({ x: t, y: sorted[i] }));
+
+    const x = d3
+      .scaleLinear()
+      .domain(d3.extent(theoretical))
+      .nice()
+      .range([0, innerWidth]);
+
+    const y = d3
+      .scaleLinear()
+      .domain(d3.extent(sorted))
+      .nice()
+      .range([innerHeight, 0]);
+
+    const minVal = Math.max(x.domain()[0], y.domain()[0]);
+    const maxVal = Math.min(x.domain()[1], y.domain()[1]);
+
+    g.append("line")
+      .attr("x1", x(minVal))
+      .attr("y1", y(minVal))
+      .attr("x2", x(maxVal))
+      .attr("y2", y(maxVal))
+      .attr("stroke", "red")
+      .attr("stroke-width", 2)
+      .attr("stroke-dasharray", "5,5");
+
+    g.selectAll("circle")
+      .data(qqData)
+      .join("circle")
+      .attr("cx", (d) => x(d.x))
+      .attr("cy", (d) => y(d.y))
+      .attr("r", 4)
+      .attr("fill", color)
+      .attr("opacity", 0.7);
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  invNormalCDF(p) {
+    const a1 = -39.6968302866538;
+    const a2 = 220.946098424521;
+    const a3 = -275.928510446969;
+    const a4 = 138.357751867269;
+    const a5 = -30.6647980661472;
+    const a6 = 2.50662827745924;
+
+    const b1 = -54.4760987982241;
+    const b2 = 161.585836858041;
+    const b3 = -155.698979859887;
+    const b4 = 66.8013118877197;
+    const b5 = -13.2806815528857;
+
+    const c1 = -0.00778489400243029;
+    const c2 = -0.322396458041136;
+    const c3 = -2.40075827716184;
+    const c4 = -2.54973253934373;
+    const c5 = 4.37466414146497;
+    const c6 = 2.93816398269878;
+
+    const d1 = 0.00778469570904146;
+    const d2 = 0.32246712907004;
+    const d3 = 2.445134137143;
+    const d4 = 3.75440866190742;
+
+    const pLow = 0.02425;
+    const pHigh = 1 - pLow;
+
+    let q, r, x;
+
+    if (p < pLow) {
+      q = Math.sqrt(-2 * Math.log(p));
+      x =
+        (((((c1 * q + c2) * q + c3) * q + c4) * q + c5) * q + c6) /
+        ((((d1 * q + d2) * q + d3) * q + d4) * q + 1);
+    } else if (p <= pHigh) {
+      q = p - 0.5;
+      r = q * q;
+      x =
+        ((((((a1 * r + a2) * r + a3) * r + a4) * r + a5) * r + a6) * q) /
+        (((((b1 * r + b2) * r + b3) * r + b4) * r + b5) * r + 1);
+    } else {
+      q = Math.sqrt(-2 * Math.log(1 - p));
+      x =
+        -(((((c1 * q + c2) * q + c3) * q + c4) * q + c5) * q + c6) /
+        ((((d1 * q + d2) * q + d3) * q + d4) * q + 1);
+    }
+
+    return x;
+  }
+
+  // ============================================
+  // DENSITY PLOT
+  // ============================================
+  density(data, options = {}) {
+    const {
+      title = "Density Plot",
+      xlabel = "Value",
+      ylabel = "Density",
+      color = "#4299e1",
+      bandwidth = null,
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const bw =
+      bandwidth || 1.06 * d3.deviation(data) * Math.pow(data.length, -1 / 5);
+
+    const extent = d3.extent(data);
+    const range = extent[1] - extent[0];
+    const xPoints = d3.range(
+      extent[0] - range * 0.1,
+      extent[1] + range * 0.1,
+      range / 200
+    );
+
+    const densityData = xPoints.map((xi) => {
+      const density = d3.mean(data, (d) => {
+        return (
+          Math.exp(-0.5 * Math.pow((d - xi) / bw, 2)) /
+          (bw * Math.sqrt(2 * Math.PI))
+        );
+      });
+      return { x: xi, y: density };
+    });
+
+    const x = d3
+      .scaleLinear()
+      .domain([xPoints[0], xPoints[xPoints.length - 1]])
+      .range([0, innerWidth]);
+
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(densityData, (d) => d.y)])
+      .nice()
+      .range([innerHeight, 0]);
+
+    const area = d3
+      .area()
+      .x((d) => x(d.x))
+      .y0(innerHeight)
+      .y1((d) => y(d.y))
+      .curve(d3.curveBasis);
+
+    const line = d3
+      .line()
+      .x((d) => x(d.x))
+      .y((d) => y(d.y))
+      .curve(d3.curveBasis);
+
+    g.append("path")
+      .datum(densityData)
+      .attr("fill", color)
+      .attr("opacity", 0.3)
+      .attr("d", area);
+
+    g.append("path")
+      .datum(densityData)
+      .attr("fill", "none")
+      .attr("stroke", color)
+      .attr("stroke-width", 2)
+      .attr("d", line);
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // PARALLEL COORDINATES
+  // ============================================
+  parallel(data, dimensions, options = {}) {
+    const {
+      title = "Parallel Coordinates",
+      colors = null,
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = { top: 60, right: 40, bottom: 40, left: 40 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const y = {};
+    dimensions.forEach((dim) => {
+      y[dim] = d3
+        .scaleLinear()
+        .domain(d3.extent(data, (d) => d[dim]))
+        .range([innerHeight, 0]);
+    });
+
+    const x = d3.scalePoint().domain(dimensions).range([0, innerWidth]);
+
+    const line = d3.line();
+
+    const path = (d) => {
+      return line(dimensions.map((dim) => [x(dim), y[dim](d[dim])]));
+    };
+
+    const colorScale = colors
+      ? d3.scaleOrdinal().domain(d3.range(data.length)).range(colors)
+      : d3.scaleSequential(d3.interpolateViridis).domain([0, data.length]);
+
+    g.selectAll("path.line")
+      .data(data)
+      .join("path")
+      .attr("class", "line")
+      .attr("d", path)
+      .attr("fill", "none")
+      .attr("stroke", (d, i) => colorScale(i))
+      .attr("opacity", 0.3)
+      .attr("stroke-width", 2)
+      .on("mouseover", function () {
+        d3.select(this).attr("opacity", 1).attr("stroke-width", 3);
+      })
+      .on("mouseout", function () {
+        d3.select(this).attr("opacity", 0.3).attr("stroke-width", 2);
+      });
+
+    dimensions.forEach((dim) => {
+      const axis = g
+        .append("g")
+        .attr("transform", `translate(${x(dim)},0)`)
+        .call(d3.axisLeft(y[dim]));
+
+      axis
+        .append("text")
+        .attr("y", -10)
+        .attr("text-anchor", "middle")
+        .style("fill", "#000")
+        .style("font-weight", "bold")
+        .text(dim);
+    });
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // PAIR PLOT
+  // ============================================
+  pairplot(data, variables, options = {}) {
+    const {
+      title = "Pair Plot",
+      color = "#4299e1",
+      size = 3,
+      width = 900,
+      height = 900,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const n = variables.length;
+    const padding = 60;
+    const cellSize = (Math.min(width, height) - padding * 2) / n;
+
+    const scales = {};
+    variables.forEach((variable) => {
+      scales[variable] = d3
+        .scaleLinear()
+        .domain(d3.extent(data, (d) => d[variable]))
+        .range([0, cellSize - 20]);
+    });
+
+    for (let i = 0; i < n; i++) {
+      for (let j = 0; j < n; j++) {
+        const xVar = variables[j];
+        const yVar = variables[i];
+
+        const cellG = svg
+          .append("g")
+          .attr(
+            "transform",
+            `translate(${padding + j * cellSize},${padding + i * cellSize})`
+          );
+
+        if (i === j) {
+          const values = data.map((d) => d[xVar]);
+          const histogram = d3
+            .histogram()
+            .domain(scales[xVar].domain())
+            .thresholds(20);
+
+          const bins = histogram(values);
+          const yScale = d3
+            .scaleLinear()
+            .domain([0, d3.max(bins, (d) => d.length)])
+            .range([cellSize - 20, 0]);
+
+          cellG
+            .selectAll("rect")
+            .data(bins)
+            .join("rect")
+            .attr("x", (d) => scales[xVar](d.x0))
+            .attr("y", (d) => yScale(d.length))
+            .attr("width", (d) => scales[xVar](d.x1) - scales[xVar](d.x0) - 1)
+            .attr("height", (d) => cellSize - 20 - yScale(d.length))
+            .attr("fill", color)
+            .attr("opacity", 0.7);
+        } else {
+          cellG
+            .selectAll("circle")
+            .data(data)
+            .join("circle")
+            .attr("cx", (d) => scales[xVar](d[xVar]))
+            .attr("cy", (d) => scales[yVar](d[yVar]))
+            .attr("r", size)
+            .attr("fill", color)
+            .attr("opacity", 0.5);
+        }
+
+        if (i === n - 1) {
+          cellG
+            .append("g")
+            .attr("transform", `translate(0,${cellSize - 20})`)
+            .call(d3.axisBottom(scales[xVar]).ticks(3));
+        }
+
+        if (j === 0) {
+          cellG.append("g").call(d3.axisLeft(scales[yVar]).ticks(3));
+        }
+
+        if (i === n - 1) {
+          cellG
+            .append("text")
+            .attr("x", (cellSize - 20) / 2)
+            .attr("y", cellSize - 5)
+            .attr("text-anchor", "middle")
+            .style("font-size", "10px")
+            .text(xVar);
+        }
+
+        if (j === 0) {
+          cellG
+            .append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -(cellSize - 20) / 2)
+            .attr("y", -25)
+            .attr("text-anchor", "middle")
+            .style("font-size", "10px")
+            .text(yVar);
+        }
+      }
+    }
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 30)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+
+  // ============================================
+  // MULTI-LINE CHART
+  // ============================================
+  multiline(series, options = {}) {
+    const {
+      title = "Multi-Line Chart",
+      xlabel = "X",
+      ylabel = "Y",
+      legend = true,
+      width = this.defaultWidth,
+      height = this.defaultHeight,
+      containerId = null,
+    } = options;
+
+    const { svg } = this.createContainer(containerId, width, height);
+    const margin = this.defaultMargin;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const allX = series.flatMap((s) => s.data.map((d) => d.x));
+    const allY = series.flatMap((s) => s.data.map((d) => d.y));
+
+    const x = d3.scaleLinear().domain(d3.extent(allX)).range([0, innerWidth]);
+
+    const y = d3
+      .scaleLinear()
+      .domain(d3.extent(allY))
+      .nice()
+      .range([innerHeight, 0]);
+
+    const color = d3
+      .scaleOrdinal()
+      .domain(series.map((s) => s.name))
+      .range(this.colors);
+
+    const line = d3
+      .line()
+      .x((d) => x(d.x))
+      .y((d) => y(d.y));
+
+    series.forEach((s) => {
+      g.append("path")
+        .datum(s.data)
+        .attr("fill", "none")
+        .attr("stroke", color(s.name))
+        .attr("stroke-width", 2)
+        .attr("d", line);
+    });
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(xlabel);
+
+    g.append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -innerHeight / 2)
+      .attr("y", -40)
+      .attr("fill", "#000")
+      .attr("text-anchor", "middle")
+      .text(ylabel);
+
+    if (legend) {
+      const legendG = svg
+        .append("g")
+        .attr(
+          "transform",
+          `translate(${width - margin.right - 100},${margin.top})`
+        );
+
+      series.forEach((s, i) => {
+        const legendItem = legendG
+          .append("g")
+          .attr("transform", `translate(0,${i * 25})`);
+
+        legendItem
+          .append("line")
+          .attr("x1", 0)
+          .attr("x2", 30)
+          .attr("y1", 10)
+          .attr("y2", 10)
+          .attr("stroke", color(s.name))
+          .attr("stroke-width", 2);
+
+        legendItem
+          .append("text")
+          .attr("x", 35)
+          .attr("y", 15)
+          .style("font-size", "12px")
+          .text(s.name);
+      });
+    }
+
+    svg
+      .append("text")
+      .attr("x", width / 2)
+      .attr("y", 20)
+      .attr("text-anchor", "middle")
+      .style("font-size", "16px")
+      .style("font-weight", "bold")
+      .text(title);
+
+    return this;
+  }
+}
+
+export default DataViz;