Convert JavaScript-generated SVG to a file
This is late, but with D3.js it would be simple to inline the CSS. You would do something like:
d3.json("../data/us-counties.json", function(json) {
counties.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("fill", data ? quantize : null)
.attr("d", path);
});
d3.json("unemployment.json", function(json) {
data = json;
counties.selectAll("path")
.attr("fill", quantize);
});
function quantize(d) {
return "hsla(120, 50%, 50%, " + Math.min(8, ~~(data[d.id] * 9 / 12)) + ")";
}
My function quantize is just a quick hack for demonstration, but you could look at colorbrewer to work out the logic for applying quantiles to colors.
Here's a nice way to use svg-crowbar.js to provide a button on your site to allow your users to download your visualization as svg.
1) Define your button's CSS:
.download {
background: #333;
color: #FFF;
font-weight: 900;
border: 2px solid #B10000;
padding: 4px;
margin:4px;
}
2) Define your button's HTML/JS:
<i class="download" href="javascript:(function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"><!--⤋--><big>⇩</big> Download</i>
Here's a closer look at that same javascript:
javascript:(function (){
var e = document.createElement('script');
if (window.location.protocol === 'https:') {
e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js');
} else {
e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js');
}
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);
})();
3) You're done. This produces an svg download that Inkscape can open.
Note: svg-crowbar.js is loaded from https://rawgit.com or http://nytimes.github.com; you may prefer to integrate it into your website/folder.