Commit cb80d6ba authored by Philip's avatar Philip
Browse files

Adjust colors

parent 45ae233f

src/charts/MapChart.jsx

+7 −3
Original line number Diff line number Diff line
@@ -12,6 +12,8 @@ import ColorScaleLegend from './ColorScaleLegend'; 


import geoData from '../assets/geo.json';



const colors = ['#a56ee8', '#f15bb5', '#fee440', '#00bbf9', '#00f5d4'];



const MapChart = ({

  data,

  selectedIndicator,
@@ -60,18 +62,20 @@ const MapChart = ({ 
                  </div>

                );



                const isSelected = selectedCountries.indexOf(name) >= 0;

                const index = selectedCountries.indexOf(name);



                return (

                  <Tooltip key={geo.rsmKey} title={title}>

                    <Geography

                      className={`country ${

                        countryData ? 'country-with-data' : ''

                      } ${isSelected ? 'country-selected' : ''}`}

                      } ${index >= 0 ? 'country-selected' : ''}`}

                      geography={geo}

                      fill={

                        countryData

                          ? colorScale(countryData[selectedIndicator])

                          ? index >= 0

                            ? colors[index % colors.length]

                            : colorScale(countryData[selectedIndicator])

                          : '#ddd'

                      }

                      onClick={() => {

src/charts/ScatterChart.jsx

+9 −6
Original line number Diff line number Diff line
@@ -10,6 +10,8 @@ import { 
  ZAxis,

} from 'recharts';



const colors = ['#a56ee8', '#f15bb5', '#fee440', '#00bbf9', '#00f5d4'];



const formatGDP = (value) => {

  if (value >= 1e12) {

    return `$${(value / 1e12).toFixed(1)}T`;
@@ -87,14 +89,15 @@ const ScatterPlot = ({ 
            data={scatterData}

            onClick={({ country }) => selectCountry(country)}

          >

            {scatterData.map((entry, index) => {

              const isSelected = selectedCountries.includes(entry.country);

            {scatterData.map((entry, scatter_index) => {

              const index = selectedCountries.indexOf(entry.country);

              return (

                <Cell

                  key={`cell-${index}`}

                  className={`scatter-chart-cell ${

                    isSelected ? 'scatter-chart-cell-selected' : ''

                  }`}

                  key={`cell-${scatter_index}`}

                  className="scatter-chart-cell"

                  style={{

                    fill: index >= 0 ? colors[index % colors.length] : '#fff',

                  }}

                />

              );

            })}

src/index.css

+4 −13
Original line number Diff line number Diff line
@@ -82,7 +82,7 @@ body { 
  outline: none;

  stroke: #d6d6da;

  stroke-width: 0.5px;

  transition: fill 0.2s ease;

  transition: filter 0.2s ease;

}



.country-with-data {
@@ -90,11 +90,7 @@ body { 
}



.country-with-data:hover {

  fill: brown;

}



.country-selected {

  fill: brown;

  filter: brightness(0.8);

}



.color-scale-legend {
@@ -165,14 +161,9 @@ body { 


.scatter-chart-cell {

  cursor: pointer;

  fill: #fff;

  transition: fill 0.2s ease;

  transition: filter 0.2s ease;

}



.scatter-chart-cell:hover {

  fill: brown;

}



.scatter-chart-cell-selected {

  fill: brown;

  filter: brightness(0.8);

}