From 97e50ddef0904080e89008108c6c20a6e4a5153c Mon Sep 17 00:00:00 2001 From: Mohamed Nasser Date: Wed, 8 Nov 2023 15:30:57 +0200 Subject: [PATCH 1/2] Update ScatterChart.js --- source/components/VisualTools/Chart/ScatterChart.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/components/VisualTools/Chart/ScatterChart.js b/source/components/VisualTools/Chart/ScatterChart.js index dea8291..eea1db9 100644 --- a/source/components/VisualTools/Chart/ScatterChart.js +++ b/source/components/VisualTools/Chart/ScatterChart.js @@ -38,7 +38,7 @@ export default class ScatterChart extends PureComponent { .select(this.self.current) .append('canvas') .attr('width', innerWidth) - .attr('height', innerHeight + 5) + .attr('height', innerHeight) .style('transform', `translate(${this.state.margin.left}px,${this.state.margin.top}px)`); // create svg @@ -52,7 +52,7 @@ export default class ScatterChart extends PureComponent { // create viewer const viewer = svg .append('g') - .attr('transform', `translate(${this.state.margin.left},${this.state.margin.top})`); + .attr('transform', `translate(${this.state.margin.left},0)`); // this.xScale = this.createScaleLiner(this.props.fields.x, [0, innerWidth]); this.yScale = this.createScaleLiner(this.props.fields.y, [innerHeight, 0]); From 7d3447bb9555559c3b94256b6882818a8b220cae Mon Sep 17 00:00:00 2001 From: Mohamed Nasser Date: Fri, 10 Nov 2023 00:42:22 +0200 Subject: [PATCH 2/2] fixed margin and padding in plots added padding for x domain and y domain to display each point clearly. --- source/components/VisualTools/Chart/DensityChart.js | 13 +++++++++---- source/components/VisualTools/Chart/ScatterChart.js | 6 +++++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/source/components/VisualTools/Chart/DensityChart.js b/source/components/VisualTools/Chart/DensityChart.js index d67d627..499f88a 100644 --- 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 index eea1db9..aeceda0 100644 --- 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;