CODEWITHSUNDEEP
javascriptd3.js
Monduiz
Monduiz

Reputation: 721

D3 dot plot chart

I am trying to make a dot plot chart using D3 but there is something I am missing. Its just not working. The dots are not showing for every month. Only two months are shown and multiple dots appear on along the x axis.

I have tried to change the scales, domain, I just cant get my finger on it.

Note: the chart show up on click on the polygon feature.

Here is a jsfiddle: https://jsfiddle.net/Monduiz/6jv1w8nd/

Code:

var yScale = d3.scale.ordinal()
    .domain(data.map(function(d) { return d.name; }))
    .range([0, height]);

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

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

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

svg.selectAll(".circle")
    .data(data)
    .enter()
     .append("circle")
     .attr("class","circle")
     .attr("r",3)
     .attr("fill", "steelBlue")
     .attr("cx", function(d){ return xScale(d.value); })
     .attr("cy", function(d){ return yScale(d.name); });

Upvotes: 0

Views: 910

Answers (1)

Mark
Mark

Reputation: 108512

For an d3.scale.ordinal(), range takes an array of positions to map to your domain. You want to use rangeRoundPoints which will take a start/stop position and map it to evenly spaced points.

Updated fiddle here.

Upvotes: 1

Related Questions