Skip to content

Instantly share code, notes, and snippets.

@kampar

kampar/hot_stat_20171204.html

Created December 20, 2017 16:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kampar/90394898e685a54173df8569d88ab66d to your computer and use it in GitHub Desktop.
Save kampar/90394898e685a54173df8569d88ab66d to your computer and use it in GitHub Desktop.
Download ZIP
demo convert HOT (humanitarian OSM team) indonesian statistics on building as 2012 Dec 04, originally on SVG, converted into canvas
Raw
hot_stat_20171204.html
<body><h2>Laporan Statistik Bangunan pada Senin, 4 Desember 2017 </h2>
<div id="chart"><svg width="1020" height="1050" id="myViewer" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" style="overflow:scroll;margin:0;"><g transform="translate(170,20)"><text x="0" dy="-3" text-anchor="middle">0</text><text x="59.96898746648162" dy="-3" text-anchor="middle">200000</text><text x="119.93797493296324" dy="-3" text-anchor="middle">400000</text><text x="179.90696239944486" dy="-3" text-anchor="middle">600000</text><text x="239.8759498659265" dy="-3" text-anchor="middle">800000</text><text x="299.8449373324081" dy="-3" text-anchor="middle">1000000</text><text x="359.81392479888973" dy="-3" text-anchor="middle">1200000</text><text x="419.7829122653714" dy="-3" text-anchor="middle">1400000</text><text x="479.751899731853" dy="-3" text-anchor="middle">1600000</text><text x="539.7208871983346" dy="-3" text-anchor="middle">1800000</text><text x="599.6898746648162" dy="-3" text-anchor="middle">2000000</text><text x="659.6588621312978" dy="-3" text-anchor="middle">2200000</text><line x1="0" x2="0" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="59.96898746648162" x2="59.96898746648162" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="119.93797493296324" x2="119.93797493296324" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="179.90696239944486" x2="179.90696239944486" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="239.8759498659265" x2="239.8759498659265" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="299.8449373324081" x2="299.8449373324081" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="359.81392479888973" x2="359.81392479888973" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="419.7829122653714" x2="419.7829122653714" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="479.751899731853" x2="479.751899731853" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="539.7208871983346" x2="539.7208871983346" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="599.6898746648162" x2="599.6898746648162" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line><line x1="659.6588621312978" x2="659.6588621312978" y1="0" y2="1030" style="stroke: rgb(204, 204, 204);"></line></g><g transform="translate(160,30)"><text y="15" stroke="none" fill="black" dy=".35em" text-anchor="end">Aceh</text><text y="45" stroke="none" fill="black" dy=".35em" text-anchor="end">Sumatera Utara</text><text y="75" stroke="none" fill="black" dy=".35em" text-anchor="end">Sumatera Barat</text><text y="105" stroke="none" fill="black" dy=".35em" text-anchor="end">Riau</text><text y="135" stroke="none" fill="black" dy=".35em" text-anchor="end">Kepulauan Riau</text><text y="165" stroke="none" fill="black" dy=".35em" text-anchor="end">Jambi</text><text y="195" stroke="none" fill="black" dy=".35em" text-anchor="end">Kep. Bangka Belitung</text><text y="225" stroke="none" fill="black" dy=".35em" text-anchor="end">Bengkulu</text><text y="255" stroke="none" fill="black" dy=".35em" text-anchor="end">Sumatera Selatan</text><text y="285" stroke="none" fill="black" dy=".35em" text-anchor="end">Lampung</text><text y="315" stroke="none" fill="black" dy=".35em" text-anchor="end">Banten</text><text y="345" stroke="none" fill="black" dy=".35em" text-anchor="end">Jawa Barat</text><text y="375" stroke="none" fill="black" dy=".35em" text-anchor="end">DKI Jakarta</text><text y="405" stroke="none" fill="black" dy=".35em" text-anchor="end">Jawa Tengah</text><text y="435" stroke="none" fill="black" dy=".35em" text-anchor="end">Jawa Timur</text><text y="465" stroke="none" fill="black" dy=".35em" text-anchor="end">D.I Yogyakarta</text><text y="495" stroke="none" fill="black" dy=".35em" text-anchor="end">Kalimantan Barat</text><text y="525" stroke="none" fill="black" dy=".35em" text-anchor="end">Kalimantan Tengah</text><text y="555" stroke="none" fill="black" dy=".35em" text-anchor="end">Kalimantan Timur</text><text y="585" stroke="none" fill="black" dy=".35em" text-anchor="end">Kalimantan Selatan</text><text y="615" stroke="none" fill="black" dy=".35em" text-anchor="end">Kalimantan Utara</text><text y="645" stroke="none" fill="black" dy=".35em" text-anchor="end">Bali</text><text y="675" stroke="none" fill="black" dy=".35em" text-anchor="end">Nusa Tenggara Barat</text><text y="705" stroke="none" fill="black" dy=".35em" text-anchor="end">Nusa Tenggara Timur</text><text y="735" stroke="none" fill="black" dy=".35em" text-anchor="end">Maluku</text><text y="765" stroke="none" fill="black" dy=".35em" text-anchor="end">Maluku Utara</text><text y="795" stroke="none" fill="black" dy=".35em" text-anchor="end">Sulawesi Utara</text><text y="825" stroke="none" fill="black" dy=".35em" text-anchor="end">Gorontalo</text><text y="855" stroke="none" fill="black" dy=".35em" text-anchor="end">Sulawesi Tengah</text><text y="885" stroke="none" fill="black" dy=".35em" text-anchor="end">Sulawesi Barat</text><text y="915" stroke="none" fill="black" dy=".35em" text-anchor="end">Sulawesi Selatan</text><text y="945" stroke="none" fill="black" dy=".35em" text-anchor="end">Sulawesi Tenggara</text><text y="975" stroke="none" fill="black" dy=".35em" text-anchor="end">Papua Barat</text><text y="1005" stroke="none" fill="black" dy=".35em" text-anchor="end">Papua</text></g><g transform="translate(170,30)"><rect y="0" height="30" width="81.07627198505915" stroke="white" fill="steelblue"></rect><rect y="30" height="30" width="32.785345292862836" stroke="white" fill="steelblue"></rect><rect y="60" height="30" width="62.65619779485466" stroke="white" fill="steelblue"></rect><rect y="90" height="30" width="2.223050365382474" stroke="white" fill="steelblue"></rect><rect y="120" height="30" width="0.6986387039845109" stroke="white" fill="steelblue"></rect><rect y="150" height="30" width="2.3951613594112757" stroke="white" fill="steelblue"></rect><rect y="180" height="30" width="0.6704532798752645" stroke="white" fill="steelblue"></rect><rect y="210" height="30" width="11.214800346106728" stroke="white" fill="steelblue"></rect><rect y="240" height="30" width="14.193160108629538" stroke="white" fill="steelblue"></rect><rect y="270" height="30" width="32.29539866526168" stroke="white" fill="steelblue"></rect><rect y="300" height="30" width="149.10269260753725" stroke="white" fill="steelblue"></rect><rect y="330" height="30" width="700" stroke="white" fill="steelblue"></rect><rect y="360" height="30" width="498.7017999263239" stroke="white" fill="steelblue"></rect><rect y="390" height="30" width="225.40573303520182" stroke="white" fill="steelblue"></rect><rect y="420" height="30" width="551.5806540046434" stroke="white" fill="steelblue"></rect><rect y="450" height="30" width="154.10410616224183" stroke="white" fill="steelblue"></rect><rect y="480" height="30" width="14.681907356481362" stroke="white" fill="steelblue"></rect><rect y="510" height="30" width="10.377333436137313" stroke="white" fill="steelblue"></rect><rect y="540" height="30" width="22.602311376116923" stroke="white" fill="steelblue"></rect><rect y="570" height="30" width="1.985873019952539" stroke="white" fill="steelblue"></rect><rect y="600" height="30" width="2.977760072648145" stroke="white" fill="steelblue"></rect><rect y="630" height="30" width="161.31987457914624" stroke="white" fill="steelblue"></rect><rect y="660" height="30" width="179.83170132017443" stroke="white" fill="steelblue"></rect><rect y="690" height="30" width="138.91935884585402" stroke="white" fill="steelblue"></rect><rect y="720" height="30" width="38.505487162353184" stroke="white" fill="steelblue"></rect><rect y="750" height="30" width="27.768939491291647" stroke="white" fill="steelblue"></rect><rect y="780" height="30" width="85.69088557060492" stroke="white" fill="steelblue"></rect><rect y="810" height="30" width="1.0761434800860126" stroke="white" fill="steelblue"></rect><rect y="840" height="30" width="17.28785970683732" stroke="white" fill="steelblue"></rect><rect y="870" height="30" width="21.221525439701182" stroke="white" fill="steelblue"></rect><rect y="900" height="30" width="344.96800226168756" stroke="white" fill="steelblue"></rect><rect y="930" height="30" width="36.65904203826021" stroke="white" fill="steelblue"></rect><rect y="960" height="30" width="30.563494307229693" stroke="white" fill="steelblue"></rect><rect y="990" height="30" width="9.522475519802617" stroke="white" fill="steelblue"></rect><text x="81.07627198505915" y="15" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">270,394</text><text x="32.785345292862836" y="45" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">109,341</text><text x="62.65619779485466" y="75" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">208,962</text><text x="2.223050365382474" y="105" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">7,414</text><text x="0.6986387039845109" y="135" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">2,330</text><text x="2.3951613594112757" y="165" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">7,988</text><text x="0.6704532798752645" y="195" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">2,236</text><text x="11.214800346106728" y="225" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">37,402</text><text x="14.193160108629538" y="255" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">47,335</text><text x="32.29539866526168" y="285" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">107,707</text><text x="149.10269260753725" y="315" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">497,266</text><text x="700" y="345" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">2,334,540</text><text x="498.7017999263239" y="375" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">1,663,199</text><text x="225.40573303520182" y="405" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">751,741</text><text x="551.5806540046434" y="435" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">1,839,553</text><text x="154.10410616224183" y="465" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">513,946</text><text x="14.681907356481362" y="495" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">48,965</text><text x="10.377333436137313" y="525" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">34,609</text><text x="22.602311376116923" y="555" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">75,380</text><text x="1.985873019952539" y="585" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">6,623</text><text x="2.977760072648145" y="615" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">9,931</text><text x="161.31987457914624" y="645" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">538,011</text><text x="179.83170132017443" y="675" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">599,749</text><text x="138.91935884585402" y="705" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">463,304</text><text x="38.505487162353184" y="735" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">128,418</text><text x="27.768939491291647" y="765" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">92,611</text><text x="85.69088557060492" y="795" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">285,784</text><text x="1.0761434800860126" y="825" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">3,589</text><text x="17.28785970683732" y="855" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">57,656</text><text x="21.221525439701182" y="885" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">70,775</text><text x="344.96800226168756" y="915" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">1,150,488</text><text x="36.65904203826021" y="945" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">122,260</text><text x="30.563494307229693" y="975" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">101,931</text><text x="9.522475519802617" y="1005" dx="3" dy=".35em" text-anchor="start" fill="black" stroke="none">31,758</text><line y1="-10" y2="1030" style="stroke: rgb(0, 0, 0);"></line></g></svg></div>
<script src="d3.v2.min.js"></script>
<script>
function renderChart() {
var data = d3.csv.parse(d3.select('#csv').text());
var valueLabelWidth = 150; // space reserved for value labels (right)
var barHeight = 30; // height of one bar
var barLabelWidth = 170; // space reserved for bar labels
var barLabelPadding = 10; // padding between bar and bar labels (left)
var gridLabelHeight = 20; // space reserved for gridline labels
var gridChartOffset = 10; // space between start of grid and first bar
var maxBarWidth = 700; // width of the bar with the max value
// accessor functions
var barLabel = function(d) { return d['Provinsi']; };
var barValue = function(d) { return parseFloat(d['Jumlah Bangunan']); };
// scales
var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
var y = function(d, i) { return yScale(i); };
var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };
var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);
// svg container element
var chart = d3.select('#chart').append("svg")
.attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
.attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
// grid line labels
var gridContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
.attr("x", x)
.attr("dy", -3)
.attr("text-anchor", "middle")
.text(String);
// vertical grid lines
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#ccc");
// bar labels
var labelsContainer = chart.append('g')
.attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')');
labelsContainer.selectAll('text').data(data).enter().append('text')
.attr('y', yText)
.attr('stroke', 'none')
.attr('fill', 'black')
.attr("dy", ".35em") // vertical-align: middle
.attr('text-anchor', 'end')
.text(barLabel);
// bars
var barsContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')');
barsContainer.selectAll("rect").data(data).enter().append("rect")
.attr('y', y)
.attr('height', yScale.rangeBand())
.attr('width', function(d) { return x(barValue(d)); })
.attr('stroke', 'white')
.attr('fill', 'steelblue');
// bar value labels
barsContainer.selectAll("text").data(data).enter().append("text")
.attr("x", function(d) { return x(barValue(d)); })
.attr("y", yText)
.attr("dx", 3) // padding-left
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "start") // text-align: right
.attr("fill", "black")
.attr("stroke", "none")
.text(function(d) { return d3.format(',')(d3.round(barValue(d), 2)); });
// start line
barsContainer.append("line")
.attr("y1", -gridChartOffset)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#000");
}
</script>
<script id="csv" type="text/csv">Provinsi,Jumlah Bangunan
Aceh,270394
Sumatera Utara,109341
Sumatera Barat,208962
Riau,7414
Kepulauan Riau,2330
Jambi,7988
Kep. Bangka Belitung,2236
Bengkulu,37402
Sumatera Selatan,47335
Lampung,107707
Banten,497266
Jawa Barat,2334540
DKI Jakarta,1663199
Jawa Tengah,751741
Jawa Timur,1839553
D.I Yogyakarta,513946
Kalimantan Barat,48965
Kalimantan Tengah,34609
Kalimantan Timur,75380
Kalimantan Selatan,6623
Kalimantan Utara,9931
Bali,538011
Nusa Tenggara Barat,599749
Nusa Tenggara Timur,463304
Maluku,128418
Maluku Utara,92611
Sulawesi Utara,285784
Gorontalo,3589
Sulawesi Tengah,57656
Sulawesi Barat,70775
Sulawesi Selatan,1150488
Sulawesi Tenggara,122260
Papua Barat,101931
Papua,31758
</script>
<script>renderChart();</script>
<canvas id="canvas" width="1020" height="1050">
</canvas>
<script>
//script untuk convert SVG menjadi PNG eh kampas
// http://jsfiddle.net/epistemex/xfh7nctk/23/
var svgText = document.getElementById("myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
// usage:
drawInlineSVG(ctxt, svgText, function() {
console.log(canvas.toDataURL()); // -> PNG
//alert("see console for output...");
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment