Timelines of bubbles

.block

license: mit

README.md

Built with blockbuilder.org

data.json

[
{
"Date": "01/07/2017",
"Player_full": "Jan Bednarek [Lech Poznan - Southampton] Undisclosed",
"Fee": "5.4",
"Player": "Jan Bednarek",
"Transfer_1": "Lech Poznan - Southampton",
"Transfer": "Lech Poznan to Southampton"
},
{
"Date": "02/07/2017",
"Player_full": "Jay Rodriguez [Southampton - West Brom] £12m",
"Fee": "12",
"Player": "Jay Rodriguez",
"Transfer_1": "Southampton - West Brom",
"Transfer": "Southampton to West Brom"
},
{
"Date": "03/07/2017",
"Player_full": "Michael Keane [Burnley - Everton] Potentially rising to £30m",
"Fee": "30",
"Player": "Michael Keane",
"Transfer_1": "Burnley - Everton",
"Transfer": "Burnley to Everton"
},
{
"Date": "03/07/2017",
"Player_full": "Sandro Ramirez [Malaga - Everton] £5.2m",
"Fee": "5.2",
"Player": "Sandro Ramirez",
"Transfer_1": "Malaga - Everton",
"Transfer": "Malaga to Everton"
},
{
"Date": "03/07/2017",
"Player_full": "Zhang Yuning [Vitesse - West Brom] Undisclosed",
"Fee": "7.9",
"Player": "Zhang Yuning",
"Transfer_1": "Vitesse - West Brom",
"Transfer": "Vitesse to West Brom"
},
{
"Date": "04/07/2017",
"Player_full": "Florian Lejeune [Eibar - Newcastle] Undisclosed (reported £8.7m)",
"Fee": "8.7",
"Player": "Florian Lejeune",
"Transfer_1": "Eibar - Newcastle",
"Transfer": "Eibar to Newcastle"
},
{
"Date": "04/07/2017",
"Player_full": "Tom Ince [Derby - Huddersfield] Undisclosed",
"Fee": "11",
"Player": "Tom Ince",
"Transfer_1": "Derby - Huddersfield",
"Transfer": "Derby to Huddersfield"
},
{
"Date": "05/07/2017",
"Player_full": "Alexandre Lacazette [Lyon- Arsenal] £46.5m up to £52.6m",
"Fee": "52.6",
"Player": "Alexandre Lacazette",
"Transfer_1": "Lyon- Arsenal",
"Transfer": "Lyonto Arsenal"
},
{
"Date": "05/07/2017",
"Player_full": "Steve Mounie [Montpellier - Huddersfield] Undisclosed (reported £11.44m)",
"Fee": "11.44",
"Player": "Steve Mounie",
"Transfer_1": "Montpellier - Huddersfield",
"Transfer": "Montpellier to Huddersfield"
},
{
"Date": "06/07/2017",
"Player_full": "Vincent Iborra [Sevilla - Leicester] Undisclosed (reported £10.5m)",
"Fee": "10.5",
"Player": "Vincent Iborra",
"Transfer_1": "Sevilla - Leicester",
"Transfer": "Sevilla to Leicester"
},
{
"Date": "06/07/2017",
"Player_full": "Roque Mesa [Las Palmas - Swansea] £11m",
"Fee": "11",
"Player": "Roque Mesa",
"Transfer_1": "Las Palmas - Swansea",
"Transfer": "Las Palmas to Swansea"
},
{
"Date": "07/07/2017",
"Player_full": "Jon Walters [Stoke City - Burnley] £3m",
"Fee": "3",
"Player": "Jon Walters",
"Transfer_1": "Stoke City - Burnley",
"Transfer": "Stoke City to Burnley"
},
{
"Date": "07/07/2017",
"Player_full": "Mathias Jorgensen [FC Copenhagen - Huddersfield] Undisclosed",
"Fee": "3.5",
"Player": "Mathias Jorgensen",
"Transfer_1": "FC Copenhagen - Huddersfield",
"Transfer": "FC Copenhagen to Huddersfield"
},
{
"Date": "09/07/2017",
"Player_full": "Antonio Rudiger [Roma - Chelsea] Undisclosed",
"Fee": "34",
"Player": "Antonio Rudiger",
"Transfer_1": "Roma - Chelsea",
"Transfer": "Roma to Chelsea"
},
{
"Date": "10/07/2017",
"Player_full": "Romelu Lukaku [Everton - Manchester United] £75m",
"Fee": "75",
"Player": "Romelu Lukaku",
"Transfer_1": "Everton - Manchester United",
"Transfer": "Everton to Manchester United"
},
{
"Date": "11/07/2017",
"Player_full": "Jack Cork [Swansea - Burnley] £10m",
"Fee": "10",
"Player": "Jack Cork",
"Transfer_1": "Swansea - Burnley",
"Transfer": "Swansea to Burnley"
},
{
"Date": "11/07/2017",
"Player_full": "Dominic Solanke [Chelsea - Liverpool] Undisclosed",
"Fee": "6.5",
"Player": "Dominic Solanke",
"Transfer_1": "Chelsea - Liverpool",
"Transfer": "Chelsea to Liverpool"
},
{
"Date": "13/07/2017",
"Player_full": "Nathaniel Chalobah [Chelsea - Watford] Undisclosed",
"Fee": "6",
"Player": "Nathaniel Chalobah",
"Transfer_1": "Chelsea - Watford",
"Transfer": "Chelsea to Watford"
},
{
"Date": "14/07/2017",
"Player_full": "Kyle Walker [Tottenham - Manchester City] £45m",
"Fee": "45",
"Player": "Kyle Walker",
"Transfer_1": "Tottenham - Manchester City",
"Transfer": "Tottenham to Manchester City"
},
{
"Date": "15/07/2017",
"Player_full": "Tiemoue Bakayoko [Monaco - Chelsea] Undisclosed",
"Fee": "35.2",
"Player": "Tiemoue Bakayoko",
"Transfer_1": "Monaco - Chelsea",
"Transfer": "Monaco to Chelsea"
},
{
"Date": "15/07/2017",
"Player_full": "Douglas Luiz [Vasco Da Gama - Manchester City] Undisclosed",
"Fee": "10",
"Player": "Douglas Luiz",
"Transfer_1": "Vasco Da Gama - Manchester City",
"Transfer": "Vasco Da Gama to Manchester City"
},
{
"Date": "16/07/2017",
"Player_full": "Nolito [Manchester City - Sevilla] Undisclosed (reported £7.9m)",
"Fee": "7.9",
"Player": "Nolito",
"Transfer_1": "Manchester City - Sevilla",
"Transfer": "Manchester City to Sevilla"
},
{
"Date": "19/07/2017",
"Player_full": "Jacob Murphy [Norwich - Newcastle] Undisclosed (reported £12m)",
"Fee": "12",
"Player": "Jacob Murphy",
"Transfer_1": "Norwich - Newcastle",
"Transfer": "Norwich to Newcastle"
},
{
"Date": "19/07/2017",
"Player_full": "Eldin Jakupovic [Hull - Leicester] Undisclosed",
"Fee": "2.25",
"Player": "Eldin Jakupovic",
"Transfer_1": "Hull - Leicester",
"Transfer": "Hull to Leicester"
},
{
"Date": "21/07/2017",
"Player_full": "Andrew Robertson [Hull - Liverpool] £8m up to £10m",
"Fee": "10",
"Player": "Andrew Robertson",
"Transfer_1": "Hull - Liverpool",
"Transfer": "Hull to Liverpool"
},
{
"Date": "21/07/2017",
"Player_full": "Alvaro Morata [Real Madrid - Chelsea] £60m",
"Fee": "60",
"Player": "Alvaro Morata",
"Transfer_1": "Real Madrid - Chelsea",
"Transfer": "Real Madrid to Chelsea"
},
{
"Date": "21/07/2017",
"Player_full": "Javier Manquillo [Atletico Madrid - Newcastle] Undisclosed",
"Fee": "4.5",
"Player": "Javier Manquillo",
"Transfer_1": "Atletico Madrid - Newcastle",
"Transfer": "Atletico Madrid to Newcastle"
},
{
"Date": "22/07/2017",
"Player_full": "Marko Arnautovic [Stoke - West Ham] £20m up to £25m",
"Fee": "25",
"Player": "Marko Arnautovic",
"Transfer_1": "Stoke - West Ham",
"Transfer": "Stoke to West Ham"
},
{
"Date": "23/07/2017",
"Player_full": "Danilo [Real Madrid - Manchester City] £26.5m",
"Fee": "26.5",
"Player": "Danilo",
"Transfer_1": "Real Madrid - Manchester City",
"Transfer": "Real Madrid to Manchester City"
},
{
"Date": "24/07/2017",
"Player_full": "Javier Hernandez [Bayer Leverkusen - West Ham] £16m",
"Fee": "16",
"Player": "Javier Hernandez",
"Transfer_1": "Bayer Leverkusen - West Ham",
"Transfer": "Bayer Leverkusen to West Ham"
},
{
"Date": "24/07/2017",
"Player_full": "Benjamin Mendy [Monaco - Manchester City] £52m",
"Fee": "52",
"Player": "Benjamin Mendy",
"Transfer_1": "Monaco - Manchester City",
"Transfer": "Monaco to Manchester City"
},
{
"Date": "24/07/2017",
"Player_full": "Jairo Riedewald [Ajax - Crystal Palace] Undisclosed",
"Fee": "7.9",
"Player": "Jairo Riedewald",
"Transfer_1": "Ajax - Crystal Palace",
"Transfer": "Ajax to Crystal Palace"
},
{
"Date": "25/07/2017",
"Player_full": "Phil Bardsley [Stoke - Burnley] Undisclosed",
"Fee": "1.5",
"Player": "Phil Bardsley",
"Transfer_1": "Stoke - Burnley",
"Transfer": "Stoke to Burnley"
},
{
"Date": "31/07/2017",
"Player_full": "Nemanja Matic [Chelsea - Manchester United] £40m",
"Fee": "40",
"Player": "Nemanja Matic",
"Transfer_1": "Chelsea - Manchester United",
"Transfer": "Chelsea to Manchester United"
},
{
"Date": "03/08/2017",
"Player_full": "Kelechi Iheanacho [Manchester City - Leicester] £25m",
"Fee": "25",
"Player": "Kelechi Iheanacho",
"Transfer_1": "Manchester City - Leicester",
"Transfer": "Manchester City to Leicester"
},
{
"Date": "07/08/2017",
"Player_full": "Sead Haksabanovic [Halmstads BK - West Ham] Undisclosed (reported £2.7m)",
"Fee": "2.7",
"Player": "Sead Haksabanovic",
"Transfer_1": "Halmstads BK - West Ham",
"Transfer": "Halmstads BK to West Ham"
},
{
"Date": "07/08/2017",
"Player_full": "Davy Propper [PSV Eindhoven - Brighton] Undisclosed (reported £6m)",
"Fee": "6",
"Player": "Davy Propper",
"Transfer_1": "PSV Eindhoven - Brighton",
"Transfer": "PSV Eindhoven to Brighton"
},
{
"Date": "08/08/2017",
"Player_full": "Richarlison [Fluminense - Watford] £11m",
"Fee": "11",
"Player": "Richarlison",
"Transfer_1": "Fluminense - Watford",
"Transfer": "Fluminense to Watford"
},
{
"Date": "08/08/2017",
"Player_full": "Mario Lemina [Juventus - Southampton] £15.4m up to £18.1m",
"Fee": "18.1",
"Player": "Mario Lemina",
"Transfer_1": "Juventus - Southampton",
"Transfer": "Juventus to Southampton"
},
{
"Date": "08/08/2017",
"Player_full": "George Thomas [Coventry - Leicester] Undisclosed",
"Fee": "0.5",
"Player": "George Thomas",
"Transfer_1": "Coventry - Leicester",
"Transfer": "Coventry to Leicester"
},
{
"Date": "09/08/2017",
"Player_full": "Andre Gray [Burnley - Watford] Undisclosed",
"Fee": "18.5",
"Player": "Andre Gray",
"Transfer_1": "Burnley - Watford",
"Transfer": "Burnley to Watford"
},
{
"Date": "11/08/2017",
"Player_full": "Bruno Martins Indi [Porto - Stoke] £7m",
"Fee": "7",
"Player": "Bruno Martins Indi",
"Transfer_1": "Porto - Stoke",
"Transfer": "Porto to Stoke"
},
{
"Date": "15/08/2017",
"Player_full": "Gareth Barry [Everton - West Brom] Undisclosed",
"Fee": "1",
"Player": "Gareth Barry",
"Transfer_1": "Everton - West Brom",
"Transfer": "Everton to West Brom"
},
{
"Date": "16/08/2017",
"Player_full": "Joselu [Stoke - Newcastle] £5m",
"Fee": "5",
"Player": "Joselu",
"Transfer_1": "Stoke - Newcastle",
"Transfer": "Stoke to Newcastle"
},
{
"Date": "16/08/2017",
"Player_full": "Gylfi Sigurdsson [Swansea - Everton] £45m",
"Fee": "45",
"Player": "Gylfi Sigurdsson",
"Transfer_1": "Swansea - Everton",
"Transfer": "Swansea to Everton"
},
{
"Date": "18/08/2017",
"Player_full": "Olarenwaju Kayode [Austria Vienna - Manchester City] Undisclosed",
"Fee": "3.5",
"Player": "Olarenwaju Kayode",
"Transfer_1": "Austria Vienna - Manchester City",
"Transfer": "Austria Vienna to Manchester City"
},
{
"Date": "20/08/2017",
"Player_full": "Jose Izquierdo [Club Brugge - Brighton] Undisclosed (reported £13.5m)",
"Fee": "13.5",
"Player": "Jose Izquierdo",
"Transfer_1": "Club Brugge - Brighton",
"Transfer": "Club Brugge to Brighton"
},
{
"Date": "21/08/2017",
"Player_full": "Chris Wood [Leeds - Burnley] Undisclosed (reported £15m)",
"Fee": "15",
"Player": "Chris Wood",
"Transfer_1": "Leeds - Burnley",
"Transfer": "Leeds to Burnley"
},
{
"Date": "23/08/2017",
"Player_full": "Sam Clucas [Hull - Swansea] Undisclosed",
"Fee": "16.5",
"Player": "Sam Clucas",
"Transfer_1": "Hull - Swansea",
"Transfer": "Hull to Swansea"
},
{
"Date": "23/08/2017",
"Player_full": "Abdelhamid Sabiri [Nuremberg - Huddersfield] Undisclosed",
"Fee": "1.35",
"Player": "Abdelhamid Sabiri",
"Transfer_1": "Nuremberg - Huddersfield",
"Transfer": "Nuremberg to Huddersfield"
},
{
"Date": "23/08/2017",
"Player_full": "Davinson Sanchez [Ajax - Tottenham] Undisclosed",
"Fee": "36",
"Player": "Davinson Sanchez",
"Transfer_1": "Ajax - Tottenham",
"Transfer": "Ajax to Tottenham"
},
{
"Date": "25/08/2017",
"Player_full": "Oliver Burke [RB Leipzig - West Brom] Undisclosed",
"Fee": "13.68",
"Player": "Oliver Burke",
"Transfer_1": "RB Leipzig - West Brom",
"Transfer": "RB Leipzig to West Brom"
},
{
"Date": "29/08/2017",
"Player_full": "Kevin Wimmer [Tottenham - Stoke] £18m",
"Fee": "18",
"Player": "Kevin Wimmer",
"Transfer_1": "Tottenham - Stoke",
"Transfer": "Tottenham to Stoke"
},
{
"Date": "30/08/2017",
"Player_full": "Kieran Gibbs [Arsenal - West Brom] £7m",
"Fee": "7",
"Player": "Kieran Gibbs",
"Transfer_1": "Arsenal - West Brom",
"Transfer": "Arsenal to West Brom"
},
{
"Date": "30/08/2017",
"Player_full": "Juan Foyth [Estudiantes - Tottenham] Reported £8m",
"Fee": "8",
"Player": "Juan Foyth",
"Transfer_1": "Estudiantes - Tottenham",
"Transfer": "Estudiantes to Tottenham"
},
{
"Date": "31/08/2017",
"Player_full": "14:45 - Nahki Wells [Huddersfield - Burnley] £5m",
"Fee": "5",
"Player": "Nahki Wells",
"Transfer_1": "Huddersfield - Burnley",
"Transfer": "Huddersfield to Burnley"
},
{
"Date": "31/08/2017",
"Player_full": "12:33 - Serge Aurier [PSG - Tottenham] £23m",
"Fee": "23",
"Player": "Serge Aurier",
"Transfer_1": "PSG - Tottenham",
"Transfer": "PSG to Tottenham"
},
{
"Date": "31/08/2017",
"Player_full": "12:00 - Alex Oxlade-Chamberlain [Arsenal - Liverpool] £35m",
"Fee": "35",
"Player": "Alex Oxlade-Chamberlain",
"Transfer_1": "Arsenal - Liverpool",
"Transfer": "Arsenal to Liverpool"
},
{
"Date": "31/08/2017",
"Player_full": "18:11 - Marvin Zeegelaar [Sporting Lisbon - Watford] Undisclosed",
"Fee": "2.7",
"Player": "Marvin Zeegelaar",
"Transfer_1": "Sporting Lisbon - Watford",
"Transfer": "Sporting Lisbon to Watford"
},
{
"Date": "31/08/2017",
"Player_full": "Ezequiel Schelotto [Inter Milan - Brighton] £2.75m",
"Fee": "2.7",
"Player": "Ezequiel Schelotto",
"Transfer_1": "Inter Milan - Brighton",
"Transfer": "Inter Milan to Brighton"
},
{
"Date": "31/08/2017",
"Player_full": "Nikola Vlasic [Hajduk Split - Everton] £10m",
"Fee": "10",
"Player": "Nikola Vlasic",
"Transfer_1": "Hajduk Split - Everton",
"Transfer": "Hajduk Split to Everton"
},
{
"Date": "31/08/2017",
"Player_full": "Fernando Llorente [Swansea - Tottenham] Undisclosed (reported £15m)",
"Fee": "15",
"Player": "Fernando Llorente",
"Transfer_1": "Swansea - Tottenham",
"Transfer": "Swansea to Tottenham"
},
{
"Date": "31/08/2017",
"Player_full": "Wilfried Bony [Man City - Swansea] Undisclosed (reported £12m)",
"Fee": "12",
"Player": "Wilfried Bony",
"Transfer_1": "Man City - Swansea",
"Transfer": "Man City to Swansea"
},
{
"Date": "01/09/2017",
"Player_full": "Danny Drinkwater [Leicester - Chelsea] £35m",
"Fee": "35",
"Player": "Danny Drinkwater",
"Transfer_1": "Leicester - Chelsea",
"Transfer": "Leicester to Chelsea"
},
{
"Date": "01/09/2017",
"Player_full": "Mamadou Sakho [Liverpool - Crystal Palace] £26m",
"Fee": "26",
"Player": "Mamadou Sakho",
"Transfer_1": "Liverpool - Crystal Palace",
"Transfer": "Liverpool to Crystal Palace"
}
]

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3"></script>
  <script src="https://unpkg.com/d3-jetpack"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { margin: 0 auto; display: flex;}
    .tick line {
    	stroke: #dbdbdb;
    	stroke-dasharray: 5;
		}
		path.domain {
    	stroke: #dbdbdb;
    	stroke-width: 1px;
		}
		circle.circle {
      fill: #254251;
      stroke: #F9F8F3;
    }
  </style>
</head>

<body>
  <svg id='chart'></svg>
  <script>
		var config = {
      width: 800,
      height: 600,
  		ticksCount: 12,
  		circleRadius: 70,	
    };
    
    var margin = { top: 40, right: 100, bottom: 30, left: 20 },
      width = config.width - margin.left - margin.right,
      height = config.height - margin.top - margin.bottom;

    // Clean up before drawing
    // By brutally emptying all HTML from plot container div
    d3.select('#chart').html('');

    var svg = d3
      .select('#chart')
      .at({
        width: config.width,
        height: config.height,
      })
      .st({ backgroundColor: '#F8F7F1' });

    // g is our main container
    var g = svg.append('g').translate([margin.left, margin.top]);

   
    d3.json('data.json', (err, dataset) => {
  if (err) {
    console.log(err);
  }

    // Constrain to dates
    var parseTime = d3.timeParse('%d/%m/%Y');
    // Map over the data to process it, return a fresh copy, rather than mutating the original data
    var processedData = dataset.map(d =>
      Object.assign({}, d, { date: parseTime(d.Date) })
    );

    /*
     * Scales
     * note that we use give an area to d3's radius parameter
     */
    var area = d3.scaleSqrt().range([3, config.circleRadius]).domain([0, 200]);
    var x = d3
      .scaleLinear()
      .range([0, width])
      .domain([0, processedData.length]);
    x.domain(d3.extent(processedData, d => d.date));

    // X-axis
    g
      .append('g')
      .translate([0, height / 2])
      .call(
        d3
          .axisBottom(x)
          .ticks(config.ticksCount)
          .tickFormat(d3.timeFormat('%d %b'))
          .tickSizeInner(70)
      );

    /*
     * The little things:
     * by sorting this way, the largest bubbles are
     * always at the very back. not data is hidden.
     */
    processedData.sort((x, y) => d3.descending(x.Fee, y.Fee));

    var circles = g.selectAll('circle').data(processedData);
    circles
      .enter()
      .append('circle')
      .at({
        class: 'circle',
        cx: d => x(d.date),
        cy: height * 0.5,
      })
      .transition()
      .attr('r', d => area(d.Fee))
      .st({ opacity: 0.2 });
  });

	
  </script>
</body>