fixed margin and padding in plots

added padding for x domain and y domain to display each point clearly.
sharmalab · Nov 9, 2023 · 7d3447b · 7d3447b
1 parent 97e50dd
commit 7d3447b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/source/components/VisualTools/Chart/DensityChart.js b/source/components/VisualTools/Chart/DensityChart.js
@@ -54,13 +54,19 @@ function DensityChart(props) {
         .attr('height', rect.height)
         .append('g')
         .attr('transform', `translate(${margin.left},${margin.top})`);
-
+      const paddingPercent = 0.1; // Adjust the percentage of padding as needed
+      const domainExtentX = d3.extent(props.data, (d) => d[props.fields.x]);
+      const domainPaddingX = (domainExtentX[1] - domainExtentX[0]) * paddingPercent;
+      const domainExtentY = d3.extent(props.data, (d) => d[props.fields.y]);
+      const domainPaddingY = (domainExtentY[1] - domainExtentY[0]) * paddingPercent;
       scales.current.x
-        .domain(d3.extent(props.data, (d) => d[props.fields.x]))
+        .domain([domainExtentX[0] - domainPaddingX,
+          domainExtentX[1] + domainPaddingX])
         .range([0, innerWidth]);
 
       scales.current.y
-        .domain(d3.extent(props.data, (d) => d[props.fields.y]))
+        .domain([domainExtentY[0] - domainPaddingY,
+          domainExtentY[1] + domainPaddingY])
         .range([innerHeight, 0]);
 
       svg.current
@@ -104,7 +110,6 @@ function DensityChart(props) {
       svg.current
         .insert('g', 'g')
         .attr('id', 'draw_area')
-        .attr('transform', `translate(${margin.left},${-margin.bottom})`)
         .selectAll('path')
         .data(densityData)
         .enter()

diff --git a/source/components/VisualTools/Chart/ScatterChart.js b/source/components/VisualTools/Chart/ScatterChart.js
@@ -123,9 +123,13 @@ export default class ScatterChart extends PureComponent {
   }
 
   createScaleLiner(f, range) {
+    const paddingPercent = 0.1; // Adjust the percentage of padding as needed
+    const domainExtent = d3.extent(this.state.data, (d) => d[f]);
+    const domainPadding = (domainExtent[1] - domainExtent[0]) * paddingPercent;
     const scaleLiner = d3
       .scaleLinear()
-      .domain(d3.extent(this.state.data, (d) => d[f]))
+      .domain([domainExtent[0] - domainPadding,
+        domainExtent[1] + domainPadding])
       .range(range)
       .nice();
     return scaleLiner;