<commit_before><!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>Éléments d'histoire de la musique électronique</title>
		<style>

		.node {
			opacity: 0.4;
		}

		.node circle {
		stroke: white;
		stroke-width: 1.5px;
		}

		line {
		stroke: black;
		stroke-width: 1.5px;
		stroke-opacity: 0.3;
		}

		text {
		font: 8px sans-serif;
		pointer-events: none;
		}

		body {
			padding: 15px;
		}
		html, body, .page, .row, #graph {
			height: 100%;
		}
		
		body {
			background-size: cover;
			background: no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
		}
		
		#graph {
			padding: 0; margin: 0;
		}

		#noeuds-voisins a:hover {
			cursor: pointer;
		}
		
		.divider {
			width: 48%;
			margin: 0px 1%;
			float: left;
		}
		.videowrapper {
			float: none;
			clear: both;
			width: 100%;
			position: relative;
			padding-bottom: 56.25%;
			padding-top: 25px;
			height: 0;
			margin-bottom: 1em;
		}
		.videowrapper iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}


		.img-responsive {
			margin: auto;
		}
		
		
		#uptotext {
			position: fixed;
			bottom: 1em;
			right: 1em;
		}
		
		@media  (min-width: 992px) {
			#uptotext {
				display: none;
		};

		</style>
		
		<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous" />

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="<KEY>" crossorigin="anonymous" />


	</head>
	<body>
		<div class="page">
			<div class="row">
				<div class="col-md-4">
					<div class="page-header">
						<h1><a href="/"><span class="glyphicon glyphicon-console" aria-hidden="true"></span></a> Éléments d'histoire de la musique électronique</h1>
					</div>
					<div class="panel panel-default" id="description">
						<div class="panel-body">
								<form>
									<div class="form-group">
										<select class="combobox form-control" id="description-list" name="e">
										</select>
									</div>
								</form>
								<div id="description-complete">
								</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">À propos</h3>
						</div>
						<div class="panel-body">
							<p>Cette représentation sous forme de <a href="https://fr.wikipedia.org/wiki/Carte_mentale">carte mentale</a> est le fruit de mes explorations personnelles,
							et ne saurait être représentative de la diversité des courants artistiques 
							évoqués, ou ignorés. Sauf indication contraire, les illustrations sont issues des wikipédia en langue française ou anglaise. Pour toute remarque, n'hésitez pas à me contacter à l'adresse
							<a href="mailto:<EMAIL>"><EMAIL></a>.</p>
							<h4>Voir aussi</h4>
							<ul>
								<li>Liste complète des <a href="/?refs">références utilisées sur cette page.</a></li>
								<li>Mes <a href="http://radio.jmfavreau.info">projets sonores</a> en cours et passés.</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="graph" class="col-md-8"></div><commit_msg>Ajout de quelques informations sur la manière dont je fabrique la carte mentale.<commit_after><!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>Éléments d'histoire de la musique électronique</title>
		<style>

		.node {
			opacity: 0.4;
		}

		.node circle {
		stroke: white;
		stroke-width: 1.5px;
		}

		line {
		stroke: black;
		stroke-width: 1.5px;
		stroke-opacity: 0.3;
		}

		text {
		font: 8px sans-serif;
		pointer-events: none;
		}

		body {
			padding: 15px;
		}
		html, body, .page, .row, #graph {
			height: 100%;
		}
		
		body {
			background-size: cover;
			background: no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
		}
		
		#graph {
			padding: 0; margin: 0;
		}

		#noeuds-voisins a:hover {
			cursor: pointer;
		}
		
		.divider {
			width: 48%;
			margin: 0px 1%;
			float: left;
		}
		.videowrapper {
			float: none;
			clear: both;
			width: 100%;
			position: relative;
			padding-bottom: 56.25%;
			padding-top: 25px;
			height: 0;
			margin-bottom: 1em;
		}
		.videowrapper iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}


		.img-responsive {
			margin: auto;
		}
		
		
		#uptotext {
			position: fixed;
			bottom: 1em;
			right: 1em;
		}
		
		@media  (min-width: 992px) {
			#uptotext {
				display: none;
		};

		</style>
		
		<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous" />

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />


	</head>
	<body>
		<div class="page">
			<div class="row">
				<div class="col-md-4">
					<div class="page-header">
						<h1><a href="/"><span class="glyphicon glyphicon-console" aria-hidden="true"></span></a> Éléments d'histoire de la musique électronique</h1>
					</div>
					<div class="panel panel-default" id="description">
						<div class="panel-body">
								<form>
									<div class="form-group">
										<select class="combobox form-control" id="description-list" name="e">
										</select>
									</div>
								</form>
								<div id="description-complete">
								</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">À propos</h3>
						</div>
						<div class="panel-body">
							<p>Cette représentation sous forme de <a href="https://fr.wikipedia.org/wiki/Carte_mentale">carte mentale</a> est le fruit de mes explorations personnelles,
							et ne saurait être représentative de la diversité des courants artistiques 
							évoqués, ou ignorés. Sauf indication contraire, les illustrations sont issues des wikipédia en langue française ou anglaise. Pour toute remarque, n'hésitez pas à me contacter à l'adresse
							<a href="mailto:<EMAIL>"><EMAIL></a>.</p>
							<h4>Crédits</h4>
							<p>Merci à Agnès, Cécile, <a href="https://soundcloud.com/dylopho-1">Dylopho</a>, Théo, Romuald, Florian, et tous les autres pour les discussions au sujet de la musique électronique, ici où là, qui a alimenté cette carte.</p>
							<p>Pour réaliser cette carte, j'ai utilisé les bibliothèques <a href="http://d3js.org">D3.js</a> et <a href="https://getbootstrap.com/docs/3.3/css/">bootstrap</a>. Le <a href="https://github.com/jmtrivial/musiques-electroniques">code source est disponible</a> sur github.</p>
							<h4>Voir aussi</h4>
							<ul>
								<li>Liste complète des <a href="/?refs">références utilisées sur cette page.</a></li>
								<li>Mes <a href="http://radio.jmfavreau.info">projets sonores</a> en cours et passés.</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="graph" class="col-md-8"></div>
{'fraction_non_alphanumeric': 0.15708970649028525, 'fraction_numerical': 0.018464930412015985, 'mean_word_length': 2.7960251046025104, 'pattern_counts': {'":': 0, '<': 156, '<?xml version=': 0, '>': 156, 'https://': 9, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7334819', 'n_tokens_mistral': 3402, 'n_tokens_neox': 2615, 'n_words': 615}