map_Russia

forked from anonymous's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <script src='https://d3js.org/d3.v4.js'></script>
  <script src='https://d3js.org/topojson.v1.js'></script>
  <script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
  <script src='https://d3js.org/colorbrewer.v1.js'></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
var width = 960
var height = 500

var colorDomain = d3.range(300, 1501, 300)

d3.queue()
  .defer(d3.json, 'https://d3.datalaboratory.ru/data/russia.json')
	//.defer(d3.json, 'confluence.json')
  .await(ready)

function ready(error, map) {
  var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)

var projection = d3.geoAlbers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(700)
    .translate([width * 0.5, height * 0.5])

var path = d3.geoPath()
    .projection(projection)
  
  var mapData = topojson.feature(map, map.objects.russia).features
  
  svg.append('g')
    .selectAll('path')
    .data(mapData)
    .enter()
    .append('path')
  	.style("fill", "steelblue")
    .attr('d', path)

aa = [50, 40]  
bb = [50, 50]
cc = [60, 30]
dd = [60, 30]
ee = [60, 30]
ff = [90, 90]

var data = d3.json('confluence.json', function(data) {
return data
});

//var data = d3.json("confluence.json", function(data) {
//    console.log(data); // this is your data
//});

data = [aa, bb, cc, dd, ee, ff]
projectedData = data.map(function(d) {
  return projection([d[1], d[0]]);
})

var point = svg
		.append('g')
		.selectAll("g")
		.data(projectedData)
		.enter()
		.append("g")

//point
//  	.append('circle')
//		.attr("r", 10)
//		.style("fill", "red")
//		.attr('transform', function(d) {
//      return 'translate(' + d[0] + ',' + d[1] + ')';
//		})

var hexbin = d3.hexbin()
    .extent([[0, 0], [width, height]])
    .radius(10);
  
var radius = d3.scaleSqrt()
    .domain([0, 12])
    .range([0, 20]);

}
  </script>
</body>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://d3js.org/topojson.v1.js to a secure url

Modified http://d3js.org/colorbrewer.v1.js to a secure url

https://d3js.org/d3.v4.js

https://d3js.org/topojson.v1.js

https://d3js.org/d3-hexbin.v0.2.min.js

https://d3js.org/colorbrewer.v1.js