Scales

_.md

[ Launch: Scales ] 5534997 by RobinL

config.json

{"description":"Scales","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var svg = d3.select("svg");

var width = 500
;
var height = 500;

var x = d3.scale.ordinal()
		.domain(["Band A","Band B","Band C","Low","Medium","High"])
        .rangeRoundBands([0, width], 0);

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(50," + height + ")")
        .call(xAxis);

var x2 = d3.scale.ordinal()
		.domain(["Discharge"])
        .rangeRoundBands([0, width], 0);

var x2Axis = d3.svg.axis()
        .scale(x2)
        .orient("bottom");

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(50," + height*2/3 + ")")
        .call(x2Axis);

//var string = x2("Discharge")
var string = x2.rangeBand();

svg.append("text")
        .attr("dx", x2.rangeBand())
		.attr("dy",20)
        .text("top")
		.attr("transform", "translate(50," + height*2/3 + ")")

svg.append("text")
        .attr("dx", x2("Discharge"))
		.attr("dy",20)
        .text("bottom")
		.attr("transform", "translate(50," + height*2/3 + ")")

svg.append("text")
        .attr("dx", x2("Discharge")+x2.rangeBand()/2)
		.attr("dy",20)
        .text("middle")
		.attr("transform", "translate(50," + (height*2/3 + 30)+ ")")


//Log scale

var x3 = d3.scale.log()
		.domain([1,100])
        .range([0,width])
		

var x3Axis = d3.svg.axis()
        .scale(x3)
        .orient("bottom")
		.tickFormat(function(d,i) {return d;})
		

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(50," + height*1/3 + ")")
		.style("font","10px sans-serif")
        .call(x3Axis)
		

style.css

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

text {text-anchor: middle;}