VizDev Apps Logo

by Nivaldo

HTML

<link href='http://fonts.googleapis.com/css?family=Kavoon&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<div class='content'>
    <!-- /the chart goes here -->
</div>

CSS

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
    stroke-width: 0;
}
.chart {
}
.main text {
    font: bold 9px sans-serif;
    fill: firebrick;
}
.axis line, .axis path {
    shape-rendering: crispEdges;
    stroke: black;
    fill: none;
}
circle {
    fill: steelblue;
}

/*
.content+svg {
    background: url(http://www.fernoftheandes.com/images/fern-so.png) center center no-repeat;
    background-size: 200px 200px;
}
*/

JavaScript

var color = d3.scale.category10();

var data = [
    [1,2],
	[2,2],
	[3,3],
	[4,4],
    [5, 4],
    [5.5, 5],
    [6, 6],
    [6, 7],
    [7,8],
    [7,9],
    [8,10],
    [8,11]
	
];

var margin = {
    top: 50,
    right: 220,
    bottom: 60,
    left: 25
}, width = 580 - margin.left - margin.right,
    height = 320 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
    return d[0];
}) + 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
    return d[1];
}) + 1])
    //.range([height, 0]) //flip y
    .range([0, height]);

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

chart.append('text')
    .attr('x', 80)
    .attr('y', 209)
    .style('font', 'bolder 80px Kavoon')
    .text('VizDev Apps');

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

// draw the x axis
var xAxis = d3.svg.axis()
    .scale(x)
    //.orient('bottom')
    .orient('top'); // adjust ticks to new x axis position

main.append('g')
    //.attr('transform', 'translate(0,' + height + ')')
    .attr('transform', 'translate(0,0)') // move x axis up
    .attr('class', 'main axis date')
    .call(xAxis);

// draw the y axis
var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

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

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

g.selectAll("scatter-dots")
.data(data)
    .enter().append("svg:circle")
    .attr("cx", function (d, i) {  return x(d[0]); }) 
    .attr("cy", function (d, i) { return (i>0 && d[1]<data[i-1][1]) ? y(data[i-1][1]) : y(d[1]); }) 
    .attr("r", 5)
    .style("fill", function (d) { return...