Data Visualization: February 2015

Data Visualization Week 4

Tutorials

>> https://github.com/mbostock/d3/wiki/Tutorials <<

— Let’s Make a Bar Chart I, II, III

Without Javascript code

<!DOCTYPE html>

<style>

.chart div {

font: 10px sans-serif;

background-color: steelblue;

text-align: right;

padding: 3px;

margin: 1px;

color: white;

}

</style>

</div>

Result

Using Javascript code (SVG)

<!DOCTYPE html>
<style>
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
<svg class="chart" width="420" height="120">
<g transform="translate(0,0)">
<rect width="40" height="19"></rect>
<text x="37" y="9.5" dy=".35em">4</text>
</g>
<g transform="translate(0,20)">
<rect width="80" height="19"></rect>
<text x="77" y="9.5" dy=".35em">8</text>
</g>
<g transform="translate(0,40)">
<rect width="150" height="19"></rect>
<text x="147" y="9.5" dy=".35em">15</text>
</g>
<g transform="translate(0,60)">
<rect width="160" height="19"></rect>
<text x="157" y="9.5" dy=".35em">16</text>
</g>
<g transform="translate(0,80)">
<rect width="230" height="19"></rect>
<text x="227" y="9.5" dy=".35em">23</text>
</g>
<g transform="translate(0,100)">
<rect width="420" height="19"></rect>
<text x="417" y="9.5" dy=".35em">42</text>
</g>
</svg>

Result

Using Javascript code (D3)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [4, 8, 15, 16, 23, 42];
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>

Result

spreadsheet data Format
CSV, DSV, TSV, LTSV ?
SV > separated values การแบ่งค่าต่างๆโดย . . .
CSV > Comma-separated values ใช้ คอมม่า ในการแบ่งข้อมูล

Year,Make,Model
1997,Ford,E350
2000,Mercury,Cougar

DSV > Delimiter-separated values ใช้ ดับเบิ้ลโค้ดและคอมม่า ในการแบ่งข้อมูล

"Date","Pupil","Grade"
"25 May","Bloggs, Fred","C"
"25 May","Doe, Jane","B"
"15 July","Bloggs, Fred","A"
"15 April","Muniz, Alvin ""Hank""","A"

TSV > Tab-separated values ใช้ แทป ในการแบ่งข้อมูล

name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Shephard 23
Kwon 42

LTSV > Labeled Tab-separated values ใช้ เลเบลและแทป ในการแบ่งข้อมูล

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-agent}i\"" combined

for more information about LSTV >> http://ltsv.org/ <<

Pages

Wednesday, February 11, 2015

Data Visualization | Week 4

Data Visualization Week 4