nl-hugo · July 24, 2018 14:53
diff --git a/.block b/.block
 height: 650
 license: MIT
 scrolling: yes
 border: no
diff --git a/README.md b/README.md
diff --git a/data.R b/data.R
 library(dplyr)
 library(rvest)

 results <- read.csv("results.csv", stringsAsFactors = FALSE)
 races <- read.csv("races.csv", stringsAsFactors = FALSE)
 circuits <- read.csv("circuits.csv", stringsAsFactors = FALSE)
 drivers <- read.csv("drivers.csv", stringsAsFactors = FALSE)

 # weather conditions
 get_rain <- function(url) {
  print(url)
  res <- FALSE
  tryCatch({
    webpage <- read_html(url)
    info <- html_nodes(webpage, ".infobox.vevent") %>% html_table(fill = TRUE) %>% .[[1]]
    w = info[info[,1] == "Weather", 2]
    res <- any(grepl("rain", w, ignore.case=TRUE))
  }, error = function(e) {
    print(e)
  })
  print(res)
  return(res)
 }

 races <- races %>% filter(year >= 2004) %>% rowwise() %>% mutate(rain = get_rain(url))

 results %>% 
  filter(!fastestLapTime == "") %>%
  group_by(raceId) %>%
  filter(fastestLapTime == min(fastestLapTime)) %>%
  filter(fastestLapSpeed == max(fastestLapSpeed)) %>% # tie-braker
  left_join(races, by = "raceId") %>%
  left_join(circuits, by = "circuitId") %>%
  left_join(drivers, by = "driverId") %>%
  arrange(year, round) %>%
  select(raceId, circuitId, year, round, name = name.x, circuit = name.y, rain, country, forename, surname, fastestLapTime, fastestLapSpeed) %>% 
  write.csv(., file = "fastest_lap.csv", row.names = FALSE, fileEncoding = "UTF-8")  
diff --git a/fastest_lap.csv b/fastest_lap.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">
 <style>
 svg {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
 }

 .polygons {
  fill: none;
  pointer-events: all;
 }

 path.domain {
  display: none;
 }

 .y--axis line {
  stroke: #ddd;
  shape-rendering: crispEdges;
 }

 .y--axis text {
  fill: none;
  font-size: 8px;
  padding-right: 5px;
 }

 svg:nth-child(4n-1) .y--axis text {
  fill: #777;
 }
 </style>
 <body>
  
 </body>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>

  const margin = {top: 30, right: 5, bottom: 15, left: 25},
      width = 200 - margin.left - margin.right,
      height = 120 - margin.bottom - margin.top;

  const parseTime = d3.timeParse("%M:%S.%L");

  const x = d3.scaleLinear().range([0, width]),
      y = d3.scaleLinear().range([height, 0]),
      color = d3.scaleSequential(d3.interpolateMagma);

  const voronoi = d3.voronoi()
      .x(d => x(d.year))
      .y(d => y(d.speed))
      .extent([[-5, -5], [width + 5, height + 5]]);

  d3.csv("fastest_lap.csv", type, (error, data) => {
    if (error) return console.error(error);

    const circuits = d3.nest()
      .key(d => d.circuit)
      .sortValues((a, b) => a.speed < b.speed ? 1 : -1)
      .entries(data);

    const svg = d3.select("body").selectAll("svg")
        .data(circuits)
      .enter().append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("id", d => "circuit-" + d.values[0].circuitId)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(data, d => d.year));
    y.domain(d3.extent(data, d => d.speed));
    color.domain(y.domain());

    svg.append("g")
        .attr("class", "y--axis")
        .call(d3.axisLeft(y).tickValues([160, 200, 240]).tickSize(-width));

    svg.append("text")
        .attr("y", -margin.top / 2)
        .attr("dy", "0.35em")
        .text(d => d.key);

    svg.selectAll(".lap")
        .data(d => d.values)
      .enter().append("circle")
        .attr("class", "lap")
        .style("r",  (d,i) => i == 0 ? 3 : 2)
        .attr("cx", d => x(d.year))
        .attr("cy", d => y(d.speed))
        .style("fill", d => d.rain ? color(d.speed) : "white")
        .style("stroke", d => color(d.speed));

    svg.append("text")
        .attr("class", "info")
        .attr("dy", "0.35em")
        .text("");

    svg.selectAll(".polygons")
        .data(d => voronoi.polygons(d.values))
      .enter().append("path")
        .attr("class", "polygons")
        .attr("d", d => d ? "M" + d.join("L") + "Z" : null)
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);
  });

  function mouseover(d) {
    d3.select("#circuit-" + d.data.circuitId)
        .select(".info")
        .text(d.data.year + " " + d.data.surname + " - " + d.data.fastestLapTime);
  }

  function mouseout(d) {
    d3.selectAll(".info").text("");
  }  

  function type(d) {
    d.speed = +d.fastestLapSpeed;
    d.rain = d.rain == "TRUE";
    return d;
  }
 </script> 
diff --git a/thumbnail.png b/thumbnail.png
	library(dplyr)
	library(rvest)

	results <- read.csv("results.csv", stringsAsFactors = FALSE)
	races <- read.csv("races.csv", stringsAsFactors = FALSE)
	circuits <- read.csv("circuits.csv", stringsAsFactors = FALSE)
	drivers <- read.csv("drivers.csv", stringsAsFactors = FALSE)

	# weather conditions
	get_rain <- function(url) {
	print(url)
	res <- FALSE
	tryCatch({
	webpage <- read_html(url)
	info <- html_nodes(webpage, ".infobox.vevent") %>% html_table(fill = TRUE) %>% .[[1]]
	w = info[info[,1] == "Weather", 2]
	res <- any(grepl("rain", w, ignore.case=TRUE))
	}, error = function(e) {
	print(e)
	})
	print(res)
	return(res)
	}

	races <- races %>% filter(year >= 2004) %>% rowwise() %>% mutate(rain = get_rain(url))

	results %>%
	filter(!fastestLapTime == "") %>%
	group_by(raceId) %>%
	filter(fastestLapTime == min(fastestLapTime)) %>%
	filter(fastestLapSpeed == max(fastestLapSpeed)) %>% # tie-braker
	left_join(races, by = "raceId") %>%
	left_join(circuits, by = "circuitId") %>%
	left_join(drivers, by = "driverId") %>%
	arrange(year, round) %>%
	select(raceId, circuitId, year, round, name = name.x, circuit = name.y, rain, country, forename, surname, fastestLapTime, fastestLapSpeed) %>%
	write.csv(., file = "fastest_lap.csv", row.names = FALSE, fileEncoding = "UTF-8")
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">
	<style>
	svg {
	font-family: "Montserrat", sans-serif;
	font-size: 10px;
	}

	.polygons {
	fill: none;
	pointer-events: all;
	}

	path.domain {
	display: none;
	}

	.y--axis line {
	stroke: #ddd;
	shape-rendering: crispEdges;
	}

	.y--axis text {
	fill: none;
	font-size: 8px;
	padding-right: 5px;
	}

	svg:nth-child(4n-1) .y--axis text {
	fill: #777;
	}
	</style>
	<body>

	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	const margin = {top: 30, right: 5, bottom: 15, left: 25},
	width = 200 - margin.left - margin.right,
	height = 120 - margin.bottom - margin.top;

	const parseTime = d3.timeParse("%M:%S.%L");

	const x = d3.scaleLinear().range([0, width]),
	y = d3.scaleLinear().range([height, 0]),
	color = d3.scaleSequential(d3.interpolateMagma);

	const voronoi = d3.voronoi()
	.x(d => x(d.year))
	.y(d => y(d.speed))
	.extent([[-5, -5], [width + 5, height + 5]]);

	d3.csv("fastest_lap.csv", type, (error, data) => {
	if (error) return console.error(error);

	const circuits = d3.nest()
	.key(d => d.circuit)
	.sortValues((a, b) => a.speed < b.speed ? 1 : -1)
	.entries(data);

	const svg = d3.select("body").selectAll("svg")
	.data(circuits)
	.enter().append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("id", d => "circuit-" + d.values[0].circuitId)
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	x.domain(d3.extent(data, d => d.year));
	y.domain(d3.extent(data, d => d.speed));
	color.domain(y.domain());

	svg.append("g")
	.attr("class", "y--axis")
	.call(d3.axisLeft(y).tickValues([160, 200, 240]).tickSize(-width));

	svg.append("text")
	.attr("y", -margin.top / 2)
	.attr("dy", "0.35em")
	.text(d => d.key);

	svg.selectAll(".lap")
	.data(d => d.values)
	.enter().append("circle")
	.attr("class", "lap")
	.style("r", (d,i) => i == 0 ? 3 : 2)
	.attr("cx", d => x(d.year))
	.attr("cy", d => y(d.speed))
	.style("fill", d => d.rain ? color(d.speed) : "white")
	.style("stroke", d => color(d.speed));

	svg.append("text")
	.attr("class", "info")
	.attr("dy", "0.35em")
	.text("");

	svg.selectAll(".polygons")
	.data(d => voronoi.polygons(d.values))
	.enter().append("path")
	.attr("class", "polygons")
	.attr("d", d => d ? "M" + d.join("L") + "Z" : null)
	.on("mouseover", mouseover)
	.on("mouseout", mouseout);
	});

	function mouseover(d) {
	d3.select("#circuit-" + d.data.circuitId)
	.select(".info")
	.text(d.data.year + " " + d.data.surname + " - " + d.data.fastestLapTime);
	}

	function mouseout(d) {
	d3.selectAll(".info").text("");
	}

	function type(d) {
	d.speed = +d.fastestLapSpeed;
	d.rain = d.rain == "TRUE";
	return d;
	}
	</script>