Adding area as "d" attribute

[giampaolotrapasso]

I'm trying to implement this: http://bl.ocks.org/mbostock/3883195

    val margin = Margin(top = 20, right = 20, bottom = 30, left = 50)

    val width = 960 - margin.left - margin.right
    val height = 500 - margin.top - margin.bottom

    val parseDate = d3.time.format("%d-%b-%y").parse(_)

    val x = d3.time.scale().range(js.Array(0, width))
    val y = d3.scale.linear().range(js.Array(height, 0))

    val xAxis = d3.svg.axis().scale(x).orient("bottom")
    val yAxis = d3.svg.axis().scale(y).orient("left")

    val xf: js.Function2[DataArray, Int, Double] = (d: DataArray, i: Int) => x(d(i).date)
    val yf: js.Function2[DataArray, Int, Double] = (d: DataArray, i: Int) => x(d(i).close)

    val area = d3.svg.area()
      .x(xf)
      .y0(height)
      .y1(yf)


    val svg: Selection[EventTarget] = 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 + ")");

    d3.tsv("apple.tsv", (error: Any, rawdata: Array[Dictionary[String]]) => {

      val data: Array[Data] = rawdata.map { line =>
        object d extends Data {
          var date = parseDate(line("date"))
          var close = line("close").toDouble
        }
        d
      }

      val Tuple2(minX, maxX) = d3.extent(data.map(_.date))
      x.domain(Array(minX, maxX))

      val maxY = d3.max(data.map(_.close))
      y.domain(Array(0, maxY))

      svg.append("path")
        .datum(data)
        .attr("class", "area")
        .attr("d", area)

but last line does not compile since

overloaded method value attr with alternatives:
[error]   (name: String,value: scala.scalajs.js.Function3[scala.scalajs.js.Array[Data],Int,scala.scalajs.js.UndefOr[Int],scala.scalajs.js.|[scala.scalajs.js.|[Double,String],Boolean]])org.singlespaced.d3js.selection.Update[scala.scalajs.js.Array[Data]] <and>
[error]   (name: String,value: org.singlespaced.d3js.d3.Primitive)org.singlespaced.d3js.selection.Update[scala.scalajs.js.Array[Data]]
[error]  cannot be applied to (String, org.singlespaced.d3js.svg.Area[DataArray])
[error]         .attr("d", area)
[error]          ^

As error said, there's no signature that allows to pass an Area instance.

By the way, I'll do a pull request to put this into examples.

[spaced]

I was not only area, also the selection#datum function returns wrong Update selection type. And there are missing implicits for js.FunctionN,
Tnx a lot for your input. Can you verify this with latest version 0.3.3?

[giampaolotrapasso]

Yes, I will. Thanks!

[giampaolotrapasso]

@spaced, can you confirm me that you correctly compile this: https://github.com/giampaolotrapasso/scala-js-d3-example-app/tree/areachart-example ?

I've imported the implicits but I still have the error. Let me know if I did something wrong with client code or there are still problems with the "d" attribute..

[spaced]

I fixed the area functions:

-    val xf: js.Function2[DataArray, Int, Double] = (d: DataArray, i: Int) => x(d(i).date)
-    val yf: js.Function2[DataArray, Int, Double] = (d: DataArray, i: Int) => x(d(i).close)
+    val xf = (d: Data) => x(d.date)
+    val yf = (d: Data) => x(d.close)

area is Area[Data], not a Area[DataArray]

Other small fixes: you cant extend js.JSApp twice otherwise you have to disable the persistLauncher in build.sbt.

Scalajs-d3 0.3.3 requires now scalajs 0.6.8. You can rebase from my updated example github.
Can i use your example in my example project? Would be very happy to see a working example of it. And this could help other devs.

[giampaolotrapasso]

Hi @spaced, thanks for the fixes. What about contribute to your example project with a PR? This way other devs can see more activity on the project. I think you could prepare a basic index with links to the examples like https://github.com/mbostock/d3/wiki/Gallery, of course.

[ziggystar]

I'm completely new to D3 and Scala.js, but I have the impression, that the following should work:

      val groups: Dictionary[Array[Double]] = ts.values

      val area = d3.svg.area[String]()
          .x( (value:String,i:Int) => scalex(i))
          .y1((value:String,i:Int) => {
            println("looking up " + value)
            scaley(groups(value)(i))
          })

      val groupNames: js.Array[String] = groups.keys.toJSArray

      val update: Selection[String] = svg.selectAll(".variable")
        .data(groupNames)
        .enter()
        .append("g")
        .attr("class","variable")
        .attr("variable-value", (s: String) => s)
        .append("path")
        .attr("class", "area")
        .style("fill","#ff0000")
        .attr("d", area)

The code compiles with 0.3.3, but the println within the .y1-call outputs only single characters instead of the whole Strings from groupNames. Of course then the Dictionary lookup fails.