D3 visualizations

by omegak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<div id="le-graph"></div>

CSS

body {
    font-family: 'Helvetica Neue';
    color: #686765;
}

.name {
    float: right;
    color: #27aae1;
}

.axis {
    fill: none;
    stroke: #AAA;
    stroke-width: 1px;
}

.label {
    fill: #414241;
}

.node {
    cursor:pointer;
}

.dot {
    opacity: .7;
    cursor: pointer;
}

text {
    stroke: none;
    fill: #666666;
    font-size: .6em;
}

JavaScript

var data = [
{x:0, y: 30},
{x:20, y: 60},
{x:30, y: 10},
{x:40, y: 0},
{x:50, y: 70},
{x:60, y: 40},
{x:70, y: 35}
]

var width = 300;
var height = 300;
var margin = {'left': 40, 'right': 10, 'top': 10, 'bottom': 10};

var svg = d3.select('#le-graph').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g').attr('transform', 'translate(0, 0)');

var xScale = d3.scale.linear()
    .domain(d3.extent(data, function(d) {
        return +d.x;
}))
.range([margin.left, width - margin.right]);

var yScale = d3.scale.linear()
    .domain(d3.extent(data, function(d) {
        return +d.y;
    }))
.range([height - margin.top, margin.bottom]);


// Axis ----------------------------------------------------------------------

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickPadding(4);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickPadding(4);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + yScale.range()[0] + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .attr('transform', 'translate('+ margin.left + ', 0)')
    .call(yAxis);


// Plotting ------------------------------------------------------------------

var data = svg.selectAll("circle").data(data);
var data_enter = data.enter().append("circle");
var data_update = data_enter.attr("class", "dot")
                            .attr("cx", function (d) {
                                return xScale(d.x);
                            })
                            .attr("cy", function (d) {
                                return yScale(d.y);
                            })
                            .attr("r", 5);