Skip to content

Instantly share code, notes, and snippets.

@EmbraceLife

EmbraceLife/.block

Last active August 1, 2016 03:50
Show Gist options
  • Save EmbraceLife/677054c8f535c77ddd95485523d97fcd to your computer and use it in GitHub Desktop.
Save EmbraceLife/677054c8f535c77ddd95485523d97fcd to your computer and use it in GitHub Desktop.
Download ZIP
3. scaleBand barChart
Raw
.block
license: gpl-3.0
Raw
data.tsv
name value
A .08167
B .01492
C .02782
D .04253
E .12702
F .02288
G .02015
H .06094
I .06966
J .00153
K .00772
L .04025
M .02406
N .06749
O .07507
P .01929
Q .00095
R .05987
S .06327
T .09056
U .02758
V .00978
W .02360
X .00150
Y .01974
Z .00074
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg class="chart"></svg>
<style>
.chart rect {
fill: steelblue;
}
/* text-anchor: start/middle/end; */
.chart text {
fill: cyan;
font: 10px sans-serif;
text-anchor: middle;
}
</style>
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>
var width = 960,
height = 500;
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", height);
var yScale = d3.scaleLinear()
.range([height, 0]);
// ---- map ordinal data with px on x-axis -------------------
// 1. assign xScale a scaleBand func
// 2. set px-range
// 3. set inner and outer padding input value
// 4. step = bandwidth+paddingInner width
// 5. round all the output values
var xScale = d3.scaleBand().range([0, width]).padding(0.2).round(true);
console.log("default domain-range: ", xScale.domain());
console.log("custom range-range: ", xScale.range());
console.log("custom innerPadding: ", xScale.paddingInner());
console.log("custom outerPadding: ", xScale.paddingOuter());
console.log("Check step = bandwidth+paddingInner: ", xScale.step());
console.log("Check bandWidth: ", xScale.bandwidth());
function type(d) {
d.value = Math.round(+d.value*1000)/1000; // coerce to number
return d;
}
/* ---- step 5. load data file into script ---------------------------------------
1. method 1: d3.tsv("data.tsv", type, function(error, data){
...
...
...
});
2. method 2: d3.tsv("data.tsv")
.row(type)
.get(function(error, data){});
-------------------------------------------------------------------- */
d3.tsv("data.tsv", type, function(error, data) {
// set ordinal data's range: array of all data elements
xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + xScale(d.name) + ",0)"; });
bar.append("rect")
.attr("y", function(d) { return yScale(d.value); })
.attr("height", function(d) { return height - yScale(d.value); })
.attr("width", xScale.bandwidth());
bar.append("text")
// each text's x coord inherit from each g's transform-translate, after translate, each rect's topLeft corner its origin as (0, 0)
.attr("x", xScale.bandwidth() / 2)
.attr("y", function(d) { return yScale(d.value) - 10; })
.attr("dy", "0.5em")// it seems change y position
.text(function(d) { return d.value; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment