Mithril with D3 Basic Example

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<div id="main"></div>

CSS

v

CoffeeScript

d3Circles = ->
  exports = (selection) ->
    selection.each (data) ->
      items = d3.select(@)
        .selectAll(".item")
        .data(data)
      items.select("circle")
        .attr
          cx: (d, i) -> i*20 + 10
          cy: 40
          r: 0
          fill: 'steelblue'
        .transition()
        .delay((d, i) -> i*100)
        .attr
          r: 10
 
d3Text = ->
  exports = (selection) ->
    selection.each (data) ->
      items = d3.select(@)
        .selectAll(".item")
        .data(data)
      items.select("text")
        .attr
           x: (d, i) -> i*20 + 10
           y: 70
        .style
            "font-size": 0
            "text-anchor": "middle"
        .text((d) -> d)
        .transition()
        .delay((d, i) -> i*100)
        .style
           "font-size": 13
        
            
      
Scatter =
  draw: (props) -> (el) -> 
    [d3Circles(), d3Text()].forEach (d) ->
       d3.select(el)
         .datum(props.data)
         .call(d)
  view: (c, props) ->
    m 'svg', {
        config: @draw(props),
        width: 400, 
        height: 300
      },
      m 'g.scatter',
        props.data.map (d, i) -> 
          m 'g.item', {key: i}, [
            m 'circle'
            m 'text'  
          ]
  
m.mount(
  document.getElementById("main"),
  m.component(Scatter, {data: d3.range(10)})
)