-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
39 lines (32 loc) · 892 Bytes
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React from 'react';
import ReactDOM from 'react-dom';
import { scaleSqrt, max } from 'd3';
import { useWorldAtlas } from './useWorldAtlas';
import { useCities } from './useCities';
import { Marks } from './Marks';
const width = 960;
const height = 500;
const App = () => {
const worldAtlas = useWorldAtlas();
const cities = useCities();
if (!worldAtlas || !cities) {
return <pre>Loading....</pre>;
}
const sizeValue = (d) => d.population;
const maxRadius = 15;
const sizeScale = scaleSqrt()
.domain([0, max(cities, sizeValue)])
.range([0, maxRadius]);
return (
<svg width={width} height={height}>
<Marks
worldAtlas={worldAtlas}
cities={cities}
sizeScale={sizeScale}
sizeValue={sizeValue}
/>
</svg>
);
};
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);