index.html

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />


<style>
#particles-js {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position:absolute;
  z-index:-1000;
  opacity: 0.5;
}
</style>
<div id="particles-js"></div>



<br>
<table align="center"><tr><td>

F20DV/F21DV - <a href='https://www.macs.hw.ac.uk/students/cs/courses/f21dv-data-visualisation-and-analytics/'>Data Visualization and Analytics</a>
<br>
<br>

<table>
<thead id="headtoc">
<tr>
<td>Wk      		</td>
<td>No      		</td>
<td>Topic   		</td>
<td>        		</td>
<td>Lecture 		</td>
<td>        		</td>
<td>Notes   		</td>
<td>Tasks           </td>
<td>Quizzes    		</td>
<td>Extra 		</td>
</tr>
</thead>
<tbody id="bodytoc">
</tbody>
</table>

<br>Weekly Study: 12-13hrs
<br>Assessment: Exam (0%) Coursework (100%) (see VLE for details)<br>


</td></tr></table>




<script>
// Wk	No	Topic	[GAP]	Lecture	 [GAP]	Notes	Tasks	Quizzes	Crossword
/*
// files/folders follow naming convention
material/
  lectures/      // Lecture 00 - 
  notes/         // Notes 00 -
  quizzes/       // Quiz 00 - 
  tasks/         // Task 00 - 
  crosswords/    // Crossword 00 - 
*/

let ex1  = ['https://f21dv.github.io/material/extra/d3vizwhatandwhy.html',
            'https://f21dv.github.io/material/extra/revisiond3binding.html'];
let ex2  = ['https://f21dv.github.io/material/extra/reexp.html',
			'https://f21dv.github.io/material/extra/d3datahelpers.html',
			'https://f21dv.github.io/material/extra/revisiontransitions.html'];
let ex3  = [ 'https://f21dv.github.io/material/extra/revisionobjects.html' ];
let ex4  = ['https://f21dv.github.io/material/extra/Applied Examples.html',
            'https://f21dv.github.io/material/extra/extendingpiecharts.html'];
let ex5  = ['https://f21dv.github.io/material/extra/Good and Bad Visualizations.html'];
let ex8  = ['https://f21dv.github.io/material/extra/mapsanddata.html'];
let ex9  = ['https://f21dv.github.io/material/extra/countrypopulationdensity.html',
            'https://f21dv.github.io/material/extra/moremaps.html'];
let ex7  = ['https://f21dv.github.io/material/extra/hierarchydata.html'];
let ex10 = ['https://f21dv.github.io/material/extra/synergisticdesigns.html'];
let ex11 = ['https://f21dv.github.io/material/extra/visualdesignexamples.html',
            'https://f21dv.github.io/material/extra/worldinfrastructure.html'];
// l:lecture, n:notes, q:quiz, t:tasks, c:crosswords 

									 
									 

let toc = [
  { wk: '1',  no: '00', name: 'Introduction'                   ,  l:true, n: true,  t:true,  q: true,   e:null  }, 
  {           no: '01', name: 'Interactive Visualisations'     ,  l:true, n: true,  t:true,  q: true,   e:ex1   },
  { wk: '2',  no: '02', name: 'Data Analytics'                 ,  l:true, n: false, t:true,  q: false,  e:ex2   },
  {           no: '03', name: 'Data Clustering'                ,  l:true, n: false, t:true,  q: false,  e:null  },
  { wk: '3',  no: '04', name: 'Scalable Visualizations'        ,  l:true, n: true,  t:true,  q: true,   e:ex3   },
  { wk: '4',  no: '05', name: 'Charts'                         ,  l:true, n: true,  t:true,  q: true,   e:ex4   },
  { wk: '5',  no: '06', name: 'Story Telling and Aesthetics'   ,  l:true, n: false, t:true,  q: false,  e:ex5   },
  { wk: '6',  no: '-' , name: 'Reading Week (No Lectures)'    },
  { wk: '7',  no: '07', name: 'Hierarchies'                    ,  l:true, n: true,  t:true,  q: true,   e:ex7   },
  { wk: '8',  no: '08', name: 'Topic Models'                   ,  l:true, n: true , t:true,  q: true,   e:ex8   },
  { wk: '9',  no: '09', name: 'Maps and Geospatial Data'       ,  l:true, n: false, t:true,  q: false,  e:ex9   },
  { wk: '10', no: '10', name: 'Designing Visualizations'       ,  l:true, n: true , t:false, q: false,  e:ex10  },
  { wk: '11', no: '11', name: 'Future of Data Visualization'   ,  l:true, n: false, t:true,  q: false,  e:ex11  },
  { wk: '12', no: '12', name: 'Review & Support Lecture'       ,  l:true },
];

	// Slides	 	Notes	Task	Revision	Crossword

let bodytoc = document.getElementById('bodytoc');
for (let i=0; i<toc.length; i++)
{
	// Insert a row at the end of table
	var newRow = bodytoc.insertRow();
	
	if ( toc[i].wk ) newRow.insertCell().innerHTML = toc[i].wk;
	else             newRow.insertCell().innerHTML = ''; // week
	
	newRow.insertCell().innerHTML = toc[i].no;
	newRow.insertCell().innerHTML = toc[i].name;
	
	newRow.insertCell().innerHTML = ' '; // gap
	
	if ( toc[i].l ) newRow.insertCell().innerHTML = `<a href='./material/lectures/Lecture ${toc[i].no} - ${toc[i].name}.html'>Slides</a>`;
	else            newRow.insertCell().innerHTML = '-';
	
	newRow.insertCell().innerHTML = ' '; // gap
	
	if ( toc[i].n ) newRow.insertCell().innerHTML = `<a href='./material/notes/Notes ${toc[i].no} - ${toc[i].name}.html'>Notes</a>`;
	else            newRow.insertCell().innerHTML = '-';
	
	if ( toc[i].t ) newRow.insertCell().innerHTML = `<a href='./material/tasks/Task ${toc[i].no} - ${toc[i].name}.html'>Task</a>`;
	else            newRow.insertCell().innerHTML = '-';
	
	if ( toc[i].q ) newRow.insertCell().innerHTML = `<a href='./material/quizzes/Quiz ${toc[i].no} - ${toc[i].name}.html'>Quiz</a>`;
	else            newRow.insertCell().innerHTML = '-';
	
	if ( toc[i].e ) 
	{
					let cell = newRow.insertCell();
					cell.innerHTML = '';
					for (let n=0; n<toc[i].e.length; n++){ cell.innerHTML  += `<a href='${toc[i].e[n]}'>Link</a> `;  }
	}
	else            newRow.insertCell().innerHTML = '-';
	
	
}

</script>




<script src="./scripts/particles.js"></script>
<script src="./scripts/appHome.js"></script>