fabiovalse/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This gist shows the vectorized version of the first three panels of the "Kunyu Wanguo Quantu".
Use imagemagick for converting the jpg file into a bitmap.

convert ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.jpg ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.bmp

The potrace tool is then used to vectorize the bitmap.

./potrace -k 0.2 --svg ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.bmp -o ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.svg

Look at
-t n, --turdsize n
suppress speckles of up to this many pixels.
-k n, --blacklevel n
set the threshold level for converting input images to bitmaps. The potrace algorithm expects a bitmap, thus all pixels of the input images are converted to black or white before processing begins. Pixels whose brightness is less than n are converted to black, all other pixels to white. Here n is a number between 0 and 1. One case is treated specially: if the input is in an indexed color format with exactly 2 colors, then the blacklevel is ignored and the darker of the two colors is mapped to black.

  
## index.coffee
svg = d3.select 'svg'
  .attrs
    viewBox: '-300 -200 9000 5000'

# ZOOM
zoomable_layer = svg.append 'g'

zoom = d3.zoom()
  .scaleExtent([-Infinity,Infinity])
  .on 'zoom', () ->
    zoomable_layer
      .attrs
        transform: d3.event.transform

svg.call zoom

d3.xml 'ricci1-3.svg', (error, documentFragment) ->
  throw error if error

  g = documentFragment.getElementsByTagName('g')[0]
  zoomable_layer.node().appendChild(g)

## index.css
html,body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

svg {
	width: 100%;
	height: 100%;
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>External SVG import & zoom</title>
  </head>
  <body>
    <svg></svg>
    <script src="index.js"></script>
  </body>
</html>

## index.js
// Generated by CoffeeScript 1.10.0
(function() {
  var svg, zoom, zoomable_layer;

  svg = d3.select('svg').attrs({
    viewBox: '-300 -200 9000 5000'
  });

  zoomable_layer = svg.append('g');

  zoom = d3.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() {
    return zoomable_layer.attrs({
      transform: d3.event.transform
    });
  });

  svg.call(zoom);

  d3.xml('ricci1-3.svg', function(error, documentFragment) {
    var g;
    if (error) {
      throw error;
    }
    g = documentFragment.getElementsByTagName('g')[0];
    return zoomable_layer.node().appendChild(g);
  });

}).call(this);

## ricci1-3.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ricci1-3.svg
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	svg = d3.select 'svg'
	.attrs
	viewBox: '-300 -200 9000 5000'

	# ZOOM
	zoomable_layer = svg.append 'g'

	zoom = d3.zoom()
	.scaleExtent([-Infinity,Infinity])
	.on 'zoom', () ->
	zoomable_layer
	.attrs
	transform: d3.event.transform

	svg.call zoom

	d3.xml 'ricci1-3.svg', (error, documentFragment) ->
	throw error if error

	g = documentFragment.getElementsByTagName('g')[0]
	zoomable_layer.node().appendChild(g)
	html,body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	}

	svg {
	width: 100%;
	height: 100%;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
	<link rel="stylesheet" type="text/css" href="index.css">
	<title>External SVG import & zoom</title>
	</head>
	<body>
	<svg></svg>
	<script src="index.js"></script>
	</body>
	</html>
	// Generated by CoffeeScript 1.10.0
	(function() {
	var svg, zoom, zoomable_layer;

	svg = d3.select('svg').attrs({
	viewBox: '-300 -200 9000 5000'
	});

	zoomable_layer = svg.append('g');

	zoom = d3.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() {
	return zoomable_layer.attrs({
	transform: d3.event.transform
	});
	});

	svg.call(zoom);

	d3.xml('ricci1-3.svg', function(error, documentFragment) {
	var g;
	if (error) {
	throw error;
	}
	g = documentFragment.getElementsByTagName('g')[0];
	return zoomable_layer.node().appendChild(g);
	});

	}).call(this);