# D3js with LiveScript

This is the [D3.js Simple Barchart](http://bl.ocks.org/mbostock/3885304) rewritten in LiveScript.

d3 = window.d3
margin = top: 20, right: 20, bottom: 30, left: 40
width = 400 - margin.left - margin.right
height = 300 - margin.top - margin.bottom

x = d3.scale.ordinal!rangeRoundBands [0, width], 0.1
y = d3.scale.linear!range [height, 0]

xAxis = d3.svg.axis!
  .scale x
  .orient "bottom"

yAxis = d3.svg.axis!
  .scale y
  .orient "left"
  .ticks 10, "%"

svg = d3.select "body" .append "svg"
  .attr "width"  width + margin.left + margin.right
  .attr "height" height + margin.top + margin.bottom
  .append "g"
  .attr "transform", "translate(#{ margin.left },#{ margin.top })"

function type(d)
  d.frequency = +d.frequency
  d

d3.tsv "data.tsv" type, (error, data) ->
  x.domain data.map (.letter)
  y.domain [0, d3.max data, (.frequency)]

  svg.append "g"
    .attr "class"     "x axis"
    .attr "transform" "translate(0,#{ height })"
    .call xAxis

  svg.append "g"
    .attr   "class", "y axis"
    .call   yAxis
    .append "text"
    .attr   "transform"   "rotate(-90)"
    .attr   "y"           6
    .attr   "dy"          ".71em"
    .style  "text-anchor" "end"
    .text   "Frequency"

  svg.selectAll ".bar"
    .data data
    .enter!append "rect"
    .attr "class"    "bar"
    .attr "x"      -> x it.letter
    .attr "width"     x.rangeBand!
    .attr "y"      -> y it.frequency
    .attr "height" -> height - y it.frequency

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

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

.x.axis path {
  display: none;
}

doctype html
link(rel="stylesheet",href="style.css")
script(src="http://d3js.org/d3.v3.min.js")

body
  h1 d3 bar chart in LiveScript

script(src="script.js")

letter	frequency
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