Skip to content

Commit da65878

Browse files
derekederderekeder
committed
updated readme, added colors to map, misc cleanup, new screenshot
1 parent 7756fdc commit da65878

7 files changed

Lines changed: 54 additions & 100 deletions

File tree

‎.env.example‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎README.md‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
# DataMade Code Challenge: React Map
22

3-
---
3+
![2026 DataMade Code Challenge](https://github.com/datamade/code-challenge-v2/blob/main/map/static/images/2026-datamade-code-challenge.jpg)
44

5-
Welcome to the DataMade code challenge! 👋
6-
7-
https://github.com/user-attachments/assets/39702bb2-0a72-45a0-91bf-2d48d990fbce
5+
Welcome to the 2026 DataMade code challenge! 👋
86

97
## Overview
108

@@ -16,18 +14,6 @@ There’s no time limit, but don’t feel the need to go over the top with your
1614

1715
We’ll be evaluating whether the code works, as well as its quality. Before submitting, make sure that your code does what you expect it to do, that it’s clean and neat enough to meet your standards, and that you’ve provided us some instructions on how to run it.
1816

19-
_Note: If you would prefer to keep your code challenge private, please share access with the following members of DataMade on GitHub:_
20-
21-
| Member | GitHub Account |
22-
| --------- | -------------------------------- |
23-
| Hannah | https://github.com/hancush |
24-
| Derek | https://github.com/derekeder |
25-
| Monkruman | https://github.com/antidipyramid |
26-
| Xavier | https://github.com/xmedr |
27-
| Hayley | https://github.com/haowens |
28-
29-
Keep in mind that you cannot create a private fork of a public repository on GitHub, so you’ll need to [follow these instructions](https://gist.github.com/0xjac/85097472043b697ab57ba1b1c7530274) to create a private copy of the repo.
30-
3117
## Installation
3218

3319
Development requires a local installation of [Docker](https://docs.docker.com/get-started/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/). These are the only two system-level dependencies you should need.
@@ -82,3 +68,15 @@ Start displaying some data! Use the `setAreaInteraction()` method to shade the m
8268
### Step 5: Submit your work
8369

8470
To submit your work, create a feature branch for your code, commit your changes, push your commits up to your fork, and open up a pull request against main. Finally, drop a link to your pull request in your application.
71+
72+
_Note: If you would prefer to keep your code challenge private, please share access with the following members of DataMade on GitHub:_
73+
74+
| Member | GitHub Account |
75+
| --------- | -------------------------------- |
76+
| Hannah | https://github.com/hancush |
77+
| Derek | https://github.com/derekeder |
78+
| Monkruman | https://github.com/antidipyramid |
79+
| Xavier | https://github.com/xmedr |
80+
| Hayley | https://github.com/haowens |
81+
82+
Keep in mind that you cannot create a private fork of a public repository on GitHub, so you’ll need to [follow these instructions](https://gist.github.com/0xjac/85097472043b697ab57ba1b1c7530274) to create a private copy of the repo.

‎docker-compose.yml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,6 @@ services:
3535
DJANGO_MANAGEPY_MIGRATE: "on"
3636
DJANGO_DEBUG: "True"
3737
PGPASSWORD: postgres
38-
env_file:
39-
- .env
4038
entrypoint: /app/docker-entrypoint.sh
4139
command: python manage.py runserver 0.0.0.0:8000
4240

@@ -55,7 +53,7 @@ services:
5553
volumes:
5654
- map-db-data:/var/lib/postgresql
5755
ports:
58-
- 32001:5432
56+
- 5432:5432
5957

6058
volumes:
6159
map-db-data:

‎map/static/images/2026-datamade-code-challenge.jpg‎

239 KB
Loading

‎map/static/js/RestaurantPermitMap.js‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ function YearSelect({ setFilterVal }) {
3737
}
3838

3939
export default function RestaurantPermitMap() {
40+
const colors = ["#eff3ff", "#bdd7e7", "#6baed6", "#2171b5"]
41+
4042
const [currentYearData, setCurrentYearData] = useState([])
4143
const [year, setYear] = useState(2026)
4244

@@ -59,17 +61,32 @@ export default function RestaurantPermitMap() {
5961
.then((data) => setCurrentYearData(data))
6062
}, [currentUrl])
6163

64+
function getColor(pcntPermits) {
65+
if (pcntPermits > .5)
66+
return colors[3]
67+
else if (pcntPermits > .2)
68+
return colors [2]
69+
else if (pcntPermits >= .01)
70+
return colors [1]
71+
else
72+
return colors[0]
73+
}
74+
6275
function setAreaInteraction(feature, layer) {
6376
const thisAreaData = communityAreaDict[feature.properties.community],
6477
numPermits = thisAreaData.num_permits,
6578
pcntPermits = numPermits / maxNumPermits
6679
layer.setStyle({
67-
fillOpacity: pcntPermits,
80+
color: "#000000",
81+
weight: 1,
82+
fillOpacity: 0.7,
83+
fillColor: getColor(pcntPermits)
6884
})
6985
layer.on("mouseover", () => {
7086
layer.bindPopup(`
71-
<h3>${feature.properties.community}</h3>
72-
<p>Restaurant permits issued during ${year}: ${thisAreaData.num_permits}</p>
87+
<strong>${feature.properties.community}</strong><br />
88+
Year: ${year}<br />
89+
Restaurant permits: ${thisAreaData.num_permits}
7390
`)
7491
layer.openPopup()
7592
})
@@ -89,11 +106,10 @@ export default function RestaurantPermitMap() {
89106
id="restaurant-map"
90107
center={[41.88, -87.62]}
91108
zoom={10}
92-
scrollWheelZoom={false}
93109
>
94110
<TileLayer
95111
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
96-
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
112+
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
97113
/>
98114
{currentYearData.length > 0 ? (
99115
<GeoJSON

‎map/templates/base.html‎

Lines changed: 18 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,35 @@
1010
/>
1111

1212
<title>
13-
Home | DataMade Code Challenge
13+
Home | 2026 DataMade Code Challenge
1414
</title>
1515

16-
<meta content="TK" name="description" />
16+
<meta content="A map that displays Chicago's community areas, shaded depending on how many new restaurant permits were issued in a given year" name="description" />
1717
<meta
18-
content="DataMade Code Challenge"
18+
content="2026 DataMade Code Challenge"
1919
name="author"
2020
/>
21-
<meta property="og:site_name" content="DataMade Code Challenge" />
21+
<meta property="og:site_name" content="2026 DataMade Code Challenge" />
2222

2323
<!-- Facebook metadata -->
2424
<meta property="og:type" content="website" />
2525
<meta
2626
property="og:title"
27-
content="Home | DataMade Code Challenge"
27+
content="2026 DataMade Code Challenge"
2828
/>
29-
<meta property="og:description" content="TK" />
29+
<meta property="og:description" content="A map that displays Chicago's community areas, shaded depending on how many new restaurant permits were issued in a given year" />
3030
<meta property="og:url" content="TK" />
3131

3232
<!-- Twitter metadata -->
3333
<meta name="twitter:card" content="summary_large_image" />
34-
<meta name="twitter:site" content="DataMade Code Challenge" />
35-
<meta name="twitter:creator" content="TK" />
34+
<meta name="twitter:site" content="2-26 DataMade Code Challenge" />
35+
<meta name="twitter:creator" content="DataMade" />
3636
<meta
3737
name="twitter:title"
38-
content="Home | DataMade Code Challenge"
38+
content="2026 DataMade Code Challenge"
3939
/>
4040
<meta name="twitter:url" content="TK" />
41-
<meta name="twitter:description" content="TK" />
42-
43-
<meta property="og:image" content="{% static 'images/' %}" />
44-
<meta name="twitter:image" content="{% static 'images/' %}" />
41+
<meta name="twitter:description" content="A map that displays Chicago's community areas, shaded depending on how many new restaurant permits were issued in a given year" />
4542

4643
<!-- Override this block to add extra meta tags -->
4744
{% block extra_meta %}{% endblock %}
@@ -75,70 +72,21 @@
7572
class="navbar navbar-expand-lg bg-light"
7673
>
7774
<div class="container-fluid">
78-
<a class="navbar-brand" href="/"
79-
>DataMade Code Challenge</a
80-
>
81-
82-
<button
83-
class="navbar-toggler"
84-
type="button"
85-
data-bs-toggle="collapse"
86-
data-bs-target="#navbarSupportedContent"
87-
aria-controls="navbarSupportedContent"
88-
aria-expanded="false"
89-
aria-label="Toggle navigation"
90-
>
91-
<span class="navbar-toggler-icon"></span>
92-
</button>
93-
94-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
95-
<ul class="navbar-nav">
96-
{% include 'map/partials/nav.html' %}
97-
</ul>
98-
</div>
75+
<a class="navbar-brand" href="/" >2026 DataMade Code Challenge</a>
9976
</div>
10077
</nav>
10178

10279
<main>{% block body %}{% endblock %}</main>
10380

104-
<footer class="bg-dark text-light">
105-
<div class="container-fluid py-4">
106-
<div class="row">
107-
<!-- Site Name -->
108-
<div class="col-md">
109-
<p class="h4">
110-
DataMade Code Challenge
111-
</p>
112-
</div>
113-
</div>
114-
115-
<hr class="py-2" style="border-color: gray" />
116-
117-
<div class="row">
118-
<div class="col">
119-
<p>
120-
Built by
121-
<a href="https://datamade.us" target="_blank" class="text-light"
122-
>DataMade</a
123-
>
124-
</p>
125-
</div>
126-
</div>
127-
</div>
128-
</footer>
129-
130-
<!-- Load external scripts -->
131-
<script src="{% static 'js/lib/fontawesome.min.js' %}"></script>
132-
133-
<!-- Load Bootstrap styles and JavaScript -->
134-
{% load render_bundle from webpack_loader %}
135-
{% render_bundle 'bootstrap' js %}
136-
137-
<!-- Load extra external scripts -->
138-
{% block extra_js %}{% endblock %}
139-
81+
<!-- Load external scripts -->
82+
<script src="{% static 'js/lib/fontawesome.min.js' %}"></script>
14083

84+
<!-- Load Bootstrap styles and JavaScript -->
85+
{% load render_bundle from webpack_loader %}
86+
{% render_bundle 'bootstrap' js %}
14187

88+
<!-- Load extra external scripts -->
89+
{% block extra_js %}{% endblock %}
14290

14391
</body>
14492
</html>

‎map/templates/map/home_page.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@
44

55
{% block body %}
66
<div class="container-fluid">
7-
<div class="row">
8-
<div class="col-sm-10 offset-sm-1">
9-
<h1>DataMade Code Challenge</h1>
10-
</div>
11-
</div>
127
<div class="row">
138
<div class="col-sm-10 offset-sm-1">
149
<div id="map"></div>

0 commit comments

Comments
 (0)