change dimension

holtzy · Apr 2, 2024 · bcec3f9 · bcec3f9
1 parent 35646a2
commit bcec3f9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/pages/example/radar-chart-animation.tsx b/pages/example/radar-chart-animation.tsx
@@ -86,7 +86,7 @@ export default function Home() {
         vizName={'RadarDatasetAnimation'}
         VizComponent={RadarDatasetAnimationDemo}
         maxWidth={900}
-        height={800}
+        height={1000}
         caption="Dive deep into the 4 main types of Data Professionals. Understand their main required competencies, their salary ranges and their popularity."
       />
       {/*

diff --git a/viz/RadarDatasetAnimation/RadarDatasetAnimation.tsx b/viz/RadarDatasetAnimation/RadarDatasetAnimation.tsx
@@ -4,8 +4,8 @@ import { Radar } from './Radar';
 import { Dumbbell } from './Dumbbell';
 import { LineChart } from './LineChart';
 
-const HEADER_HEIGHT = 230; // button + title
-const MARGIN_BOTTOM = 20;
+const HEADER_HEIGHT = 130; // button + title
+const MARGIN_BOTTOM = 70;
 const COLORS = ['green', '#e0ac2b', '#6689c6', '#e85252', '#9a6fb0'];
 
 const buttonStyle = {
@@ -58,7 +58,7 @@ export const RadarDatasetAnimation = ({
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          marginTop: 20,
+          marginTop: 70,
         }}
       >
         <h1>Types of Data Professionals</h1>
@@ -108,7 +108,7 @@ export const RadarDatasetAnimation = ({
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <Radar
           data={groupRadarData}
-          width={(width / 3) * 2}
+          width={(width / 3) * 2 - 50}
           height={height - HEADER_HEIGHT - MARGIN_BOTTOM}
           axisConfig={[
             { name: 'ML Ops', max: 5 },