| license : mit | |
| height : 550 |
#Hot Dog Winner Contest#
Este é uma versão do gráfico de barras construída com D3.js sobre os ganhadores de uma competição de quem come mais cachorro quente. Os dados utilizados são os disponibilizados por Nathan Yau, no livro Viualize Isto (Vizualize This). Maiores informações podem ser obtidas neste site
| Year | Winner | Dogs eaten | Country | New record | |
|---|---|---|---|---|---|
| 1980 | Paul Siederman & Joe Baldini | 9.1 | United States | 0 | |
| 1981 | Thomas DeBerry | 11 | United States | 0 | |
| 1982 | Steven Abrams | 11 | United States | 0 | |
| 1983 | Luis Llamas | 19.5 | Mexico | 0 | |
| 1984 | Birgit Felden | 9.5 | Germany | 0 | |
| 1985 | Oscar Rodriguez | 11.75 | United States | 0 | |
| 1986 | Mark Heller | 15.5 | United States | 0 | |
| 1987 | Don Wolfman | 12 | United States | 0 | |
| 1988 | Jay Green | 14 | United States | 0 | |
| 1989 | Jay Green | 13 | United States | 0 | |
| 1990 | Mike DeVito | 16 | United States | 0 | |
| 1991 | Frank Dellarosa | 21.5 | United States | 1 | |
| 1992 | Frank Dellarosa | 19 | United States | 0 | |
| 1993 | Mike DeVito | 17 | United States | 0 | |
| 1994 | Mike DeVito | 20 | United States | 0 | |
| 1995 | Edward Krachie | 19.5 | United States | 0 | |
| 1996 | Edward Krachie | 22.25 | United States | 1 | |
| 1997 | Hirofumi Nakajima | 24.5 | Japan | 1 | |
| 1998 | Hirofumi Nakajima | 19 | Japan | 0 | |
| 1999 | Steve Keiner | 20.25 | United States | 0 | |
| 2000 | Kazutoyo "The Rabbit" Arai | 25.13 | Japan | 1 | |
| 2001 | Takeru Kobayashi | 50 | Japan | 1 | |
| 2002 | Takeru Kobayashi | 50.5 | Japan | 1 | |
| 2003 | Takeru Kobayashi | 44.5 | Japan | 0 | |
| 2004 | Takeru Kobayashi | 53.5 | Japan | 1 | |
| 2005 | Takeru Kobayashi | 49 | Japan | 0 | |
| 2006 | Takeru "Tsunami" Kobayashi | 53.75 | Japan | 1 | |
| 2007 | Joey Chestnut | 66 | United States | 1 | |
| 2008 | Joey Chestnut | 59 | United States | 0 | |
| 2009 | Joey Chestnut | 68 | United States | 1 | |
| 2010 | Joey Chestnut | 54 | United States | 0 |
| <!DOCTYPE> | |
| <html> | |
| <head> | |
| <title>Bar chart</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="550"></svg> | |
| <script> | |
| var svg = d3.select('svg'), | |
| margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = +svg.attr("width") - margin.left - margin.right, | |
| height = +svg.attr("height") - margin.top - margin.bottom, | |
| group_chart = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var formatYear = d3.timeFormat('%Y'), | |
| parseTime = d3.timeParse("%Y"); | |
| var y_scale = d3.scaleLinear().range([height, 0]), | |
| x_scale = d3.scaleBand().rangeRound([0, width]).paddingInner(0.05).align(0.1); | |
| d3.csv('hot-dog-contest-winners.csv',type, (err, data) =>{ | |
| if(err) throw err; | |
| y_scale.domain([0, d3.max(data, d => d['Dogs eaten']) ]); | |
| // x_scale.domain(d3.extent(data, d => d['Year'] )); | |
| x_scale.domain( data.map( d => d['Year'])); | |
| // debugger; | |
| group_chart.append('g') | |
| .attr('class', 'data') | |
| .selectAll('rect') | |
| .data(data) | |
| .enter() | |
| .append('rect') | |
| .attr('fill', d => { | |
| if(d['New record']){ | |
| return 'seagreen'; | |
| }else{ | |
| return 'gray'; | |
| } | |
| }) | |
| .attr('x', d => x_scale(d['Year'])) | |
| .attr('y', d => { | |
| return y_scale(d['Dogs eaten']); | |
| }) | |
| .attr('width', d => x_scale.bandwidth() ) | |
| .attr('height', d => { | |
| return height - y_scale(d['Dogs eaten']); | |
| } ); | |
| group_chart.append('g') | |
| .attr('class', 'axis axis--y') | |
| .call(d3.axisLeft(y_scale)); | |
| group_chart.append('g') | |
| .attr('class','axis axis--x') | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x_scale)); | |
| }); | |
| function type(line){ | |
| // line['Year'] = parseTime(line['Year']); | |
| line['Dogs eaten'] = +line['Dogs eaten']; | |
| line['New record'] = +line['New record']; | |
| return line; | |
| } | |
| </script> | |
| </body> | |
| </html> |