-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDDD-in-DC.html
190 lines (164 loc) · 9.15 KB
/
DDD-in-DC.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
---
layout: default
custom_css: DDD
---
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class='content'>
<h2 id="title"><a href='./DDD-in-DC.html'>What's Guy Fieri's Problem with DC?</a></h2>
<hr id='top-line'>
<p id="datePlace">September 23, 2015 </p>
<p class='content'>Guilty pleasure confession: One of my favorite shows is <a class='link' target="_blank" href="http://www.foodnetwork.com/shows/diners-drive-ins-and-dives.html">Diners, Drive-Ins and Dives</a>. If you’re uninitiated it’s a show where <a class='link' target="_blank" href="https://www.google.com/search?q=google+images+guy+fieri&espv=2&biw=1274&bih=679&tbm=isch&tbo=u&source=univ&sa=X&ved=0CBwQsARqFQoTCOv5uNjxi8gCFcV7PgodDCQC_g">90’s emoji Guy Fieri</a> visits restaurants around the country. I can’t be sure what it is exactly - how Fieri bleaches only the inner bit of his goatee or unironically uses phrases like “that’s killer!” and “off the hook!” - but if I’m in a hotel room there’s an 85% chance that show is on.</p>
<p class='graph-title'>Guy Fieri Diner, Drive-in and Dives Visits</p>
<p class='graph-subtitle'>Number of times a city is featured on Diners, Drive-ins and Dives</p>
<div id="dddbar1">
<svg class="ddd"></svg>
<script>
(function() {
var margin = {top: 20, right: 20, bottom: 60, left: 35},
width = 650 - margin.left - margin.right,
height = 300- margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.outerTickSize(0)
.orient("left");
var ddd = d3.select(".ddd")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("https://raw.githubusercontent.com/katerabinowitz/DC-FoodandDrink/master/DDDinDC/cityDDDsum.csv", type, function(error, data) {
x.domain(data.map(function(d) { return d.City; }));
y.domain([0, d3.max(data, function(d) { return d.Resturant; })]);
ddd.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(60)")
.style("text-anchor", "start");;
ddd.append("g")
.attr("class", "y axis")
.call(yAxis);
ddd.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.style("fill", function(d, i){return d.City=="Washington"?"orange":"#53CFCF";})
.attr("x", function(d) { return x(d.City); })
.attr("y", function(d) { return y(d.Resturant); })
.attr("height", function(d) { return height - y(d.Resturant); })
.attr("width", x.rangeBand());
});
function type(d) {
d.Resturant = +d.Resturant;
return d;
}
})();
</script>
<p class='graph-subtitle'> Source: <a class='link' target="_blank" href="http://ddd-and-yelp.mybluemix.net/"> Restaurants of Diners Drive-ins and Dives</a> by <a class='link' target="_blank" href="https://twitter.com/MaggieCriqui"> Maggie Criqui</a>.</p>
</div>
<p class="content">After an embarrassing number of hours spent with Food Network however, I've become disappointed with how rarely Guy Fieri visits my city. Across 22 seasons Guy Fieri has been to DC only four times. And it’s not like he hasn’t been in the neighborhood. He’s been to fifteen Baltimore restaurants and visited Virginia Beach, a city two-thirds the size of DC, seven times. So what’s Guy Fieri’s DC problem? <br><br>For one, he’s not visiting the best of the DC dining scene. The average Yelp rating for DC restaurants he’s visited is 3.625, lower than most other cities he’s visited and lower than the overall DC restaurant average Yelp rating.</p>
<div id="dddbar2">
<p class='graph-title'>Guy Fieri Diner, Drive-in and Dives Ratings by City</p>
<p class='graph-subtitle'>Average Yelp rating for restaurants featured by city</p>
<svg class="ddd2"></svg>
<script>
(function() {
var margin = {top: 20, right: 20, bottom: 60, left: 35},
width = 650 - margin.left - margin.right,
height = 300- margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.outerTickSize(0)
.orient("left");
var chart = d3.select(".ddd2")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("https://raw.githubusercontent.com/katerabinowitz/DC-FoodandDrink/master/DDDinDC/cityDDDsum.csv", type, function(error, data) {
x.domain(data.map(function(d) { return d.City; }));
y.domain([0, d3.max(data, function(d) { return d.Rating; })]);
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(60)")
.style("text-anchor", "start");;
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
chart.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.style("fill", function(d, i){return d.City=="Washington"?"orange":"#53CFCF";})
.attr("class", "bar")
.attr("x", function(d) { return x(d.City); })
.attr("y", function(d) { return y(d.Rating); })
.attr("height", function(d) { return height - y(d.Rating); })
.attr("width", x.rangeBand());
chart.append("line")
.style("stroke", "orange")
.attr("x1", 0)
.attr("y1", y(3.625))
.attr("x2", width)
.attr("y2", y(3.625));
});
function type(d) {
d.Rating = +d.Rating;
return d;
}
})();
</script>
<p class='graph-subtitle'> Source: <a class='link' target="_blank" href="http://ddd-and-yelp.mybluemix.net/"> Restaurants of Diners Drive-ins and Dives</a> by <a class='link' target="_blank" href="https://twitter.com/MaggieCriqui"> Maggie Criqui</a>.</p>
</div>
<p class='content'>But I think there’s more to it and the lack of Diner, Drive-ins and Dives visits actually reflects a few things about the DC food scene. Much of the show is dedicated to community favorite cheap eats, mom and pop diners, and cultural food institutions. DC frankly doesn't have a high proportion of any of these due to it's more transient population and traditionally more of a focus on lawyers who lunch as opposed to casual cheap eats. <br><br>That has been changing as more people stay in the District longer and a more vibrant food culture takes hold through food trucks like Puddin', cheap eats like Fast Gourmet and nationally acclaimed spots like Rose's Luxury.<br><br>Of course this isn't to say DC lacks great food. As Maggie Criqui shows, <a class='link' target="_blank" href="http://ddd-and-yelp.mybluemix.net/">Guy Fieri's unending restaurant enthusiasm doesn't exactly hold up to Yelp</a>. And on the upside, at least we know for sure Guy Fieri won’t be opening one of his <a class="link" target="_blank" href="http://www.nytimes.com/2012/11/14/dining/reviews/restaurant-review-guys-american-kitchen-bar-in-times-square.html?_r=0">infamous restaurants</a> here anytime soon.</p>
<p class='content'> Want to take a tour of the spots Diners, Drive-ins and Dives has visited in the area? Check out the map below:</p>
<div class="content dddmap">
<div class='content' id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZGF0YWxlbnNkYyIsImEiOiJjaWVnOGttYnMwMDBqc2htM2ZmcjZ4NmZxIn0.9iGQPNKsl1jtP5KriDm3wQ';
var map =L.mapbox.map('map', 'mapbox.streets')
.setView([38.9, -77.05], 11)
var featureLayer = L.mapbox.featureLayer()
.loadURL('https://raw.githubusercontent.com/katerabinowitz/DC-FoodandDrink/master/DDDinDC/ddd-dmv.geojson')
.addTo(map);
featureLayer.on('ready', function() {
featureLayer.eachLayer(function(layer) {
var content = '<p class="content">Restaurant: ' + layer.feature.properties.name + '<br>' +
'Season: ' + layer.feature.properties.season + '<br>' +
'Episode: ' + layer.feature.properties.episode + '</p>';
layer.bindPopup(content);
});
})
.addTo(map);
</script>
</div>
<br><br>
<hr id='end-line'>
<p class='content'><b>Technical notes:</b> Data and graphics shown are based off <a class='link' target="_blank" href="http://ddd-and-yelp.mybluemix.net/"> Restaurants of Diners Drive-ins and Dives</a> by <a class='link' target="_blank" href="https://twitter.com/MaggieCriqui"> Maggie Criqui</a>, which was presented at great local group <a class='link' target="_blank" href="http://dc.hackandtell.org/">DC Hack and Tell</a>. 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>