Skip to content

Commit 1703b4c

Browse files
alex-r-bigelowalex-r-bigelow
committed
Update ancient code to latest d3, add README + local serve utility
1 parent 373fd4b commit 1703b4c

9 files changed

+5895
-1175
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md

+32-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,34 @@
1-
Edit the two CSV files to assign research groups to areas in SCI (feel free to comment if I've done something silly).
1+
[Interactive map](https://alex-r-bigelow.github.io/scix-map/) for in-house SCI events
22

3-
Check the [interactive map](https://alex-r-bigelow.github.io/scix-map/) to make sure it worked.
3+
## Updating the map
44

5-
TODO: Once assignments have settled down a little, I should add a custom color map (e.g. InfoVis = shades of yellow, Imaging = shades of blue, etc) with a legend.
5+
The Area column of `allTitles.csv` corresponds to `id` attributes in `map.svg`.
6+
7+
To edit map areas, open `map.svg` in [Inkscape](https://inkscape.org/). All the interactive elements should be kept inside the `InteractiveLayer` Layer, and you can use Inkscape's XML view to add / edit `ids`:
8+
9+
![Editing the map in Inkscape](inkscape.png)
10+
11+
Additionally, if you add or change Track values in `allTitles.csv`, make sure to update `colorMap` in `script.js`
12+
13+
## Local setup
14+
15+
```bash
16+
# Install NVM, node.js
17+
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
18+
19+
nvm install node
20+
21+
# Clone the repository
22+
git clone [email protected]:alex-r-bigelow/scix-map.git
23+
cd scix-map
24+
25+
# Install and run the development server
26+
npm install
27+
npm run serve
28+
```
29+
30+
## Public setup
31+
32+
To display the map on the touch table (or other display), open a browser and navigate to `https://alex-r-bigelow.github.io/scix-map`
33+
34+
If you've forked this repository, make sure that Github Pages is using the `main` branch, and that the QR code still points to the correct map!

‎index.html

+24-21
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
1-
<!DOCTYPE HTML>
1+
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<script src="https://d3js.org/d3.v4.min.js"></script>
5-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet">
6-
<link rel="stylesheet" href="style.css"/>
7-
</head>
8-
<body>
9-
<div id="midbar">
10-
<div id="legend"></div>
11-
<div id="titles"></div>
12-
</div>
13-
<div id="map">
14-
</div>
15-
<div id="sidebar">
16-
<img src="sci.svg"/>
17-
<div>To load this map on your phone, go to http://tiny.cc/x3vwgy or
18-
scan this QR code:</div>
19-
<img src="qrcode.svg"/>
20-
</div>
21-
</body>
22-
<script type="application/javascript" src="script.js"></script>
3+
<head>
4+
<link
5+
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900"
6+
rel="stylesheet"
7+
/>
8+
<link rel="stylesheet" href="style.css" />
9+
<script type="module" src="script.js"></script>
10+
</head>
11+
<body>
12+
<div id="midbar">
13+
<div id="legend"></div>
14+
<div id="titles"></div>
15+
</div>
16+
<div id="map"></div>
17+
<div id="sidebar">
18+
<img src="sci.svg" />
19+
<div>
20+
To load this map on your device, go to https://tinyurl.com/43cv5ne2 or
21+
scan this QR code:
22+
</div>
23+
<img src="qrcode.svg" />
24+
</div>
25+
</body>
2326
</html>

‎inkscape.png

214 KB
Loading

‎map.svg

+1,147-898
Loading

0 commit comments

Comments
 (0)