JSFiddle - React, Tailwind, and code Playground

by nachocab

HTML

<script src="http://d3js.org/d3.v2.js"></script>

CSS

.chart {
    tooltip: select;
}

.main text {
    font: 25px Courier;
    font-weight: bold;
}

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

.tooltip {
    position: absolute;
    text-align: center;
    padding: 10px;
    background: white;
    border: 1px solid black;
}

CoffeeScript

data = [{"x":3,"y":5,"name":"paco"},{"x":4,"y":1,"name":"paco2"},{"x":7,"y":3,"name":"paco3"}]


margin =
    top: 60
    right: 60
    bottom: 60
    left: 60
width = 600 - margin.left - margin.right
height = 400 - margin.top - margin.bottom



x = d3.scale.linear()
    .domain([d3.min(data, (d) -> d.x), d3.max(data, (d) -> d.x)])
    .range([0, width])
y = d3.scale.linear()
    .domain([d3.min(data, (d) -> d.y), d3.max(data, (d) -> d.y)])
    .range([ height, 0 ])

chart = d3.select('body')
    .append('svg:svg')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom)
    .attr('class', 'chart')

main = chart.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'main')

# draw the x axis
xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')

main.append('g')
    .attr('transform', "translate(0, #{height})")
    .attr('class', 'main axis date')
    .call(xAxis)

# draw the y axis
yAxis = d3.svg.axis()
        .scale(y)
        .orient('left')

main.append('g')
        .attr('transform', "translate(0,0)")
        .attr('class', 'main axis date')
        .call(yAxis)

# draw the tooltip
tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

g = main.append("svg:g")

mouseover = (d)->
        tooltip.style("opacity",1)
        tooltip.text(d.name)
            .style("left", "#{d3.event.pageX}px")
            .style("top", "#{d3.event.pageY}px");

mouseout = ->
        tooltip.style("opacity",0)


g.selectAll("circle")
      .data(data)
      .enter().append("circle")
          .attr("cx", (d,i) -> x(d.x))
          .attr("cy", (d) -> y(d.y))
          .attr("r", 5)