context-map/index.html at master · makman09/context-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
	<link rel="stylesheet" href="index.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
	<script src="d3_vis_demo.js"></script>
</head>
<body class="w-100 sans-serif">
	<main class="w-100 bt b--black-10 bg-white">
		<section class="cf ph3 ph5-ns pb5 bg-yellow black-70" id="features">
		  <div class="mw9 center">
		    <h1 class="fl w-100 mt5 f5 ttu tracked fw6">Visualization by Mustafa Khan</h1>
		    <article class="pv2 fl w-100 ">
		      <h2 class="f4 f1-ns fw6 mb2">D3 based data visualization of a context map</h2>
		      <p class="f5 f4-ns measure lh-copy mt0">
						A context map is a visualization that explain why certain markers (entities)
						on a map gravtitate toward black dots which represent context.
						A context map is made by feeding multiple matrices of data like income, popularity, and cultural importance
						through a technique called non-negative matrix factoriation.
		      </p>
		      <p class="f5 f4-ns measure lh-copy mt0">
		      	Through that technique, you get output whicn you plot
		      	onto a map which visualizes elements gravitating toward certains states. The black context dots represent why elements gravitate toward it. The black contexts dot visually represent a bunch of matrices of data.
		      </p>
		      <p class="f5 f4-ns measure lh-copy mt0">
		      	The code for this visualization can be found
		      	<a href="https://github.com/makman09/context-map">
		      		here
		      	</a>
		      	.
		      </p>
		    </article>
		    <div class="cf">
		      <article class="pv2 fl w-100 w-50-l pr0 pr2-l">
		        <h2 class="f4 f2-ns fw6 mb2">Feature Map</h2>
						<div class="vis_container sample-demo flex justify-start mt2">
				  	</div>
		      </article>
		      <article class="pv2 fl w-100 w-50-l pl0 pl2-l">
		        <h2 class="f4 f2-ns fw6 mb2">Sample Map</h2>
						<div class="vis_container feature-demo flex justify-start mt2">
				  	</div>
		      </article>
		    </div>
		  </div>
		</section>
	</main>
	<script type="text/javascript">
		let sample = new ContextMap("div.sample-demo", "people")
		sample.buildMap()
		let feature = new ContextMap("div.feature-demo", "places")
		feature.buildMap()
	</script>
</body>
</html>