D3 visualizations 2

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;
}

.brush .extent {
    opacity: 0.1;
}

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

JavaScript

var chocolates = [{
    "name": "Dairy Milk",
    "manufacturer": "cadbury",
    "price": 45,
    "rating": 2
}, {
    "name": "Galaxy",
    "manufacturer": "Nestle",
    "price": 42,
    "rating": 3
}, {
    "name": "Lindt",
    "manufacturer": "Lindt",
    "price": 80,
    "rating": 4
}, {
    "name": "Hershey",
    "manufacturer": "Hershey",
    "price": 40,
    "rating": 1
}, {
    "name": "Dolfin",
    "manufacturer": "Lindt",
    "price": 90,
    "rating": 5
}, {
    "name": "Bournville",
    "manufacturer": "cadbury",
    "price": 70,
    "rating": 2
}];

var width = 300;
var height = 300;
var margin = {
    'left': 40,
    'right': 10,
    'top': 10,
    'bottom': 10
};
var colors = d3.scale.category10();

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(chocolates, function(d) {
        return +d.price;
    }))
    .range([margin.left, width - margin.right]);

var yScale = d3.scale.linear()
    .domain(d3.extent(chocolates, function(d) {
        return +d.rating;
    }))
    .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_obj = svg.selectAll("circle")
    .data(chocolates);

var colors = d3.scale.category10();

var chocolate_enter = data_obj.enter()
  ...