Skip to content

Instantly share code, notes, and snippets.

@Masoumeh

Masoumeh/example.css

Last active May 17, 2016 07:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Masoumeh/4b6a27fd50ffdd81c34fb3c59963a401 to your computer and use it in GitHub Desktop.
Save Masoumeh/4b6a27fd50ffdd81c34fb3c59963a401 to your computer and use it in GitHub Desktop.
Download ZIP
Geo-Bio (Project)
Raw
readme.md

The module contains geospatila information of coordinates and paths of cornu files. Besides, we can follow the biographic information for a specific time span between the mani regions (Eghlims). We can chose to have the connection either throug the complete paths or through arcs. Voronoi diagram as a layer forms the regions in country (Eghlim) level. Voronoi layer is clipped right now by the widest coordinates. It needs to be clipped in vaious regions based on the sites locations and distances.

Raw
example.css
.countrylabel {
font-size: 12px;
color: red;
text-anchor: middle;
pointer-events: none;
font-weight: 900;
}
.countryborders {
fill: rgba(0,0,0,0);
stroke-width: 1px;
stroke: gray;
cursor: pointer;
}
.invisible {
fill: rgba(0,0,0,0);
stroke-width: 0;
stroke: white;
cursor: pointer;
}
.countries {
fill: none;
stroke-width: 1px;
stroke: black;
opacity: 1;
display: none;
}
.halffilledcountries {
fill: rgba(224,224,209,0.5);
stroke-width: 1px;
stroke: black;
opacity: 1;
}
.filledcountries {
fill: #E0E0D1;
stroke-width: 1px;
stroke: black;
opacity: 1;
}
.francelike {
fill: steelblue;
stroke-width: 2px;
stroke: lightgray;
}
.roads {
stroke: brown;
stroke-width: 1px;
fill: none;
}
.rivers {
stroke: blue;
stroke-width: 2px;
fill: none;
opacity: 1;
}
circle {
fill: seagreen;
stroke: seagreen;
}
circle.pinkcircle {
fill: pink;
stroke: black;
stroke-width: 1;
opacity: 1
}
circle.greencircle {
fill: green;
stroke: red;
opacity: 1;
stroke-width: 3;
}
#infoBox {
position: fixed;
z-index: 1;
bottom: 150px;
right: 150px;
background: white;
border: 1px gray dashed;
padding:20px;
width: 200px;
}
Raw
gen_voronoi_layer.js
function gen_voronoi_layer(voronoiLayer) {
voronoiLayer = map.createVoronoiLayer(cityLayer, 0.5, []);
voronoiLayer
.label("Voronoi")
.cssClass("voronoi")
.on("load", function () {
var c20 = d3.scale.category20();
var ind = 1;
var region_color = {};
voronoiLayer.g().selectAll("path")
.style("fill", function (p) {
//var areaLim = 5;
var pol = d3.geom.polygon(p["geometry"]["coordinates"][0]);
var poly = p["geometry"]["coordinates"][0];
var center = pol.centroid();
var region = p['properties']['node']['region'];
if (region == "noData") return "rgba(0,0,0,0)";
if (region_color[region] == undefined) {
region_color[region] = c20(ind);
ind++;
if (ind == 20) ind = 1;
}
var max_area = 100;
var sub = 8;
if (region == "Sind") max_area = 50;
if (region == "Barqa") max_area = 10;
if (region == "Sicile") {
max_area = 1;
sub = 10;
}
if (region == "Khazar") max_area = 0;
if (region == "Rihab") max_area = 10;
if (region == "Daylam") max_area = 15;
if (region == "Jazirat al-Arab") max_area = 40;
if (region == "Yemen") max_area = 40;
if (region == "Transoxiana") max_area = 2;
if (Math.abs(pol.area()) < max_area) {
for (var i = 0; i < poly.length; i++) {
var dist =
Math.sqrt(Math.pow(Math.abs(center[0] - poly[i][0]), 2) +
Math.pow(Math.abs(center[1] - poly[i][1]), 2));
if (dist > max_area / 4) {
var v1 = poly[i][0] - center[0];
v1 /= dist;
var v2 = poly[i][1] - center[1];
v2 /= dist;
p["geometry"]["coordinates"][0][i] =
[center[0] + (dist / sub) * v1,
center[1] + (dist / sub) * v2];
}
}
return region_color[region];
}
else return "rgba(0,0,0,0)";
}).style("stroke-width", "0.0");
voronoiLayer.g().selectAll("g.marker")
.filter(function (p) {
var pol = d3.geom.polygon(p["geometry"]["coordinates"][0]);
//if(Math.abs(pol.area()) < 1) return "red";
if (p['properties']['node']['region'] == "Sham") {
if (Math.abs(pol.area()) < 1)
return p;
}
})
.style("pointer-events", "all")
.style()
.on("click", function () {
//alert(d3.mouse(this));
});
});
map.addCartoLayer(voronoiLayer);
return voronoiLayer;
}
Raw
geo_bio.css
html,body {
height: 100%;
width: 100%;
}
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#geoMap {
width: 100%;
height: 100%;
position: absolute;
}
.controlsDiv {
background: #B1CA8D/*rgba(65,64,66,.85)*/;
position: fixed;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 78;
}
#controlbar {
top: 68px;
left: 15px;
width: 320px;
padding:0px 10px 20px;
z-index: 78;
}
#controlbarScroller {
height:100%;
width:100%;
overflow:auto;
height: 511px;
}
.tab {
position: absolute;
z-index: 1;
top: -29px;
background: #B1CA8D; /*rgb(65,64,66);*/
opacity: .85;
padding: 5px;
border-bottom: none;
color: #28671C;
text-align: center;
font-weight: 700;
}
.backtab {
background: #339933;
opacity: .85;
border-bottom: solid #428934 1px; /*solid #747271 1px;*/
padding-top: 4px;
color: white;
}
/*.backtab:hover {*/
/*opacity: 1;*/
/*background: black;*/
/*cursor: pointer;*/
/*}*/
.buttonContainer {
width: 100%;
margin-top:10px;
float: left;
position: relative;
}
#routeDiv {
display:none;
margin-bottom:10px;
padding: 5px 10px;
background: white;height:23px;
}
#person {
position:absolute;
left:0px;
width:100px;
}
#network {
position:absolute;
left:110px;
width:110px;
border-right: solid #428934 1px;
border-left: solid #428934 1px;
}
#route {
position:absolute;
left:232px;
width:98px;
}
.rightarrow:after {
width: 0;
height: 0;
position: absolute;
left: 2px;
top: 40%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #e6e7e8;
}
#closeLeft {
top: 40px;
left: 0;
background: #4C6447; /*rgba(65,64,66,.85);*/
border-right: 1px solid #4C6447; /*rgba(35,31,32,.85);*/
bottom:21px;
position: fixed;
z-index: 10;
width: 15px;
cursor: pointer;
}
.leftarrow:after {
width: 0;
height: 0;
position: absolute;
left: 2px;
top: 40%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #e6e7e8;
}
#closeRight {
top: 120px;
right: 0;
background: #4C6447;/*rgba(65,64,66,.85);*/
border-left: 1px solid #4C6447; /*rgba(35,31,32,.85);*/
bottom:21px;
position: fixed;
z-index: 10;
width: 15px;
cursor: pointer;
}
#rightControls {
padding: 0 10px 10px;
top: 120px;
right: 15px;
width: 120px;
overflow:auto;
}
.controlsDiv {
background: #4C6447;/*rgba(65,64,66,.85);*/
position: fixed;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.buttonContainer {
width: 100%;
margin-top:10px;
float: left;
position: relative;
}
#displayOptionsContainer {
background: white;
overflow: auto;
height: auto;
padding: 5px;
width: auto;
}
.checkBoxSelect
{
font-size: 16px;
margin-bottom: 5px;
padding: 10px;
}
.checkboxDiv
{
display: inline-block;
}
.radio-radio {
display:none;
}
.radio-radio + label {
display:inline-block;
width:15px;
height:15px;
margin:-1px 5px 0 0;
vertical-align:middle;
background:url(radio_sheet.png) left top no-repeat;
cursor:pointer;
}
.radio-radio:checked + label {
background:url(radio_sheet.png) -15px top no-repeat;
}
.radio-radio + label:hover {
background:url(radio_sheet.png) -30px top no-repeat;
}
.radio-radio:checked + label:hover {
background:url(radio_sheet.png) -45px top no-repeat;
}
#networkStart {
width: 200px;
}
.zone1-node {
fill: #31a354;
}
.zone2-node {
fill: #FFD62E;
}
.zone3-node {
fill: #FF9500;
}
.zone4-node {
fill: #E80909;
}
.zone5-node {
fill: #000;
}
Raw
geo_bio.js
/**
* Created by masoumeh on 10.02.16.
*/
var map,arcLayer,routeLayer, arcVisibility;
var voronoiLayer;
function makeSomeMaps() {
pathSource = 0;
var graph_dijks;
var svg = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 600);
var g = svg.append("g");
var arcGroup = g.append('g');
//var dijSource, dijTarget;
map = d3.carto.map();
d3.select("#geoMap").call(map);
map.centerOn([44.361488, 33.312806], "latlong");
map.setScale(4);
map.refresh();
var routeData;
wcLayer = d3.carto.layer.tile();
wcLayer
.tileType("stamen")
.path("watercolor")
.label("Watercolor")
.visibility(true);
routeLayer = d3.carto.layer.topojson();
routeLayer
.path("https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/Data/all_routes_new.topojson")
.label("Postal Routes")
.cssClass("roads")
.renderMode("svg")
.on("load", function () {
routeData = routeLayer.features();
init_graph(routeData);
graph_dijks = createMatrix(routeData);
cityLayer = d3.carto.layer.csv();
cityLayer.path("https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/Data/cornuFilteredRoutes.csv")
.label("Cities")
.cssClass("metro")
.renderMode("svg")
.x("lon")
.y("lat")
.clickableFeatures(true)
.on("load", function () {
var uniqueTopType = {};
cityLayer.features().forEach(function (f) {
uniqueTopType[f['topType']] = 0;
});
var disOpts = d3.select("#displayOptionsContainer");
Object.keys(uniqueTopType).forEach(function (type) {
topTypeDiv(disOpts, type);
});
//the initial of circles
d3.selectAll("circle").transition().duration(1000)
.style("fill", "seagreen")
.attr("r", 5);
voronoiLayer=gen_voronoi_layer(voronoiLayer);
setup_city_list(voronoiLayer);
});
map.addCartoLayer(cityLayer);
});
map.addCartoLayer(wcLayer).addCartoLayer(routeLayer);
d3.csv("https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/Data/peopleRegion.csv", function (error, data) {
if (error) throw error;
// Creating the required data structures
var output = dataStructsBetweenPeopleYears(data);
// Min year
var min_year = output['min_year'];
// Max year
var max_year = output['max_year'];
// A map from people to places they have been related to
var peopleMap = output['peopleMap'];
// A map from years to people they have been related to
var yearPeople = output['yearPeople'];
var slider = d3.slider().value([0, 100])
.on("slide", function (evt, value) {
d3.select('#minYear').text(''
+ parseInt(value[0] + min_year) * parseInt((max_year - min_year) / 100));
d3.select('#maxYear').text('' +
+parseInt(value[1] + min_year) * parseInt((max_year - min_year) / 100));
});
//function update(value) {
d3.select("#calcConnections")
.on("click", function () {
var minyear = parseInt(d3.select('#minYear').html());
var maxyear = parseInt(d3.select('#maxYear').html());
var uniqueCountires =
unify_year_people(minyear, maxyear, yearPeople, peopleMap);
updateRoutesCountries(uniqueCountires, graph_dijks, arcGroup);
});
d3.select("#yearSlider").call(slider);
d3.select("#minYear").text(min_year + '');
d3.select("#maxYear").text(max_year + '');
arcLayer = d3.carto.layer.geojson();
arcLayer.path("https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/Data/arcs.json")
.label("Arcs")
.visibility(false)
.renderMode("svg")
.cssClass("roads")
.clickableFeatures(true);
arcVisibility = false;
map.addCartoLayer(arcLayer);
//arcLayer.visibility('false');
//findCountries(csv, data, routeData);
//var select = d3.select("#personSlider")
// .append('div')
// .append("select")
// .on("change", function (d) {
// var id = this.options[this.selectedIndex].value;
// updateRoutes(id);
// });
//var options = select.selectAll("option").data(Object.keys(peopleMap));
//options.enter()
// .append("option")
// .text(function (d) {
// return d;
// });
});
}
function closeOpen(container) {
switch (container) {
case "leftPanel":
d3.select("#controlbar").style("left") == "15px" ? d3.select("#controlbar").transition().duration(500).style("left", "-350px") : d3.select("#controlbar").transition().duration(500).style("left", "15px");
d3.select("#closeLeft").classed("rightarrow") ? d3.select("#closeLeft").classed("rightarrow", false).classed("leftarrow", true) : d3.select("#closeLeft").classed("rightarrow", true).classed("leftarrow", false);
break;
case "rightPanel":
if (d3.select("#rightControls").style("right") == "15px") {
d3.select("#rightControls").transition().duration(500).style("right", "-300px")
d3.select("#mapControls").transition().duration(500).style("right", "60px")
}
else {
d3.select("#rightControls").transition().duration(500).style("right", "15px")
d3.select("#mapControls").transition().duration(500).style("right", "200px")
}
d3.select("#closeRight").classed("rightarrow") ? d3.select("#closeRight").classed("rightarrow", false).classed("leftarrow", true) : d3.select("#closeRight").classed("rightarrow", true).classed("leftarrow", false);
break;
}
}
function topTypeDiv(disOpts, type) {
var div = disOpts.append("div")
.style("width", "100%")
.append("div")
.attr("id", function () {
return type;
})
.attr("class", "eyeButton");
var input = div.append("input")
.attr("id", type + "Button")
.attr("class", "mode-checkbox")
.attr("name", "display")
.attr("checked", "checked")
.attr("type", "checkbox")
.attr("value", function () {
return type;
})
.on("change", function () {
if (!this.checked) {
d3.selectAll("circle")
.filter(function (d) {
return d.topType == type;
}).attr("r", 0);
} else {
d3.selectAll("circle")
.filter(function (d) {
return d.topType == type;
}).attr("r", 5);
}
});
div.append("label")
.attr("for", function () {
return type + "button";
})
.attr("class", "mode-picker-label")
.attr("name", "display")
.html(function () {
return type;
});
}
function hideAllTab() {
d3.select('#persontab').style('display', 'none');
d3.select('#person').style('background', '#B1CA8D');
d3.select('#networktab').style('display', 'none');
d3.select('#network').style('background', '#B1CA8D');
d3.select('#routetab').style('display', 'none');
d3.select('#route').style('background', '#B1CA8D');
}
function showTab(tabname) {
hideAllTab();
d3.select('#' + tabname).style('display', 'block');
d3.select('#' + tabname.substring(0, tabname.length - 3)).style('background', 'white');
}
Raw
helper.js
/**
* Created by masum on 11.02.16.
*/
// make a unique list of countries(names) for people in a specific year
// starting from a yearPeople map(year to people ids) to peopleMap (people to year + country (name))
function unify_year_people(minyear, maxyear, yearPeople, peopleMap) {
var uniqueCountries = {};
for (var i = minyear; i <= maxyear; i++) {
if (yearPeople[i + ''] != undefined) {
var arr = yearPeople[i + '']['id'].split(',');
arr.forEach(function (d) {
var city = peopleMap[d]['city'].split(',');
city.forEach(function (d) {
if (uniqueCountries[d] == undefined)
uniqueCountries[d] = 0;
// counts the number of countries in a map
else uniqueCountries[d]++;
});
});
}
}
return uniqueCountries;
}
function createMatrix(postdata) {
edgeMap = {};
nodeHash = {};
for (x in postdata) {
var line = postdata[x].geometry.coordinates;
var sName = postdata[x].properties.sToponym;
var eName = postdata[x].properties.eToponym;
var lS = line[0];
var lE = line[line.length - 1];
var nA = [lS, lE];
var cost = d3.geo.length(postdata[x]) * 6371;
if (edgeMap[sName]) {
edgeMap[sName][eName] = cost;
}
else {
edgeMap[sName] = {};
edgeMap[sName][eName] = cost;
}
if (edgeMap[eName]) {
edgeMap[eName][sName] = cost;
}
else {
edgeMap[eName] = {};
edgeMap[eName][sName] = cost;
}
}
return new DijksGraph(edgeMap);
}
function calcPathSize(d, uniquePaths) {
//var pathscale = d3.scale.linear()
// .domain([d3.min(d3.values(uniquePaths)),d3.max(d3.values(uniquePaths))])
// .range([1,20]);
if (arcLayer.visibility())
var pathscale = d3.scale.linear().domain([1, 15]).range([1, 30]);
else if (routeLayer.visibility())
var pathscale = d3.scale.linear().domain([1, 15]).range([1, 15]);
// To consider the paths from A to B and B to A as one path
var tmp1 = uniquePaths[d.properties.sToponym
+ "," + d.properties.eToponym];
var tmp2 = uniquePaths[d.properties.eToponym
+ "," + d.properties.sToponym];
var size;
if (tmp1 == undefined && tmp2 == undefined) {
size = 0
}
else {
if (tmp1 == undefined)
size = pathscale(tmp2);
else size = pathscale(tmp1);
}
return size;
}
function calcPathSizeForColors(d, uniquePaths) {
//var pathscale = d3.scale.linear()
// .domain([d3.min(d3.values(uniquePaths)),d3.max(d3.values(uniquePaths))])
// .range([1,20]);
var pathscale = d3.scale.linear().domain([1, 15]).range([1, 20]);
// To consider the paths from A to B and B to A as one path
var tmp1 = uniquePaths[d.properties.sToponym
+ "," + d.properties.eToponym];
var tmp2 = uniquePaths[d.properties.eToponym
+ "," + d.properties.sToponym];
var size;
if (tmp1 == undefined && tmp2 == undefined) {
size = 0
}
else {
if (tmp1 == undefined)
size = pathscale(tmp2);
else size = pathscale(tmp1);
}
return size;
}
function displayPath(pathData, countries, uniquePaths) {
//console.log("countries: " + JSON.stringify(d3.values(countries)));
//console.log("uniqPaths: "+JSON.stringify(uniquePaths));
var rscale = d3.scale.linear()
.domain(d3.extent(d3.values(countries)))
.range([5, 30]);
var colorScale = d3.scale.linear()
.domain(d3.extent(d3.values(uniquePaths)))
.range(["darkseagreen", "darkgreen"])
.interpolate(d3.interpolateHcl);
//Initial fill of all circles
d3.selectAll("circle").transition().duration(1000)
.style("fill", "seagreen")
.attr("r", 5);
//
d3.selectAll("path").filter(function (d) {
return pathData.indexOf(d.properties.sToponym) === -1
|| pathData.indexOf(d.properties.eToponym) === -1;
}).transition().duration(1000).style("stroke-width", 0); // or display property?
if (pathData) {
d3.selectAll("path").filter(function (d) {
return pathData.indexOf(d.properties.sToponym) > -1
&& pathData.indexOf(d.properties.eToponym) > -1;
}).transition().duration(2000).style("stroke", function (d) {
var size = calcPathSizeForColors(d, uniquePaths);
return colorScale(size);
}).style("stroke-width", function (d) {
return calcPathSize(d, uniquePaths);
});
d3.selectAll("circle").filter(function (d) {
return pathData.indexOf(d.topURI) > -1
}).transition().duration(2000)
.style("fill", "orange")
.style("stroke", "orange")
.attr("r", function (d) {
var size = (parseInt(countries[d['topURI']]));
if (isNaN(size)) return 5;
return rscale(size);
});
d3.selectAll("circle").filter(function (d) {
return (pathData.indexOf(d.topURI) <= -1 // is this line needed to be checked? for 949 to 1300 it seems it's needed!
|| Object.keys(countries).indexOf(d.topURI) <= -1 )
}).transition().duration(2000)
.attr("r", "0");
var pDataArray = d3.selectAll("path").filter(function (d) {
return pathData.indexOf(d.properties.sToponym) > -1
&& pathData.indexOf(d.properties.eToponym) > -1
}).data();
// var totalLength = d3.sum(pDataArray, function(d) {return d.properties.cost});
// d3.select("#pathdata").html("<span style='font-weight: 900'>Total Distance:</span> " + formatter(totalLength) + "km");
}
//else {
// d3.select("#personSlider").html("NO ROUTE");
//}
}
function displayPathArc(pathData, countries, uniquePaths, svg) {
//routeLayer.visibility(false);
//arcLayer.visibility(true);
//map.showHideLayer(routeLayer);
//map.showHideLayer(arcLayer);
displayPath(pathData,countries,uniquePaths);
//var rscale = d3.scale.linear()
// .domain(d3.extent(d3.values(countries)))
// .range([5, 30]);
//
//var colorScale = d3.scale.linear()
// .domain(d3.extent(d3.values(uniquePaths)))
// .range(["darkseagreen", "darkgreen"])
// .interpolate(d3.interpolateHcl);
//
////Initial fill of all circles
//d3.selectAll("circle").transition().duration(1000)
// .style("fill", "seagreen")
// .attr("r", 5);
}
// Updates the routes between a list of countries, using dijkstra algorithm
function updateRoutesCountries(countries, dijks_graph, svg) {
var country = Object.keys(countries);
var pathData = [];
var uniquePaths = {};
for (var x = 0; x < country.length; x++) {
for (var y = x + 1; y < country.length; y++) {
var pData = dijks_graph.findShortestPath(country[x], country[y]);
if (pData) {
for (var i = 0; i < pData.length; i++) {
for (var j = i + 1; j < pData.length; j++) {
// Check both i to j and j to i paths
// to prevent counting a path two times
if (uniquePaths[pData[i] + "," + pData[j]] == undefined) {
if (uniquePaths[pData[j] + "," + pData[i]] != undefined) {
// adds counter to one of the ij/ji paths
uniquePaths[pData[j] + "," + pData[i]]++;
} else {
uniquePaths[pData[j] + "," + pData[i]] = 1;
}
} else {
uniquePaths[pData[i] + "," + pData[j]]++;
}
}
}
// concats new path to the array of pathData
pathData = pathData.concat(pData);
}
}
}
if (d3.select('input[name="pathvis"]:checked')[0][0].value == 0) {
//routeLayer.visibility(true);
//arcLayer.visibility(false);
if (arcLayer.visibility())
map.showHideLayer(arcLayer);
if (!routeLayer.visibility())
map.showHideLayer(routeLayer);
//map.showHideLayer(routeLayer);
//map.showHideLayer(arcLayer);
displayPath(pathData, countries, uniquePaths);
} else {
if (!arcLayer.visibility())
map.showHideLayer(arcLayer);
if (routeLayer.visibility())
map.showHideLayer(routeLayer);
displayPathArc(pathData, countries, uniquePaths, svg);
}
}
function updateRoutes(id) {
var trav = 0;
d3.selectAll("path").transition().duration(1000).style("stroke", function (d, i) {
return "black"
}).style("stroke-width", "2px");
var country = peopleMap[id]['city'].split(',');
for (var x = 0; x < country.length; x++) {
for (var y = x + 1; y < country.length; y++) {
var pData = dijks_graph.findShortestPath(country[x], country[y]);
trav++;
if (pData) {
//console.log("pathdata: ", JSON.stringify(pData));
displayPath(pData);
}
}
}
}
// Building initial map structures
function dataStructsBetweenPeopleYears(data) {
var min_year = 2000, max_year = 0;
// A map from people to assigned year and name (now just toponyms)
var peopleMap = {};
// A map from year to people assigned to that year
var yearPeople = {};
data.forEach(function (d) {
// Group the years to decades
var diedAtDecade = d.diedAt - (d.diedAt % 10);
// populating the map. if a person exists in map, concat new place to older ones
if (peopleMap[d.id] != undefined) {
peopleMap[d.id] = {
'diedAt': diedAtDecade,
'city': peopleMap[d.id]['city'] + ',' + d.city
};
}
// if a new person is going to be added, a new object is created and added to map
else {
peopleMap[d.id] = {'diedAt': diedAtDecade, 'city': d.city};
}
// populating the map. if a person exists in map, concat new years to older ones
if (yearPeople[diedAtDecade] != undefined) {
yearPeople[diedAtDecade] = {'id': yearPeople[diedAtDecade]['id'] + ',' + d.id};
}
// if a new person is going to be added, a new object is created and added to map
else {
yearPeople[diedAtDecade] = {'id': d.id};
}
// Finding the min and max years
var year = parseInt(diedAtDecade);
if (year < min_year) min_year = year;
if (year > max_year) max_year = year;
});
var output = {};
output['min_year'] = min_year;
output['max_year'] = max_year;
output['peopleMap'] = peopleMap;
output['yearPeople'] = yearPeople;
return output;
}
function findCountries(csv, data, routeData) {
var arr = [];
var cityNames = [];
var g = new Graph_msp();
data.forEach(function (d) {
csv.forEach(function (c) {
if (c.topURI == d.city) {
if (cityNames.indexOf(d.city) == -1) {
cityNames.push(d.city);
arr.push({"lat": c.lat, "lon": c.lon, "city": d.city});
g.addNode(d.city);
}
}
});
});
var geoJson = {
"features": [],
"type": "FeatureCollection"
};
for (i = 0; i < arr.length; i++) {
for (j = i; j < arr.length; j++) {
if (i != j) {
g.addEdge(arr[i].city, arr[j].city, distance(arr[i].lat, arr[i].lon
, arr[j].lat, arr[j].lon, "K"));
}
}
}
var result = Prim(g);
console.log("res " +result);
var i,j;
for (i = 0; i < arr.length; i++) {
for (j = i; j < arr.length; j++) {
if (i != j) {
var arcs =
{
"type": "Feature",
"geometry": {
type: "LineString",
coordinates: [
[parseFloat(arr[i].lon), parseFloat(arr[i].lat)],
[parseFloat(arr[j].lon), parseFloat(arr[j].lat)]
]
},
"properties": {
"sToponym": arr[i].city,
"eToponym": arr[j].city,
"Meter": distance(arr[i].lat, arr[i].lon
, arr[j].lat, arr[j].lon, "K")
}
};
var isInTree = false;
result.forEach(function(r) {
if(r.src==arr[i].city && r.dst == arr[j].city) {
isInTree=true;
}
});
//if(Math.abs(result.indexOf(arr[i].city) -
// result.indexOf(arr[j].city)) < 2)
if(isInTree)
geoJson.features.push(arcs);
}
}
}
//alert(JSON.stringify(msp));
var blob = new Blob([JSON.stringify(geoJson)], {type: "text/plain;charset=utf-8"});
saveAs(blob, "arcs.json");
return geoJson;
}
function distance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1 / 180
var radlat2 = Math.PI * lat2 / 180
var theta = lon1 - lon2
var radtheta = Math.PI * theta / 180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180 / Math.PI
dist = dist * 60 * 1.1515
if (unit == "K") {
dist = dist * 1.609344
}
if (unit == "N") {
dist = dist * 0.8684
}
return dist;
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="geo_bio.css" />
<link rel="stylesheet" href="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/css/d3.slider.css" />
<link rel="stylesheet" href="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/css/d3map.css">
<link rel="stylesheet" href="example.css">
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/d3.carto.map.js" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/topojson.v1.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/d3.geo.projection.v0.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/tile.js" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/d3.quadtiles.js" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/dijkstra.js" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/jquery-1.11.1.js"> </script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/d3.slider.js"></script>
<script src="geo_bio.js" charset="utf-8" type="text/javascript"></script>
<script src="helper.js" charset="utf-8" type="text/javascript"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/FileSaver.min.js"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/graph_msp.js"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/ext_lib/data-structures-1.4.2.min.js"></script>
<script src="https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/js/graph.js"></script>
<script src="gen_voronoi_layer.js"></script>
<script src="setup_city_list.js"></script>
</head>
<body onload="makeSomeMaps();">
<div id="geoMap"></div>
<div onclick="closeOpen('leftPanel')" id="closeLeft" class="rightarrow"></div>
<div onclick="closeOpen('rightPanel')" id="closeRight" class="leftarrow"></div>
<div style="height: auto; width: auto; right: 15px;" id="rightControls" class="controlsDiv">
<div class="buttonContainer" style="height: auto; width: auto;">
<div id="displayOptionsContainer" class="buttonContainer">
<span style="color:gray;">DISPLAY</span>
</div>
</div>
</div>
<div class="controlsDiv" id="controlbar">
<div id="controlbarScroller">
<a class="tab" id="person" style="background: white;" onclick="showTab('persontab');">People</a>
<a class="tab" id="route" onclick="showTab('routetab');">Route</a>
<a class="tab" id="network" onclick="showTab('networktab');">Network</a>
<div id="persontab">
<div class="buttonContainer" style="height:80px;">
<div style="margin-bottom:10px;padding: 5px 10px; background: white;color:gray;">
<div style="margin-bottom: 7px;"><span style="width:25px;color:gray;">
THE TIME FRAME OF PEOPLE:
</span></div>
<div id="personSlider">
<div id="yearSlider" style="width: 250px;left: 10px;">
</div>
<table style="width: 250px;">
<tr><td><div id="yearValue">
<span id="minYear"></span>
To <span id="maxYear"></span> AH
</div></td>
<td>
<button id="calcConnections" style="left: 300px;">Go!</button>
</td>
</tr>
</table>
<div style="color:gray;padding-right:5px;display: inline-block;margin-top: 3px;">
PATH VIS:
</div>
<input onclick="" type="radio" value="0" name="pathvis" checked="">
<label for="op" class="priority-picker-label">Complete</label>
<input onclick="" type="radio" value="1" name="pathvis">
<label for="sp" class="priority-picker-label">Arc</label>
</div>
</div>
</div>
</div>
<div id="routetab" style="display: none;">
<div class="buttonContainer" style="background: white;">
<fieldset style="border: none;" id="priorityForm" class="checkBoxSelect">
<div style="color:gray;padding-right:5px;display: inline-block;margin-top: 3px;">PRIORITY: </div>
<input onclick="" type="radio" value="0" name="priority" id="op">
<label for="op" class="priority-picker-label">Optimal</label>
<input onclick="" type="radio" value="1" name="priority" id="sp" checked="">
<label for="sp" class="priority-picker-label">Shortest</label>
</fieldset>
</div>
<div class="buttonContainer" id="networkModeContainer" style="overflow:hidden;
padding-left:10px;padding-top: 10px;background:white;padding-bottom: 9px;">
<div class="fieldTitle" style="text-transform: uppercase;color:gray;">Network Models</div>
<fieldset style="margin-bottom: 8px;padding-bottom: 13px;border:none;border-bottom: 1px solid #414042;">
<form id="modeForm" onclick="updateBGRoutes();">
<!-- to put checkboxes in two columns, should set smaller width of div like width:130px-->
<div style="width:320px;float:left;">
<input type="checkbox" class="mode-checkbox" value="alMuq" name="mode" id="alMuqCheck" checked="">
<label for="alMuqCheck" class="mode-picker-label"></label>AL-MUQADDASI</div>
<div style="width:320px;float:left;">
<input id="alIstakCheck" class="mode-checkbox" type="checkbox" value="alIstak" name="mode" checked="">
<label for="alIstakCheck" class="mode-picker-label"></label>AL-ISTAKHRI</div>
<div style="width:320px;float:left;">
<input id="ibnKhurdCheck" class="mode-checkbox" type="checkbox" value="ibnKhurd" name="mode" checked="">
<label for="ibnKhurdCheck" class="mode-picker-label"></label>IBN KHURDHADHBIH</div>
<div style="width:320px;float:left;">
<input id="...Check" class="mode-checkbox" type="checkbox" value="..." name="mode" checked="">
<label for="...Check" class="mode-picker-label"></label>....</div>
<div style="width:320px;float:left;" data="highres" class="helpicon">
<input type="checkbox" class="mode-checkbox" value="....." name="mode" id="....Check">
<label for="....Check" class="mode-picker-label"></label>.....
</div>
</form>
</fieldset>
<div id="modeOptions" style="width:15%;float:left;">
<div style="color:white;">X </div>
<div style="margin-top: 9px;text-align: right;font-size: 14px;text-transform: uppercase;">Road </div>
<div style="margin-top: 13px;text-align: right;font-size: 14px;text-transform: uppercase;">River </div>
<div style="margin-top: 14px;text-align: right;font-size: 14px;text-transform: uppercase;">Sea </div>
</div>
<div style="width:30%;float:left;" data="transfer" class="helpicon">
<div style="width:100%;color:gray;bottom: 10px;">TRANSFER COST</div>
<div style="width:100%;margin-top:16px;"><input type="text" style="text-align: center;height:23px;border-radius: 2px;width:30px;border: 1px #231f20 solid;" id="riverTransferCost" class="controlButton" placeholder="0"></div>
<div style="width:100%;margin-top:6px;"><input type="text" style="text-align: center;height:23px;border-radius: 2px;width:30px;border: 1px #231f20 solid;" id="seaTransferCost" class="controlButton" placeholder="0"></div>
</div>
</div>
</div>
<div id="networktab" style="display: none;">
<div class="buttonContainer" style="background: white;padding: 5px 0;">
<div style="margin-bottom:10px;padding: 5px 10px; background: white;color:gray;">
<div style="margin-bottom: 7px;">
<span style="width:25px;color:gray;">
START:
</span>
<div><select id="networkStart"></select></div>
</br>
Distance Multiplier: <select id="multiplier-select"></select> </br>
</div>
</div>
<!--<fieldset style="border: none;" id="routeFind" class="checkBoxSelect">-->
<div>
</div>
<div>
</div>
<div id="routeDiv" style="margin-bottom:10px;padding: 5px 10px; background: white;height:23px;">
<div style="width:100%;color:gray;"><span style="margin-right:10px;">DIRECTION:</span>
<input style="height:20px;" id="from" class="radio-radio" type="text" name="direction" value="0" checked="">
<label style="color:gray;" for="from" class="mode-picker-label"></label><span style="margin-right:30px;">From</span>
<input id="to" class="radio-radio" type="text" name="direction" value="1">
<label style="color:gray;" for="to" class="mode-picker-label"></label><span style="margin-right:10px;">To</span>
</div>
</div>
<!--</fieldset>-->
</div>
</div>
</div>
</div>
</body>
</html>
Raw
setup_city_list.js
function setup_city_list(voronoiLayer) {
d3.csv("https://rawgit.com/Masoumeh/0390.IbnAhmadMuqaddasi.AhsanTaqasim/master/Data/cornuFiltered.csv", function (csv) {
var prev = '';
// To filter the duplicate names and those containing "RoutPoint"
var filteredData = csv.filter(function (d) {
if (d.arTitle.indexOf('RoutPoint') === -1) {
var test;
if (prev !== d.arTitle) test = true;
prev = d.arTitle;
if (test) return d;
}
});
// alphabetically sort the names (based on eiSearch)
filteredData.sort(function (a, b) {
var nameA = a.arTitle.toUpperCase(); // ignore upper and lowercase
var nameB = b.arTitle.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
// drop down list for starting point of network flow,
// containing arTitles from cornu.csv file
d3.select("#networkStart").on("change", function (d) {
var id = this.options[this.selectedIndex].value;
d3.selectAll('circle').filter(function (d) {
return d.topURI == id
}).attr("r", 10);
var s = graph.getNode(id);
var distances = shortestPath(s, s, 'n');
var network = getNetwork(distances, 5); //multiplier
var sitesByZone = network.values();
var topURI_zone = {};
var c10 = d3.scale.category10();
voronoiLayer.g().selectAll("path")
.style("fill", function (p) {
var turi = p['properties']['node']['topURI'];
var ttype = p['properties']['node']['topType'];
var pol = d3.geom.polygon(p["geometry"]["coordinates"][0]);
if (pol.area() > 10) return "rgba(0,0,0,0)";
//if(ttype=="waystations") return "rgba(0,0,0,0)";
//if(ttype=="sites") return "rgba(0,0,0,0)";
//if(ttype=="waters") return "rgba(0,0,0,0)";
for (var i = 0; i < sitesByZone.length; i++) {
var zone = sitesByZone[i];
if (zone.indexOf(turi) != -1) {
//if(turi.indexOf("NAHRAWAN")!=-1) {
// console.log("salam " + turi);
// return "yellow";
//}
return c10(i + 1);
}
}
return "rgba(0,0,0,0)";
});
})
.selectAll("option").data(filteredData).enter()
.append("option")
.attr("value", function (d) {
return d.topURI;
})
.text(function (d) {
return d.eiSearch;
});
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment