IconicImagery · April 1, 2015 12:33
diff --git a/Doctor Who EARTH Time Travel Journeys_LE.csv b/Doctor Who EARTH Time Travel Journeys_LE.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Doctor Who Earth Time Travel Journeys</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
    
    
    <style type="text/css">
      body {
        background-color: #E0E1DD;
        margin: 0;
        font-family: Helvetica;
      }

      rect {
        fill: #AC98DB;
      }

      .barLabel {
        font-size: 12px;
        fill: #333333;
        text-anchor: end;
      }

      .barValue {
        font-size: 12px;
        fill: #333333;
      }

      h1, h2, p {
        position: relative;
        left: 10px;
        color: #333333;
      }

      .hover rect {
        fill: #A5D867;
        transition: fill 0.2s;
      }

      .hover text {
        font-weight: bold;
        font-size: 14px;
      }

      
      
    </style>
  </head>
  <body>
  
    <script type="text/javascript">   
        
      var  margin = {top: 10, right: 10, bottom: 0, left: 5};
        

      var body = d3.select('body');

      body.append('h1')
        .text('Doctor Who Earth Time Travel Journeys')
      
       body.append('h2')
        .text('Hartnell (DW1) through Smith (DW11)')

      body.append('p')
        .text('This is a test page to create a Horizontal Bar Chart and upload my Doctor Who CSV data using D3')
      
      
     //Create the SVG
       

      var svg = d3.select('body').append('svg'),
          barHeight = 10,
          barSpace = 5
         
      
      svg.attr('width', 1000)
          .attr('height', 2000)
      
      
     
      //Load in contents of CSV file
      
      d3.csv('Doctor Who EARTH Time Travel Journeys_LE.csv', function(data) {
        console.log(data);

 
      //Sort on data in descending order named in a,b
          
        data.sort(function(a,b) {
          return d3.descending(a.TimeJumpYrs, b.TimeJumpYrs)
        });

          
      //Sort on data in descending order named in a,b        
          
        svg.selectAll('g')
        .data(data)
        .enter()
        .append('g')
        
        
        
      //Create the Horizontal Bar chart

        var barGroup = d3.selectAll('g');
          
        barGroup.append('rect')
          .attr({
            'width': function(d) { return  d.TimeJumpYrs * 20; },
            'height': barHeight,
            'x': 150,
            'y': function(d, i) { return margin.top + (barHeight + barSpace) * i; }
          })

        barGroup.append('text')
          .text(function(d) { return d.EpTitle; })
          .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
          .attr('class', 'barLabel')
          .attr('x', 100)

        barGroup.append('text')
          .attr('class', 'barValue')
          .attr('x', function(d) { return (d.TimeJumpYrs * 20) + 155; } )
          .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
          .text(function(d) { return d.TimeJumpYrs  })
        
     
        //When cursor hovers over the Bar, the Bar will light up Lime Green and the Bar Labels go Boldface

        barGroup.attr('cursor', 'pointer')
        barGroup.on('mouseover', function() { 
          d3.select(this)
            .classed('hover', true)
         })

        barGroup.on('mouseout', function() { 
          d3.select(this)
            .classed('hover', false)
         })

    

      });
    </script>

  </body>
 </html>
Season	DWactor	Generation	Episode	EpType	EpTitle	DateFrom	DateTo	TimeJumpYrs	Place	Locale
1	Hartnell	Classic	1	Regular	An Unearthly Child	1963	-100000	-101,963	England	London
1	Hartnell	Classic	4	Regular	Marco Polo	-13000000000	1289	13,000,001,289	China	Pamir
1	Hartnell	Classic	6	Regular	The Aztecs	1289	1450	2,739	Mexico	Santa Cecilia Acatitlan
1	Hartnell	Classic	8	Regular	The Reign of Terror	2700	1794	-906	France	Paris
1	Hartnell	Classic	10	Regular	The Dalek Invasion of Earth	1963	2164	201	England	London
1	Hartnell	Classic	12	Regular	The Romans	2493	64	-2,429	Italy	Rome
1	Hartnell	Classic	14	Regular	The Crusade	1965	1190	-775	Palestine	Jaffa
1	Hartnell	Classic	16	Regular	The Chase	1965	1966	1	USA	New York City
1	Hartnell	Classic	16	Regular	The Chase	1966	1872	-94	Atlantic Ocean	Azores (37°01'N, 25°01'W)
1	Hartnell	Classic	16	Regular	The Chase	1872	1996	124	Africa	Ghana
1	Hartnell	Classic	16	Regular	The Chase	1966	1965	-1	England	London
1	Hartnell	Classic	17	Regular	The Time Meddler	1965	1066	-899	England	Northumberland (Northumbria)
1	Hartnell	Classic	20	Regular	The Myth Makers	3999	-1200	-2,489	Turkey (Troy)	Hisarlik (Troy)
1	Hartnell	Classic	21	Regular	The Daleks' Master Plan	4000	4000	0	England (Central City)	Southern England (Central City)
1	Hartnell	Classic	21	Regular	The Daleks' Master Plan	4000	1965	-735	England	Liverpool
1	Hartnell	Classic	21	Regular	The Daleks' Master Plan	1965	1966	1	England	London (New Year's Day)
1	Hartnell	Classic	21	Regular	The Daleks' Master Plan	1966	1965	1	England	London (The Oval)
1	Hartnell	Classic	21	Regular	The Daleks' Master Plan	1965	1928	-37	USA	Los Angeles (Hollywood)
1	Hartnell	Classic	21	Regular	The Daleks' Master Plan	4000	-2500	-6,500	Egypt	Giza
1	Hartnell	Classic	22	Regular	The Massacre of St Bartholomew's Eve	4000	1572	-2,428	France	Paris
1	Hartnell	Classic	25	Regular	The Gunfighters	10000700	1881	-9,998,819	USA	Tombstone (Arizona)
1	Hartnell	Classic	27	Regular	The War Machines	1881	1966	85	England	London
1	Hartnell	Classic	28	Regular	The Smugglers	1966	1671	-295	England	Nanjizal Bay (Cornwall)
1	Hartnell	Classic	29	Regular	The Tenth Planet	1986	1986	0	Antartica	South Pole
2	Troughton	Classic	31	Regular	The Highlanders	1986	1746	-240	Scotland	Culloden
2	Troughton	Classic	35	Regular	The Faceless Ones	2070	1966	-104	England	Crawley West Sussex (Gatwick Airport)
2	Troughton	Classic	36	Regular	The Evil Of The Daleks	1966	1966	0	England	Crawley West Sussex (Gatwick Airport)
2	Troughton	Classic	36	Regular	The Evil Of The Daleks	1966	1866	-100	England	Harrow Weald, Middlesex
2	Troughton	Classic	38	Regular	The Abominable Snowmen	1966	1935	-31	Tibet	Himalayas
2	Troughton	Classic	41	Regular	The Web Of Fear	1930	1970	40	England	London
2	Troughton	Classic	42	Regular	Fury From The Deep	1970	1967	-3	North Sea	(56.0000° N, 3.0000° E)
2	Troughton	Classic	46	Regular	The Invasion	2000	1970	-30	England	London
2	Troughton	Classic	48	Regular	The Seeds Of Death	1969	2190	221	England	London
2	Troughton	Classic	61	Regular	The War Games	1969	1746	-223	Scotland	Culloden
3	Pertwee	Classic	51	Regular	Spearhead from Space	1970	1990	20	England	London
3	Pertwee	Classic	55	Regular	Terror of the Autons	1990	1971	-19	England	London
3	Pertwee	Classic	60	Regular	Day of the Daleks	1972	2100	128	England	Northamtopnshire
3	Pertwee	Classic	64	Regular	The Time Monster	1972	-2000	-4,700	Greece (Atlantis)	Santorini (Atlantis)
3	Pertwee	Classic	64	Regular	The Time Monster	-2000	1972	3,972	Greece (Atlantis)	Santorini (Atlantis)
3	Pertwee	Classic	69	Regular	The Green Death	2540	1973	-567	Wales	Llanfairfach
3	Pertwee	Classic	70	Regular	The Time Warrior	1975	1275	-700	England	Castleton Dorset (Wessex)
3	Pertwee	Classic	71	Regular	Invasion of The Dinosaurs	1200	1974	774	England	London
4	Tom Baker	Classic	82	Regular	Pyramids of Mars	1974	1911	-63	England	East End Berkshire
4	Tom Baker	Classic	83	Regular	The Android Invasion	1911	1980	69	England	Tubney Wood Oxfordshire
4	Tom Baker	Classic	84	Regular	The Seeds of Doom	1980	1980	0	Antartica	South Pole
5	Tom Baker	Classic	85	Regular	The Seeds of Doom	1980	1980	0	England	Athelhampton Dorset
4	Tom Baker	Classic	86	Regular	The Masque of Mandragora	1980	1492	-488	Italy	San Martino
4	Tom Baker	Classic	87	Regular	The Hand of Fear	1980	1980	0	England	Gloucestershire
4	Tom Baker	Classic	91	Regular	The Talons of Weng-Chiang	1889	1889	0	England	London
4	Tom Baker	Classic	92	Regular	Horror of Fang Rock	1900	1900	0	England	Isles of Scilly
4	Tom Baker	Classic	94	Regular	Image of the Fendahl	1977	1977	0	England	East End Hampshire
4	Tom Baker	Classic	105	Regular	City of Death	-140000000	1982	140,001,982	France	Paris
5	Tom Baker	Classic	106	Regular	City of Death	1979	1505	-474	Italy	Florence
5	Davison	Classic	119	Regular	The Visitation	1666	1666	0	England	London
5	Davison	Classic	120	Regular	Black Orchid	1925	1925	0	England	Buckinghamshire
5	Davison	Classic	121	Regular	Earthshock	2486	2526	40	England	Hertfordshire
5	Davison	Classic	122	Regular	Time-Flight	-140000000	1979	140,001,979	England	London
5	Davison	Classic	123	Regular	Arc of Infinity	1978	1983	5	The Netherlands	Amsterdam
5	Davison	Classic	125	Regular	Mawdryn Undead	-1017	1983	3,000	England	London
5	Davison	Classic	128	Regular	The King's Demons	1215	1982	767	England	Cambridgeshire
5	Davison	Classic	130	Regular	Warriors of the Deep	2084	2084	0	England	Marchwood Hampshire
5	Davison	Classic	131	Regular	The Awakening	1643	1983	340	England	Dorset
6	Davison	Classic	132	Regular	The Awakening	1644	1984	340	England	Hampshire
5	Davison	Classic	133	Regular	Resurrection of the Daleks	1984	1984	0	England	London
6	Colin Baker	Classic	137	Regular	Attack of the Cybermen	1985	2530	545	England	London
6	Colin Baker	Classic	139	Regular	The Mark of the Rani	1822	1822	0	England	Blists Hill Shropshire (Killingworth)
6	Colin Baker	Classic	141	Regular	Timelash	1885	1885	0	Scotland	Inverness
7	McCoy	Classic	146	Regular	Delta and the Bannermen	1928	4687	2,759	Wales	Llandrindod Wells
7	McCoy	Classic	148	Regular	Remembrance of the Daleks	1963	1963	0	England	London
7	McCoy	Classic	150	Regular	Silver Nemesis	1988	1638	-350	England	Windsor
7	McCoy	Classic	150	Regular	Silver Nemesis	1638	1988	350	England	Windsor
7	McCoy	Classic	150	Regular	Silver Nemesis	1988	1638	-350	England	Windsor
7	McCoy	Classic	150	Regular	Silver Nemesis	1638	1988	350	England	Windsor
7	McCoy	Classic	150	Regular	Silver Nemesis	1988	1638	-350	England	Windsor
7	McCoy	Classic	150	Regular	Silver Nemesis	1638	1988	350	England	Windsor
7	McCoy	Classic	150	Regular	Silver Nemesis	1988	1638	-350	England	Windsor
7	McCoy	Classic	152	Regular	Battlefield	793	1993	1,200	England	Fulmer Buckinghamshire (Carbury)
7	McCoy	Classic	153	Regular	Ghost Light	1883	1983	100	England	Perivale Ealing Middlesex
7	McCoy	Classic	154	Regular	The Curse of Fenric	1943	1943	0	England	Northumberland
7	McCoy	Classic	155	Regular	Survival	1989	1989	0	England	Perivale Ealing Middlesex
8	McGann	MOVIE	156	MOVIE	Doctor Who	1999	1999	0	USA	San Francisco
9	Eccleston	NEW	157	Regular	Rose	1883	2005	122	England	London
9	Eccleston	NEW	159	Regular	The Unquiet Dead	1869	1869	0	Wales	Cardiff
9	Eccleston	NEW	160	Regular	Aliens Of London	2006	2006	0	England	London
9	Eccleston	NEW	161	Regular	Dalek	2012	2012	0	USA	Utah
9	Eccleston	NEW	163	Regular	Fathers Day	2005	1987	-18	England	London
9	Eccleston	NEW	164	Regular	The Empty Child	2005	1941	-64	England	London
9	Eccleston	NEW	165	Regular	Boom Town	2005	2006	1	Wales	Cardiff
9	Tennant	NEW	166	SPECIAL	The Christmas Invasion	2006	2006	0	England	London
10	Tennant	NEW	167	Regular	New Earth	2006	5000000023	4,999,998,017	USA	New York City (New New New York)
10	Tennant	NEW	168	Regular	Tooth and claw	2006	1879	-127	Scotland	Balmoral
10	Tennant	NEW	169	Regular	School Reunion	2007	2007	0	England	London
10	Tennant	NEW	170	Regular	The Girl in the Fireplace	1727	1744	17	France	Paris
10	Tennant	NEW	170	Regular	The Girl in the Fireplace	1744	1753	9	France	Versailles
10	Tennant	NEW	170	Regular	The Girl in the Fireplace	1753	1758	5	France	Versailles
10	Tennant	NEW	170	Regular	The Girl in the Fireplace	1758	1764	6	France	Versailles
10	Tennant	NEW	171	Regular	Rise of the Cybermen	2007	2007	0	England	London (Parallel)
10	Tennant	NEW	173	Regular	The Idiot's Lantern	1953	1953	0	England	London
10	Tennant	NEW	177	Regular	Fear her	2012	2012	0	England	London
10	Tennant	NEW	180	Special	the Runaway Bride	2007	-5000000000	-5,000,002,007	England	London
10	Tennant	NEW	182	Regular	The Shakespeare Code	2008	1599	-409	England	London
10	Tennant	NEW	183	Regular	Gridlock	5000000053	5000000053	0	USA	New York City (New New New York)
10	Tennant	NEW	184	Regular	Daleks in Manhattan	1930	1930	0	USA	New York City
10	Tennant	NEW	186	Regular	The Lazarus Experiment	2008	2008	0	England	London
10	Tennant	NEW	188	Regular	Human Nature	1913	1913	0	England	Farringham
10	Tennant	NEW	190	Regular	Blink	2007	1920	-87	England	Hull
10	Tennant	NEW	190	Regular	Blink	2007	1969	-38	England	London
10	Tennant	NEW	190	Regular	Blink	2007	2008	1	England	London
10	Tennant	NEW	191	Regular	Utopia	2008	1E+14	100,000,000,000,000	Wales	Cardiff
10	Tennant	NEW	192	Regular	The Sound of Drums	1E+14	2008	-100,000,000,000,000	England	London
10	Tennant	NEW	193	Regular	Last of the Time Lords	2009	2008	-1	England	London
10	Tennant	NEW	195	SPECIAL	The Voyage of the Damned	2008	2008	0	England	London
10	Tennant	NEW	197	Regular	The Fires of Pompeii	2009	79	-1,930	Italy	Pompei (Pompeii Roman Empire)
10	Tennant	NEW	200	Regular	The Poison Sky	2009	2009	0	England	London
10	Tennant	NEW	202	Regular	The Unicorn and the Wasp	1926	1926	0	England	Harrogate
10	Tennant	NEW	206	Regular	Turn Left	2007	2008	1	England	London
11	Tennant	NEW	207	Regular	The Stolen Earth	2009	2009	0	England	London
12	Tennant	NEW	208	Regular	Journey's End	2009	2009	0	England	London
10	Tennant	NEW	209	SPECIAL	The next Doctor	1851	1851	0	England	London
10	Tennant	NEW	210	SPECIAL	Planet of the Dead	2009	2009	0	England	London
11	Tennant	NEW	210	SPECIAL	Planet of the Dead	2009	2010	1	England	London
10	Tennant	NEW	212	SPECIAL	The End of Time - Part 1	2009	2009	0	England	London
10	Tennant	NEW	213	SPECIAL	The End of Time - Part 2	2009	2010	1	England	London
11	Smith	NEW	214	Regular	The Eleventh Hour	1999	1996	-3	England	London
11	Smith	NEW	214	Regular	The Eleventh Hour	1996	2008	12	England	Gloucestershire (Leadworth)
11	Smith	NEW	214	Regular	The Eleventh Hour	2008	2010	2	England	Gloucestershire (Leadworth)
11	Smith	NEW	216	Regular	Victory of the Daleks	1941	1941	0	England	London
11	Smith	NEW	218	Regular	Flesh and Stone	5000	2010	-2,990	England	Gloucestershire (Leadworth)
11	Smith	NEW	219	Regular	The Vampires of Venice	2010	2010	0	England	Gloucestershire (Leadworth)
11	Smith	NEW	219	Regular	The Vampires of Venice	2010	1580	-430	Italy	Venice
11	Smith	NEW	220	Regular	Amy's Choice	2015	2010	-5	England	Gloucestershire (Leadworth)
11	Smith	NEW	221	Regular	The Hungry Earth	2020	2020	0	Wales	Cwmtaff
11	Smith	NEW	222	Regular	Cold Blood	2020	2020	0	Wales	Cwmtaff
11	Smith	NEW	223	Regular	Vincent and the Doctor	2010	2010	0	France	Paris
11	Smith	NEW	223	Regular	Vincent and the Doctor	2010	1890	-120	France	Auvers-sur-Oise
11	Smith	NEW	223	Regular	Vincent and the Doctor	1890	2010	120	France	Paris
11	Smith	NEW	223	Regular	Vincent and the Doctor	2010	1890	-120	France	Auvers-sur-Oise
11	Smith	NEW	223	Regular	Vincent and the Doctor	1890	2010	120	France	Paris
12	Smith	NEW	224	Regular	The Lodger	2010	2010	0	England	Colchester
11	Smith	NEW	225	Regular	The Pandorica Opens	5145	102	-5,043	England	Stonehenge
11	Smith	NEW	226	Regular	The Big Bang	1996	1996	0	England	Gloucestershire (Leadworth)
11	Smith	NEW	226	Regular	The Big Bang	1996	102	-1,894	England	Stonehenge
11	Smith	NEW	226	Regular	The Big Bang	102	1996	1,894	England	London
11	Smith	NEW	226	Regular	The Big Bang	1996	2010	14	England	Colchester
11	Smith	NEW	226	Regular	The Big Bang	2010	1996	-14	England	Gloucestershire (Leadworth)
11	Smith	NEW	226	Regular	The Big Bang	1996	2010	14	England	Gloucestershire (Leadworth)
11	Smith	NEW	228	Regular	The Impossible Astronaut	2011	2011	0	England	London
11	Smith	NEW	228	Regular	The Impossible Astronaut	2011	1969	-42	USA	Lake Powell Utah (Lake Silencio)
11	Smith	NEW	229	Regular	Day of the Moon	1969	1970	1	USA	Valley of the Gods Utah
12	Smith	NEW	229	Regular	Day of the Moon	1969	1970	1	USA	Cape Kennedy Florida
11	Smith	NEW	230	Regular	The Curse of the Black Spot	1699	1699	0	Earth	South Atlantic Ocean
11	Smith	NEW	232	Regular	The Rebel Flesh	2100	2100	0	England	Isles of Scilly
11	Smith	NEW	233	Regular	The Almost People	2100	2100	0	England	Isles of Scilly
11	Smith	NEW	235	Regular	Let's Kill Hitler	5100	1938	-3,162	Germany	Berlin
11	Smith	NEW	236	Regular	Night Terrors	2011	2011	0	England	Bristol
11	Smith	NEW	238	Regular	The God Complex	2011	2011	0	England	Gloucestershire (Leadworth)
11	Smith	NEW	239	Regular	Closing Time	2011	2011	0	England	Colchester
11	Smith	NEW	240	Regular	The Wedding of River Song	5100	1969	-3,131	USA	Utah
11	Smith	NEW	241	SPECIAL	The Doctor, the Widow and the Wardrobe	1938	1938	0	England	London
11	Smith	NEW	241	SPECIAL	The Doctor, the Widow and the Wardrobe	1938	1941	3	England	Dorset
11	Smith	NEW	241	SPECIAL	The Doctor, the Widow and the Wardrobe	5345	1938	-3,407	England	Dorset
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Doctor Who Earth Time Travel Journeys</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>


	<style type="text/css">
	body {
	background-color: #E0E1DD;
	margin: 0;
	font-family: Helvetica;
	}

	rect {
	fill: #AC98DB;
	}

	.barLabel {
	font-size: 12px;
	fill: #333333;
	text-anchor: end;
	}

	.barValue {
	font-size: 12px;
	fill: #333333;
	}

	h1, h2, p {
	position: relative;
	left: 10px;
	color: #333333;
	}

	.hover rect {
	fill: #A5D867;
	transition: fill 0.2s;
	}

	.hover text {
	font-weight: bold;
	font-size: 14px;
	}



	</style>
	</head>
	<body>

	<script type="text/javascript">

	var margin = {top: 10, right: 10, bottom: 0, left: 5};


	var body = d3.select('body');

	body.append('h1')
	.text('Doctor Who Earth Time Travel Journeys')

	body.append('h2')
	.text('Hartnell (DW1) through Smith (DW11)')

	body.append('p')
	.text('This is a test page to create a Horizontal Bar Chart and upload my Doctor Who CSV data using D3')


	//Create the SVG


	var svg = d3.select('body').append('svg'),
	barHeight = 10,
	barSpace = 5


	svg.attr('width', 1000)
	.attr('height', 2000)



	//Load in contents of CSV file

	d3.csv('Doctor Who EARTH Time Travel Journeys_LE.csv', function(data) {
	console.log(data);


	//Sort on data in descending order named in a,b

	data.sort(function(a,b) {
	return d3.descending(a.TimeJumpYrs, b.TimeJumpYrs)
	});


	//Sort on data in descending order named in a,b

	svg.selectAll('g')
	.data(data)
	.enter()
	.append('g')



	//Create the Horizontal Bar chart

	var barGroup = d3.selectAll('g');

	barGroup.append('rect')
	.attr({
	'width': function(d) { return d.TimeJumpYrs * 20; },
	'height': barHeight,
	'x': 150,
	'y': function(d, i) { return margin.top + (barHeight + barSpace) * i; }
	})

	barGroup.append('text')
	.text(function(d) { return d.EpTitle; })
	.attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
	.attr('class', 'barLabel')
	.attr('x', 100)

	barGroup.append('text')
	.attr('class', 'barValue')
	.attr('x', function(d) { return (d.TimeJumpYrs * 20) + 155; } )
	.attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
	.text(function(d) { return d.TimeJumpYrs })


	//When cursor hovers over the Bar, the Bar will light up Lime Green and the Bar Labels go Boldface

	barGroup.attr('cursor', 'pointer')
	barGroup.on('mouseover', function() {
	d3.select(this)
	.classed('hover', true)
	})

	barGroup.on('mouseout', function() {
	d3.select(this)
	.classed('hover', false)
	})



	});
	</script>

	</body>
	</html>