├── .DS_Store
├── images
├── .DS_Store
└── africalogo.png
├── index.html
├── css
└── style.css
└── js
└── main.js
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeustache00/Black-History-Channel-App/HEAD/.DS_Store
--------------------------------------------------------------------------------
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeustache00/Black-History-Channel-App/HEAD/images/.DS_Store
--------------------------------------------------------------------------------
/images/africalogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeustache00/Black-History-Channel-App/HEAD/images/africalogo.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Black History Channel
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 
20 |
21 |
22 | - Black
23 | - History
24 | - Channels
25 |
26 |
27 |
28 |
29 |
30 |
40 |
41 |
42 |
43 |
46 |
49 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | /******************************************
2 | /* SETUP
3 | /*******************************************/
4 |
5 | /* Box Model Hack */
6 | * {
7 | -moz-box-sizing: border-box; /* Firexfox */
8 | -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
9 | box-sizing: border-box; /* IE */
10 | }
11 |
12 | /* Clear fix hack */
13 | .clearfix:after {
14 | content: ".";
15 | display: block;
16 | clear: both;
17 | visibility: hidden;
18 | line-height: 0;
19 | height: 0;
20 | }
21 |
22 | .clear {
23 | clear: both;
24 | }
25 |
26 | .alignright {
27 | float: right;
28 | padding: 0 0 10px 10px; /* note the padding around a right floated image */
29 | }
30 |
31 | .alignleft {
32 | float: left;
33 | padding: 0 10px 10px 0; /* note the padding around a left floated image */
34 | }
35 |
36 | /******************************************
37 | /* BASE STYLES
38 | /*******************************************/
39 |
40 | body {
41 | color:black;
42 | font-size: 12px;
43 | line-height: 1.4;
44 | font-family: Helvetica, Arial, sans-serif;
45 | border:20px
46 |
47 | }
48 |
49 |
50 | /******************************************
51 | /* LAYOUT
52 | /*******************************************/
53 |
54 | /* Center the container */
55 | #container {
56 | width: 960px;
57 | margin: auto;
58 | }
59 |
60 | header {
61 |
62 | }
63 |
64 | footer {
65 |
66 |
67 | }
68 |
69 |
70 | /******************************************
71 | /* ADDITIONAL STYLES
72 | /*******************************************/
73 | header{
74 | border: 2px solid black;
75 | height: 240px;
76 | }
77 | .logo img{
78 | height: 200px;
79 | float: left;
80 | }
81 | li strong{
82 | list-style: none;
83 | float:left;
84 | }
85 | .navbar nav ul{
86 | margin-left: 30%;
87 | margin-top: -4%;
88 | }
89 | .navbar li{
90 | list-style: none;
91 | float: left;
92 | margin-left: 10%;
93 | }
94 | .about{
95 | height:300px;
96 | width:100%;
97 | border: 2px solid purple;
98 | }
99 | .about h1{
100 | font-size: 3em;
101 |
102 | }
103 | #map{
104 | border: 2px solid green;
105 | height: 1000px;
106 | }
107 | .subunit {
108 | fill: none;
109 | stroke: #FFF;
110 | stroke-width: 1px;
111 | }
112 | text.subunit-label {
113 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
114 | font-size: 14px;
115 | font-weight: 300;
116 | text-anchor: middle;
117 | fill: #000;
118 | }
119 | .subunit-label {
120 | display: none;
121 | }
122 | .graticule {
123 | fill: none;
124 | stroke: #aaa;
125 | stroke-opacity: .5;
126 | stroke-width: .5px;
127 | }
128 | footer{
129 | height: 250px;
130 | border: 2px solid yellow;
131 |
132 | }
133 | .selected{
134 |
135 | }
136 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 | var mapdata = {};
3 | var palette = ['#009933','#669900','#99cc00','#cccc00','#c7dc09','#edf933','#ffcc00', '#ff9933', '#ff6600','#ff5050'];
4 | var width = 960, height = 960;
5 | var minDocCount = 0, quantiles = {};
6 | // projection definitions
7 | var projection = d3.geo.mercator()
8 | .scale((width + 1) / 2 / Math.PI)
9 | .translate([width/2, height/2])
10 | .precision(.1);
11 | var path = d3.geo.path().projection(projection);
12 | var graticule = d3.geo.graticule();
13 | // SVG related definitions
14 | var svg = d3.select('body').append('svg')
15 | .attr({'width': width, 'height': height})
16 | .append('g');
17 | var filter = svg.append('defs')
18 | .append('filter')
19 | .attr({'x':0, 'y':0, 'width':1, 'height':1, 'id':'gray-background'});
20 | filter.append('feFlood')
21 | .attr('flood-color', '#f2f2f2')
22 | .attr('result', 'COLOR');
23 | filter.append('feMorphology')
24 | .attr('operator', 'dilate')
25 | .attr('radius', '.9')
26 | .attr('in', 'SourceAlpha')
27 | .attr('result', 'MORPHED');
28 | filter.append('feComposite')
29 | .attr('in', 'SourceGraphic')
30 | .attr('in2', 'MORPHED')
31 | .attr('result', 'COMP1');
32 | filter.append('feComposite')
33 | .attr('in', 'COMP1')
34 | .attr('in2', 'COLOR');
35 |
36 | svg.append("path")
37 | .datum(graticule)
38 | .attr("class", "graticule")
39 | .attr("d", path);
40 |
41 | d3.json('mockelasticdata.json', function(error, mockdata) {
42 | if (error) return console.error(error);
43 | console.log('mockdata',mockdata);
44 | mapdata = mockdata;
45 | draw(mockdata)
46 | });
47 |
48 | function draw(data) {
49 | // var localstoreWorldData = localStorage.getItem('worldmapData');
50 | // if (localstoreWorldData && localstoreWorldData.length) {
51 | // localstoreWorldData = JSON.parse(localstoreWorldData);
52 | // console.log('localstoreWorldData',localstoreWorldData);
53 | // if (localstoreWorldData) {
54 | // processWorldD(localstoreWorldData, data);
55 | // //no need proceed further
56 | // return;
57 | // }
58 | // }
59 | d3.json('world.json', function(error, world) {
60 | if (error) return console.error(error);
61 | console.log('world',world);
62 | processWorldD(world, data);
63 | //localStorage.setItem('worldmapData', JSON.stringify(world));
64 | });
65 | }
66 | function processWorldD(world, data) {
67 | for(var idx=0; idx < data.aggregations.world_map.buckets.length; idx++) {
68 | var cCode = data.aggregations.world_map.buckets[idx].key.toUpperCase();
69 | var doc_count = data.aggregations.world_map.buckets[idx].doc_count;
70 | for(var wdx=0; wdx < world.objects.subunits.geometries.length; wdx++) {
71 | var cName = world.objects.subunits.geometries[wdx].id.toUpperCase();
72 | if (cCode === cName) {
73 | world.objects.subunits.geometries[wdx].properties.doc_count = doc_count;
74 | }
75 | }
76 | }
77 | var subunits = topojson.feature(world, world.objects.subunits);
78 | subunits.features = subunits.features.filter(function(d){ return d.id !== "ATA"; });
79 | console.log('subunits',subunits);
80 | minDocCount = d3.min(subunits.features, function(d){ return d.properties.doc_count; });
81 | console.log('minDocCount',minDocCount);
82 | var doc_counts = subunits.features.map(function(d){ return d.properties.doc_count; });
83 | doc_counts = doc_counts.filter(function(d){ return d; }).sort(d3.ascending);
84 | //console.log('doc_counts',doc_counts);
85 | quantiles['0.95'] = d3.quantile(doc_counts, '0.95');
86 | var countries = svg.selectAll('path.subunit')
87 | .data(subunits.features).enter();
88 | countries.insert('path', '.graticule')
89 | .attr('class', function(d) { return 'subunit ca'+d.id; })
90 | .style('fill', heatColor)
91 | .attr('d', path)
92 | .on('mouseover',mouseoverLegend).on('mouseout',mouseoutLegend)
93 | .on('click', coutryclicked);
94 |
95 | countries.append('svg:text')
96 | .attr('class', function(d){ return 'subunit-label la'+d.id+d.properties.name.replace(/[ \.#']+/g,''); })
97 | //.attr('transform', function(d) { return 'translate('+ path.centroid(d) +')'; })
98 | .attr('transform', function(d) { return 'translate('+(width-(5*d.properties.name.length))+','+(15)+')'; })
99 | .attr('dy', '.35em')
100 | .attr('filter', 'url(#gray-background)')
101 | .append('svg:tspan')
102 | .attr('x', 0)
103 | .attr('dy', 5)
104 | .text(function(d) { return d.properties.name; })
105 | .append('svg:tspan')
106 | .attr('x', 0)
107 | .attr('dy', 20)
108 | .text(function(d) { return d.properties.doc_count ? d.properties.doc_count : ''; });
109 | }
110 |
111 | function mouseoverLegend(datum, index) {
112 | d3.selectAll('.subunit-label.la'+datum.id+datum.properties.name.replace(/[ \.#']+/g,''))
113 | .style('display', 'inline-block');
114 | d3.selectAll('.subunit.ca'+datum.id)
115 | .style('fill', '#cc6699');
116 | }
117 |
118 | function mouseoutLegend(datum, index) {
119 | d3.selectAll('.subunit-label.la'+datum.id+datum.properties.name.replace(/[ \.#']+/g,''))
120 | .style('display', 'none');
121 | d3.selectAll('.subunit.ca'+datum.id)
122 | .style('fill', heatColor(datum));
123 | }
124 |
125 | function coutryclicked(datum, index) {
126 | //filter event for this country should be applied here
127 | console.log('coutryclicked datum', datum);
128 | }
129 | function heatColor(d) {
130 | if (quantiles['0.95'] === 0 && minDocCount === 0) return '#F0F0F0';
131 | if (!d.properties.doc_count) return '#F0F0F0';
132 | if (d.properties.doc_count > quantiles['0.95']) return palette[(palette.length - 1)];
133 | if (quantiles['0.95'] == minDocCount) return palette[(palette.length-1)];
134 | var diffDocCount = quantiles['0.95'] - minDocCount;
135 | var paletteInterval = diffDocCount / palette.length;
136 | var diffDocCountDatum = quantiles['0.95'] - d.properties.doc_count;
137 | var diffDatumDiffDoc = diffDocCount - diffDocCountDatum;
138 | var approxIdx = diffDatumDiffDoc / paletteInterval;
139 | if (!approxIdx || Math.floor(approxIdx) === 0) approxIdx = 0;
140 | else approxIdx = Math.floor(approxIdx) - 1;
141 | return palette[approxIdx];
142 | }
143 | }
144 |
--------------------------------------------------------------------------------