pere/datapublishers.json

## datapublishers.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              datapublishers.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>France bubbling</title>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.4"></script>

    <style type="text/css">


svg {
  width: 900px;
  height: 500px;
  border: solid 1px #ccc;
  background: #eee;
}

line {
  stroke: brown;
  stroke-dasharray: 4,2;
}

path {
  fill: #ccc;
  stroke: #fff;
}

div {
  width: 900px;
}

    </style>
  </head>
  <body>
    <h3>Mercator Projection</h3>
    <script type="text/javascript">

  width= 900;
  height= 500;

//focusing france on SVG
  xy=d3.geo.mercator().translate([453,1872]).scale(11000)
  path=d3.geo.path().projection(xy);

var svg = d3.select("body")
  .append("svg")
  .append("g")
  .attr("id", "polygons");

//svg.append("g").attr("id", "polygons");
//svg.append("g").attr("id", "points")

  //.append("svg").attr("id", "points")

d3.json('regions.json', function(collection) {
console.warn(collection.features)
 svg.select("#polygons")
    .selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", d3.geo.path().projection(xy));
console.info(d3.geo.path().projection(xy))

});
/*
d3.json('datapublishers.json', function(data) {

var force = d3.layout.force()
                        .charge(-0.9)
                        .nodes(data.features)
                        .size([960, 500])  //without size does not work
                        .size([100, 100])
                        .start();

 var to_bubble=[]
  filter_by_city =function (city)
  {

       data.features.forEach(function(data) {
        if (data.properties.city==city)
            {
                to_bubble.push(data)
            }


   })
       return to_bubble;
  }


                    var node = d3.select("svg").selectAll("g")
                        .data(data.features)  //filter_by_city('Paris')
                        .enter().append("g")
                        .attr("id", function(d){ return d.properties.city;})

                    node.append("circle")

                        .attr("transform", function(d) {
                          return "translate(" + xy(d.geometry.coordinates) + ")"; })
                        .attr("id", function(d){ return d.id;})
                        .attr("class", "node")
                        .attr('fill','blue')
                        .attr('opacity',0.5)
                        .attr('r', function(d) {

                          return d.properties.num_collections*5})

                        .call(force.drag);


                       force.on("tick", function() {
                        node.attr(
                            "transform",
                            function(d) { return "translate(" + d.x + "," + d.y + ")"; }
                        );
                    });


});
*/


    </script>
  </body>
</html>

## regions.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              regions.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>France bubbling</title>

	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.4"></script>

	<style type="text/css">



	svg {
	width: 900px;
	height: 500px;
	border: solid 1px #ccc;
	background: #eee;
	}

	line {
	stroke: brown;
	stroke-dasharray: 4,2;
	}

	path {
	fill: #ccc;
	stroke: #fff;
	}

	div {
	width: 900px;
	}

	</style>
	</head>
	<body>
	<h3>Mercator Projection</h3>
	<script type="text/javascript">

	width= 900;
	height= 500;

	//focusing france on SVG
	xy=d3.geo.mercator().translate([453,1872]).scale(11000)
	path=d3.geo.path().projection(xy);

	var svg = d3.select("body")
	.append("svg")
	.append("g")
	.attr("id", "polygons");

	//svg.append("g").attr("id", "polygons");
	//svg.append("g").attr("id", "points")

	//.append("svg").attr("id", "points")

	d3.json('regions.json', function(collection) {
	console.warn(collection.features)
	svg.select("#polygons")
	.selectAll("path")
	.data(collection.features)
	.enter().append("path")
	.attr("d", d3.geo.path().projection(xy));
	console.info(d3.geo.path().projection(xy))

	});
	/*
	d3.json('datapublishers.json', function(data) {

	var force = d3.layout.force()
	.charge(-0.9)
	.nodes(data.features)
	.size([960, 500]) //without size does not work
	.size([100, 100])
	.start();

	var to_bubble=[]
	filter_by_city =function (city)
	{

	data.features.forEach(function(data) {
	if (data.properties.city==city)
	{
	to_bubble.push(data)
	}


	})
	return to_bubble;
	}


	var node = d3.select("svg").selectAll("g")
	.data(data.features) //filter_by_city('Paris')
	.enter().append("g")
	.attr("id", function(d){ return d.properties.city;})

	node.append("circle")

	.attr("transform", function(d) {
	return "translate(" + xy(d.geometry.coordinates) + ")"; })
	.attr("id", function(d){ return d.id;})
	.attr("class", "node")
	.attr('fill','blue')
	.attr('opacity',0.5)
	.attr('r', function(d) {

	return d.properties.num_collections*5})

	.call(force.drag);


	force.on("tick", function() {
	node.attr(
	"transform",
	function(d) { return "translate(" + d.x + "," + d.y + ")"; }
	);
	});



	});
	*/




	</script>
	</body>
	</html>