The following coffeescript compiles to fine javascript when I use “Try coffeescript” on the
http://coffeescript.org page. However, on my computer, I get return where I do not want it. There should be no return in front of drawAC. Any ideas how I can fix it. It appears that indentation should be correct since when I copy, paste it exactly on the coffeescript website, I do not have any problems.
Coffeescript snippet
plotAC = (fc,c,d) ->
acData = (ac(fc, c, d, q) for q in quantities)
qACpairs = d3.zip(quantities, acData)
qACpairs = (item for item in qACpairs when item[1] < 12)
drawAC = canvas.append('svg:path')
.attr({
d: createsvgpath(firmXscale)(qACpairs),
stroke: 'steelblue'
})
return
Compiled JS on my computer with CoffeeScript version 1.4.0
plotAC = function(fc, c, d, q) {
var acData, drawAC, item, qACpairs;
acData = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = quantities.length; _i < _len; _i++) {
q = quantities[_i];
_results.push(ac(params.fc, params.c, params.d, q));
}
return _results;
})();
qACpairs = d3.zip(quantities, acData);
qACpairs = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = qACpairs.length; _i < _len; _i++) {
item = qACpairs[_i];
if (item[1] < 12) {
_results.push(item);
}
}
return _results;
})();
return drawAC = canvas.append('svg:path').attr({
d: createsvgpath(firmXscale)(qACpairs),
stroke: 'steelblue'
});
};
return;
I should add that the following works. However, this does not seem the right indentation to me.
CODE THAT WORKS
plotAC = (fc,c,d) ->
acData = (ac(fc, c, d, q) for q in quantities)
console.log(acData)
qACpairs = d3.zip(quantities, acData)
console.log(qACpairs);
qACpairs = (item for item in qACpairs when item[1] < 12)
console.log(qACpairs);
drawAC = canvas.append('svg:path')
.attr({
d: createsvgpath(firmXscale)(qACpairs),
stroke: 'steelblue'
})
return
FULL CODE
dim =
width: 1200,
height: 600,
padding: 60,
paddingL: 35,
paddingR: 25
canvas = d3.select('#longRunEqm')
.append("svg:svg")
.attr
'width': dim.width,
'height': dim.height
# Rectangle to show boundaries
canvas.append('svg:rect')
.attr({
x: 0,
y: 0,
height: dim.height,
width: dim.width
}).style({
fill: 'none',
stroke: 'gray',
'stroke-width': '2px'
})
###
========================================================================
Market Demand and Supply functions
========================================================================
###
params =
a: 9,
b: 0.1,
c: 2,
d:0.1,
fc: 20,
numFirmsOrig: 100,
numFirms: 100
quantities = d3.range(0,95)
supplyPrices = d3.range(2,11)
inverseDemand = (a,b,q) -> a - (b*q)
demand = (a,b,p) -> (a-p)/b
inverseSupply = (c,d,q) -> c + (d*q)
tc = (fc,c,d,q) -> c*q + (d*q*q)/2 + fc
ac = (fc,c,d,q) -> tc/q
supply = (c,d,p) -> (p-c)/d
marketSupply = (c, d, p) -> (params.numFirms * supply(c,d,p))/100
eqmQuantity = (a,b,c,d) -> (a-c)/(b+d)
eqmPrice = (a,b,c,d) -> ((a*d) + (b*c))/(b+d)
###
========================================================================
Scales
========================================================================
###
marketXscale = d3.scale.linear().domain([0,105])
.range([0+dim.paddingL, (dim.width/2)-dim.paddingR])
firmXscale = d3.scale.linear().domain([0,105])
.range([(dim.width/2)+dim.paddingL, \
dim.width-dim.paddingR])
yscale = d3.scale.linear().domain([0,12])
.range([dim.height-dim.padding, 0+dim.padding])
createsvgpath = (panel) ->
d3.svg.line()
.x (d) ->
panel(d[0])
.y (d) ->
yscale(d[1])
.interpolate('linear')
###
========================================================================
Axes
========================================================================
###
# X-AXIS MARKET GROUP
xaxisMarket = d3.svg.axis()
.scale(marketXscale)
.orient('bottom')
.ticks(10)
.tickSubdivide(1)
xaxisMarketgroup = canvas.append('g')
.attr
class: 'axis xaxis',
transform: "translate(0,#{dim.height-dim.padding})"
.call(xaxisMarket)
xaxisMarketgroup.selectAll('text')
.attr
transform: "translate(10,0) rotate(45)"
'text-anchor': 'start'
# xaxisMarket label
xMarketlabel = canvas.append('svg:text')
.attr
x: marketXscale(80),
y: yscale(0),
dy: 50,
'text-anchor': 'middle',
class: 'textlabel'
.text('Market Quantity')
.style
'font-size': '60%'
# xaxisFirm label
xFirmlabel = canvas.append('svg:text')
.attr
x: firmXscale(80),
y: yscale(0),
dy: 50,
'text-anchor': 'middle',
class: 'textlabel'
.text('Firm Quantity')
.style
'font-size': '60%'
# X-AXIS FIRM GROUP
xaxisFirm = d3.svg.axis()
.scale(firmXscale)
.orient('bottom')
.ticks(10)
.tickSubdivide(1)
xaxisFirmgroup = canvas.append('g')
.attr
class: 'axis xaxis',
transform: "translate(0,#{dim.height-dim.padding})"
.call(xaxisFirm)
xaxisFirmgroup.selectAll('text')
.attr
transform: "translate(10,0) rotate(45)"
'text-anchor': 'start'
yaxis = d3.svg.axis()
.scale(yscale)
.orient('left')
.ticks(10)
.tickSubdivide(1)
# Y-AXIS MARKET GROUP
yaxisMarketgroup = canvas.append('svg:g')
.attr
class: 'axis',
transform: "translate(#{dim.paddingL},0)"
.call(yaxis)
# Y-AXIS FIRM GROUP
yaxisFirmgroup = canvas.append('svg:g')
.attr
class: 'axis',
transform: "translate(#{dim.width/2 + dim.paddingL},0)"
.call(yaxis)
# yaxis label
ylabelMarketgroup = canvas.append('svg:text')
.attr
x: 0,
y: 0,
'text-anchor': 'middle',
transform: 'translate(40,40)',
class: 'textlabel'
.text('Price')
ylabelFirmgroup = canvas.append('svg:text')
.attr
x: 0,
y: 0,
'text-anchor': 'middle',
transform: "translate(#{dim.width/2 + dim.paddingL},40)",
class: 'textlabel'
.text('Price')
###
========================================================================
Plot supply curve
========================================================================
###
plotSupply = (c,d,panel,label) ->
if panel == firmXscale
supplyFunction = supply
else
supplyFunction = marketSupply
quantitySupplied = (supplyFunction(params.c, params.d, p) for p in \
supplyPrices)
quantityPricePairsSupply = d3.zip(quantitySupplied, supplyPrices)
# Keep data points where quantity is positive and price is positive
quantityPricePairsSupply = (item for item in \
quantityPricePairsSupply when (0 <= item[0] <= 100) and item[1] >=0)
numQuantityPricePairs = quantityPricePairsSupply.length
drawSupplyFunction = canvas.append('svg:path')
.attr
d: createsvgpath(panel)(quantityPricePairsSupply)
stroke: '#7E8F7C'
labelSupplyFunction = canvas.append('svg:text')
.attr({
x: panel(quantityPricePairsSupply[numQuantityPricePairs-1][0]),
y: yscale(quantityPricePairsSupply[numQuantityPricePairs-1][1]),
dx: -5,
dy: -5,
class: 'textlabel',
'text-anchor': 'start'})
.style({
stroke: '#7E8F7C'
})
.text(label)
return
plotSupply(params.c, params.d, marketXscale, 'S')
plotSupply(params.c, params.d, firmXscale, 'MC')
params.numFirms = 150
plotSupply(params.c, params.d, marketXscale, 'S1')
###
========================================================================
Plot AC curve
========================================================================
###
plotAC = (fc,c,d) ->
acData = (ac(fc, c, d, q) for q in quantities)
qACpairs = d3.zip(quantities, acData)
qACpairs = (item for item in qACpairs when item[1] < 12)
drawAC = canvas.append('svg:path')
.attr({
d: createsvgpath(firmXscale)(qACpairs),
stroke: 'steelblue'
})
return
plotAC(params.fc, params.c, params.d)
Ignore my previous answer. This is a legit language bug. Sometimes you run into oddities like that when inserting non-semantic indentation in CoffeeScript—in this case, the indentation before the
.attrclause.The best solution is to remove the non-semantic indentation, like so:
This may look a little odd, but it’s a perfectly reasonable style.
Feel free to report this issue at https://github.com/jashkenas/coffee-script/issues. It’s most likely something that will no longer be an issue under Michael Ficarra’s CoffeeScript Redux compiler.