-
Notifications
You must be signed in to change notification settings - Fork 0
/
farmers-mkt-per-capita.html
191 lines (172 loc) · 8.33 KB
/
farmers-mkt-per-capita.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
---
layout: default
custom_css: fm-per-capita
---
<script>
var map;
var infowindow = new google.maps.InfoWindow();
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var customOps = [
{
"featureType": "landscape",
"stylers": [
{"hue": "#FFBB00"},
{"saturation": 43.400000000000006},
{"lightness": 37.599999999999994},
{"gamma": 1}
]
},{
"featureType": "road.highway",
"stylers": [
{"hue": "#FFC200"},
{"saturation": -61.8},
{"lightness": 45.599999999999994},
{"gamma": 1}
]
},{
"featureType": "road.arterial",
"stylers": [
{"hue": "#FF0300"},
{"saturation": -100},
{"lightness": 51.19999999999999},
{"gamma": 1}
]
},{
"featureType": "road.local",
"stylers": [
{"hue": "#FF0300"},
{"saturation": -100},
{"lightness": 52},
{"gamma": 1}
]
},{
"featureType": "water",
"stylers": [
{"hue": "#0078FF"},
{"saturation": -13.200000000000003},
{"lightness": 2.4000000000000057},
{"gamma": 1}
]
},{
"featureType": "poi",
"stylers": [
{"hue": "#00FF6A"},
{"saturation": -1.0989010989011234},
{"lightness": 11.200000000000017},
{"gamma": 1}
]
}
];
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(38.8993488,-77.0145665),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID,
streetViewControl: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById('fm-dc-map'), mapOptions);
var styledMapOptions= {
name:'Custom Style'
};
var customMapType = new google.maps.StyledMapType(
customOps,styledMapOptions
);
map.mapTypes.set(MY_MAPTYPE_ID,customMapType);
map.data.loadGeoJson('https://raw.githubusercontent.com/katerabinowitz/DC-FoodandDrink/master/farmersMarketCompare/Output/DCFM.geojson');
map.data.addListener('click', function(event) {
var FMname = event.feature.getProperty("name");
var address = event.feature.getProperty("address");
var date = event.feature.getProperty("date");
var time = event.feature.getProperty("time");
infowindow.setContent("<div id='iw'> <div id='iw-title'>"+ FMname +"</div>"+ address + "<br>Open: "+ date + "<br> Day & Time: " + time + "</p></div>");
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class='content'>
<h2 id="title"><a href='./farmers-mkt-per-capita.html'>DC #1 in Farmer's Markets per Capita</a></h2>
<hr id='top-line'>
<p id="datePlace">August 31, 2015 </p>
<p class='content'>My husband’s first words to me were basically “Where can I find a good local farmer’s market?” to which I responded MARRY ME. That's how much I like farmer's markets. I’ve been fortunate that wherever I’ve lived in the District a good farmer’s market has never been more than a short Saturday morning jaunt in warmer months. I was curious if I simply gravitated to places near markets or this was more of a universal DC experience, and how DC compared to other American cities. </p>
<p class='graph-title'>Farmer's Markets Per Capita in American Cities</p>
<p class='graph-subtitle'> Number of farmer's markets per 100,000 people</p>
<div id="rankbar">
<svg class="rank"></svg>
<script type="text/javascript">
var chartWidth = 275,
barHeight = 20,
gapBetweenGroups = 40,
spaceForLabels = 80;
var x = d3.scale.linear()
.range([0, chartWidth]);
d3.csv("https://raw.githubusercontent.com/katerabinowitz/DC-FoodandDrink/master/farmersMarketCompare/Output/Capita%20for%20FM.csv", type, function(error, data) {
x.domain([0, d3.max(data, function(d) { return d.percapita; })]);
var chartHeight = barHeight * data.length;
var y = d3.scale.linear()
.range([chartHeight + gapBetweenGroups, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat('')
.tickSize(0)
.orient("left");
// Specify the chart area and dimensions
var rank = d3.select(".rank")
.attr("width", spaceForLabels + chartWidth)
.attr("height", chartHeight);
// Create bars
var bar = rank.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.length))) + ")";
});
// Create rectangles of the correct width
bar.append("rect")
.attr("class", "bar")
.attr("width", function(d) { return x(d.percapita); })
.attr("height", barHeight - 1);
// Add text label in bar
bar.append("text")
.attr("x", function(d) { return x(d.percapita-0.4); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return (d.percapita); });
// Draw labels
bar.append("text")
.attr("class", "label")
.attr("x", function(d) {return - 80; })
.attr("y", barHeight/2)
.attr("dy", ".1em")
.text(function(d) { return d.Ccity; });
rank.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
.call(yAxis);
});
function type(d) {
d.percapita = +d.percapita; // coerce to number
return d;
}
</script>
<p class='graph-subtitle'> Source: USDA Farmer's Market Directory.</p>
</div>
<p class="content">It turns out DC is a farmer’s market paradise. The District has the highest farmer’s markets per capita of large American cities. For every 100,000 people there are just over five. Put another way, there's a market in DC for every 18,832 people.<br>
Not only is DC on top, but by a considerable margin. The next highest is Portland, Oregon, unsurprising given it’s locavore culture, but it has just under four farmer’s markets per 100,000 people.<br>
What brings DC to the top? It's a walkable city with an emphasis on smaller, neighborhood markets as opposed to largescale city center ones. The District's close to farmland with long growing seasons. Federal agencies host their own markets and the well-organized reach of non-profits like <a class="link" target="_blank" href="https://www.freshfarmmarkets.org/">FreshFarm Markets</a> help to increase local food accessibility. Of course, having so many farmer's market per capita does not mean they are accessible to everyone. There is a heavy concentration of farmer's market west of the Anacostia and southeast of Rock Creek Park but outside of those areas markets are rarer and there are in fact none in ward seven.</p>
<p class='content'>Where can all these farmer’s markets be found? Check out the map below to see DC’s farmer’s markets and click on the icon to find dates and times (where available).</p>
<p class='graph-title'>Washington D.C. Farmer's Markets</p>
<p class='graph-subtitle'> Click on an icon to display the farmer's market address, date and time</p>
<div id="fm-dc-map" class="content"></div>
<p class='graph-subtitle'> Source: USDA Farmer's Market Directory.<br>Don't see information about your farmer's market? Be a good data citizen and <a class="link" target="_blank" href="http://search.ams.usda.gov/farmersmarkets/">update the Directory</a> yourself!</p>
<br>
<hr id='end-line'>
<p class='content'><b>Technical notes:</b> Graphics and rankings are based on the <a class="link" target="_blank" href="http://search.ams.usda.gov/farmersmarkets/">USDA Farmer's Market directory</a>, Census population estimates and Census zip code tabulation areas. Large American cities are defined as those with a population over 500,000. You can find complete code for this post<a class='link' target="_blank" href="https://github.com/katerabinowitz"> on my github page.</a></p>
<br><br>
</div>