Skip to content

Instantly share code, notes, and snippets.

@EmbraceLife

EmbraceLife/.block

Last active August 1, 2016 05:37
Show Gist options
  • Save EmbraceLife/645e9387c123986ea5cd290511b45562 to your computer and use it in GitHub Desktop.
Save EmbraceLife/645e9387c123986ea5cd290511b45562 to your computer and use it in GitHub Desktop.
Download ZIP
4. x-y-axis barChart
Raw
.block
license: gpl-3.0
Raw
README.md
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">
<script src="//d3js.org/d3.v4.min.js"></script>
<svg class="chart"></svg>
<style>
.bar {
fill: steelblue;
}
/* within class "axis", all texts */
.axis text {
font: 10px sans-serif;
}
/* within class "axis", all paths and lines */
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
/* within class "x.axis", all paths */
.x.axis path {
display: none;
}
</style>
<script>
// define "margin" object
var margin = {top: 20, right: 30, bottom: 30, left: 40},
// define inner canvas "width" and "height"
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// SVG is set to be full canvas
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
// g is inner canvas
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// only set transform-translate, not width and height
// outcome: chart now is inner canvas g
var yScale = d3.scaleLinear()
.range([height, 0]);
var xScale = d3.scaleBand().rangeRound([0, width]).padding(.1).round(true);
// ---- create x-axis function with xScale
var xAxis = d3.axisBottom(xScale);
// console.log(xAxis); // just a function
var yAxis = d3.axisLeft(yScale);
function type(d) {
d.value = Math.round(+d.value*1000)/1000;
return d;
}
d3.tsv("data.tsv", type, function(error, data) {
xScale.domain(data.map(function(d) { return d.name; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
// ---- draw x-axis -------------------
// 1. upon inner canvas g
// 2. create a g placeholder
// 3. add className "x axis"
// 4. transform-translate to bottom
// 5. call to draw x-axis
var xaxis = chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// length or height of x-axis is depend on xAxis -> xScale
// xScale.range is set within inner canvas width
var yaxis = chart.append("g")
// y-axis origin start at where inner canvas chart starts
.attr("class", "y axis")
.call(yAxis);
// length or height of y-axis is depend on yAxis -> yScale
// yscale.range is set within inner canvas height
var bars =
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.name); })
.attr("y", function(d) { return yScale(d.value); })
.attr("height", function(d) { return height - yScale(d.value); })
.attr("width", xScale.bandwidth());
var texts =
chart.selectAll(".text")
.data(data)
.enter().append("text")
.attr("class", ".text")
.text(function(d){return d.value;})
.attr("text-anchor", "middle")
.attr("x", function(d){return xScale(d.name) + xScale.bandwidth()/2;})
.attr("y", function(d){return yScale(d.value)-1;})
.attr("fill", "orange");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment