Charles De Dampierre commited on
Commit
8756773
1 Parent(s): c7768c9

change colors

Browse files
Files changed (2) hide show
  1. src/Map.jsx +8 -31
  2. src/index.css +2 -1
src/Map.jsx CHANGED
@@ -83,19 +83,6 @@ function MapView() {
83
  });
84
  svg.call(zoom);
85
 
86
- /**
87
- * Initial zoom.
88
- */
89
- // const defaultTransform = { k: 1 };
90
- // const initialTransform = defaultTransform?.k != null
91
- // ? new ZoomTransform(
92
- // defaultTransform.k ?? 1,
93
- // defaultTransform.x ?? 0,
94
- // defaultTransform.y ?? 0
95
- // )
96
- // : d3.zoomIdentity;
97
- // svg.call(zoom.transform, initialTransform);
98
-
99
  const xMin = d3.min(data, (d) => d.x);
100
  const xMax = d3.max(data, (d) => d.x);
101
  const yMin = d3.min(data, (d) => d.y);
@@ -122,6 +109,11 @@ function MapView() {
122
  data,
123
  );
124
 
 
 
 
 
 
125
  // Define a custom color for the contour lines
126
 
127
  const contourLineColor = "rgb(94, 163, 252)";
@@ -134,27 +126,12 @@ function MapView() {
134
  .append("path")
135
  .attr("class", "contour")
136
  .attr("d", d3.geoPath())
137
- .style("fill", "none")
 
 
138
  .style("stroke", contourLineColor) // Set the contour line color to the custom color
139
  .style("stroke-width", 1);
140
 
141
- /*
142
- const circles = svg.selectAll('circle')
143
- .data(data)
144
- .enter()
145
- .append('circle')
146
- .attr('cx', (d) => xScale(d.x))
147
- .attr('cy', (d) => yScale(d.y))
148
- .attr('r', 5)
149
- .style('fill', 'lightblue')
150
- .on('click', (event, d) => {
151
- // Show the content and topic name of the clicked point in the text container
152
- setSelectedDocument(d);
153
- // Change the color to pink on click
154
- circles.style('fill', (pointData) => (pointData === d) ? 'pink' : 'lightblue');
155
- });
156
- */
157
-
158
  const centroids = data.filter((d) => d.x_centroid && d.y_centroid);
159
  setTopicsCentroids(centroids);
160
 
 
83
  });
84
  svg.call(zoom);
85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  const xMin = d3.min(data, (d) => d.x);
87
  const xMax = d3.max(data, (d) => d.x);
88
  const yMin = d3.min(data, (d) => d.y);
 
109
  data,
110
  );
111
 
112
+ // Define a color scale for the contours to add visual depth and appeal
113
+ const colorScale = d3.scaleSequential(d3.interpolateTurbo) // Using d3.interpolateTurbo for vibrant colors
114
+ .domain([0, d3.max(contourData, d => d.value)]); // Dynamically set the domain based on data density
115
+
116
+
117
  // Define a custom color for the contour lines
118
 
119
  const contourLineColor = "rgb(94, 163, 252)";
 
126
  .append("path")
127
  .attr("class", "contour")
128
  .attr("d", d3.geoPath())
129
+ .style("fill", "lightgreen")
130
+ .attr("fill", d => colorScale(d.value)) // Apply color based on data density
131
+
132
  .style("stroke", contourLineColor) // Set the contour line color to the custom color
133
  .style("stroke-width", 1);
134
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  const centroids = data.filter((d) => d.x_centroid && d.y_centroid);
136
  setTopicsCentroids(centroids);
137
 
src/index.css CHANGED
@@ -73,7 +73,8 @@ svg {
73
  }
74
 
75
  .scatter-plot-container svg {
76
- background-color: #f7f7f7;
 
77
  border: 1px solid #ddd;
78
  cursor: grab;
79
  }
 
73
  }
74
 
75
  .scatter-plot-container svg {
76
+ #background-color: #f7f7f7;
77
+ background-color: #9bdbfb;
78
  border: 1px solid #ddd;
79
  cursor: grab;
80
  }