test scale

by Igor Cuckovic

HTML

<div id="div0"></div>

CSS

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

JavaScript

var data = [10, 50, 80, 66],
    margin = 30,
    svgWidth = 500 - 2 * margin,
    svgHeight = 400 - 2 * margin;

var xScale = d3.scale.ordinal()
    .domain(d3.range(0, data.length))
    .rangePoints([0, svgWidth])



var yScale = d3.scale.linear()
    .domain([0, 100])
    .range([svgHeight, margin]);

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

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


var svg = d3.select("#div0").append("svg")
    .attr({
    width: svgWidth + 2 * margin,
    height: svgHeight + 2 * margin
});

svg.append("g")
    .attr("transform", "translate(" + [margin, 0] + ")")
    .call(yAxis)
    .attr("class", "axis")

svg.append("g")
    .attr("transform", "translate(" + [margin, svgHeight] + ")")
    .call(xAxis)
    .attr("class", "axis")



svg.append("g").attr("transform", "translate(" + [margin, 0] + ")").selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr({
    cx: function (d, i) {
        return xScale(i) /*i * 50  + margin*/
        ;
    },
    cy: function (d, i) {
        return yScale(d);
    },
    r: 6,
    fill: "steelblue"
});

console.log()