jsanz/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example generates a SVG graphic from a CartoDB SQL API request. The SVG is pasted on a text area so it can be used on any other editing software like Inskcape or Adobe Illustrator. The SQL generates some random data that emulates population information.
Check it. Use your mouse to pan and zoom, then copy the textarea contents into a new text file and open it with your browser or any SVG compatible software.
This example is heavily based on this one from Andrew Hill. More about D3 and CartoDB on this nice blog post.

  
## index.html
    <!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CartoDB-D3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

        <style>
            body{
                background:white;
            }
            svg {
              width: 960px;
              height: 500px;
              background: none;
            }
            svg:active {
              cursor: move;
              cursor: -moz-grabbing;
              cursor: -webkit-grabbing;
            }
            .globe {
              fill: #ccc;
              fill-opacity: 1;
              stroke: #111;
              stroke-width:1px;
            }
            #first_layer path {
              stroke: #333;
              stroke-linecap: round;
              stroke-linejoin: round;
            }

            textarea{
              width: 960px;
              font-family: monospace;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="map"></div>
        <div id="text">
            <textarea name="" id="svg" cols="30" rows="10"></textarea>
        </div>
        <!-- include cartodb.js library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
        <script>
            var width = 960; height = 500;
            $( document ).ready(function(){
                var sqlStm = "";
                // Define our SVG element outside our SQL functions
                var svg = d3.select("#map")
                      .append("svg")
                      .call(d3.behavior.zoom()
                          .on("zoom", redraw))
                      .append("g");

                // Define the color scale for our choropleth
                var fill = d3.scale.linear()
                  .domain([0, 9])
                  .range([1,2,3,4,5,6,7,8,9,10].map(d3.scale.category10()));

                // Our projection.
                var xy = d3.geo.albers()
                .center([2, 46.5])
                .rotate([0, 0])
                .parallels([40, 51])
                .scale(2800)
                .translate([width / 2, height / 2]);

                // Our path
                var path = d3.geo.path().projection(xy);

                // Add our first layer
                svg.append("g").attr("id", "first_layer");

                // Use D3 AJAX method to query CartoDB table
                var sqlStm = "select floor(random()*10) as population, ST_Simplify(the_geom,0.01) as the_geom from france_adm2_departments";

                d3.json("http://jsanz.cartodb.com/api/v2/sql?q=" + sqlStm + "&format=geojson&dp=5", function(collection) {
                    svg.select("#first_layer")
                      .selectAll("path")
                        .data(collection.features)
                      .enter().append("path")
                      .attr("fill", function(d) {
                        return fill(d.properties.population);
                       })
                      .attr("stroke-width", "0.5px")
                      .attr("fill-opacity", "0.7")
                      .attr("stroke","#333")
                      .attr("d", path.projection(xy));

                    updateSVG();
                });

                // Handles our zoom
                function redraw() {
                svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
                $('#svg').text();
                }

                function updateSVG(){
                    $('#svg').text(
                        '<?xml version="1.0" standalone="no"?>\r\n' +
                        '<svg viewBox="0 0 ' + width + ' ' + height + '"' +
                        ' xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">\r\n' +
                        $('svg').html() +
                        '\r\n</svg>'
                    );
                }
            });
        </script>
    </body>
</html>
	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>CartoDB-D3</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

	<style>
	body{
	background:white;
	}
	svg {
	width: 960px;
	height: 500px;
	background: none;
	}
	svg:active {
	cursor: move;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	}
	.globe {
	fill: #ccc;
	fill-opacity: 1;
	stroke: #111;
	stroke-width:1px;
	}
	#first_layer path {
	stroke: #333;
	stroke-linecap: round;
	stroke-linejoin: round;
	}

	textarea{
	width: 960px;
	font-family: monospace;
	}
	</style>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
	<div id="map"></div>
	<div id="text">
	<textarea name="" id="svg" cols="30" rows="10"></textarea>
	</div>
	<!-- include cartodb.js library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
	<script>
	var width = 960; height = 500;
	$( document ).ready(function(){
	var sqlStm = "";
	// Define our SVG element outside our SQL functions
	var svg = d3.select("#map")
	.append("svg")
	.call(d3.behavior.zoom()
	.on("zoom", redraw))
	.append("g");

	// Define the color scale for our choropleth
	var fill = d3.scale.linear()
	.domain([0, 9])
	.range([1,2,3,4,5,6,7,8,9,10].map(d3.scale.category10()));

	// Our projection.
	var xy = d3.geo.albers()
	.center([2, 46.5])
	.rotate([0, 0])
	.parallels([40, 51])
	.scale(2800)
	.translate([width / 2, height / 2]);

	// Our path
	var path = d3.geo.path().projection(xy);

	// Add our first layer
	svg.append("g").attr("id", "first_layer");

	// Use D3 AJAX method to query CartoDB table
	var sqlStm = "select floor(random()*10) as population, ST_Simplify(the_geom,0.01) as the_geom from france_adm2_departments";

	d3.json("http://jsanz.cartodb.com/api/v2/sql?q=" + sqlStm + "&format=geojson&dp=5", function(collection) {
	svg.select("#first_layer")
	.selectAll("path")
	.data(collection.features)
	.enter().append("path")
	.attr("fill", function(d) {
	return fill(d.properties.population);
	})
	.attr("stroke-width", "0.5px")
	.attr("fill-opacity", "0.7")
	.attr("stroke","#333")
	.attr("d", path.projection(xy));

	updateSVG();
	});

	// Handles our zoom
	function redraw() {
	svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	$('#svg').text();
	}

	function updateSVG(){
	$('#svg').text(
	'<?xml version="1.0" standalone="no"?>\r\n' +
	'<svg viewBox="0 0 ' + width + ' ' + height + '"' +
	' xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">\r\n' +
	$('svg').html() +
	'\r\n</svg>'
	);
	}
	});
	</script>
	</body>
	</html>