Show labels based on collision detection scatter plot in d3js - d3.js

I would like to show labels on the circles of the scatter plot when they are not colliding/overlapping. A simple example of scatter plot with labels is as follows:
var width = 500;
var height = 500;
var margin = {
top: 40,
right: 40,
bottom: 40,
left: 40
};
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var minX = _(data).orderBy('x').first().x;
var maxX = _(data).orderBy('x').last().x;
x.domain([minX - 500, maxX + 500]);
y.domain([0, 100]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3
.select("#d3")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + 0 + "," + height / 2 + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width / 2 + "," + 0 + ")")
.call(yAxis)
.append("text");
var gdots = svg.selectAll("g.dot")
.data(data)
.enter().append('g');
gdots.append("circle")
.attr("class", "dot")
.attr("r", function (d) {
return d.r;
})
.attr("cx", function (d) {
return x(d.x);
})
.attr("cy", function (d) {
return y(d.y);
})
.style("fill", function (d) {
return d.c;
});
gdots.append("text").text(function(d){
return d.name;
})
.attr("x", function (d) {
return x(d.x);
})
.attr("y", function (d) {
return y(d.y);
});
The example is available on fiddle:
https://jsfiddle.net/8e7qmzw8/1/
How can I apply collision detection in the given example to show the labels for non-collided circles?

Here's a brute force search approach:
gdots
// filter out those in a colliding state
.filter(function(d0, i){
var isCollide = false,
x0 = x(d0.x),
y0 = y(d0.y);
gdots.data().forEach(function(d1,j){
// if it has a collision with another, stop looking
if (!isCollide){
// if it's not itself
if (d0.name != d1.name){
var x1 = x(d1.x),
y1 = y(d1.y);
// if they overlap
isCollide = Math.pow((x1-x0),2) + Math.pow((y1-y0),2) <= Math.pow((d0.r+d1.r), 2);
}
}
});
return !isCollide;
})
.append("text").text(function(d){
return d.name;
});
Running code:
var data = [
{"x": -123, "y": 63, "r": 37, "c": "#50C2E3", "name": "A"},
{"x": 71, "y": 0, "r": 15, "c": "#50C2E3", "name": "B"},
{"x": 3845, "y": 77, "r": 15, "c": "#50C2E3", "name": "C"},
{"x": 3176, "y": 90, "r": 15, "c": "#50C2E3", "name": "D"},
{"x": -17, "y": 56, "r": 15, "c": "#50C2E3", "name": "D"},
{"x": 1357, "y": 58, "r": 15, "c": "#50C2E3", "name": "E"},
{"x": 7684, "y": 75, "r": 15, "c": "#50C2E3", "name": "F"}
];
var width = 500;
var height = 500;
var margin = {
top: 40,
right: 40,
bottom: 40,
left: 40
};
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var minX = _(data).orderBy('x').first().x;
var maxX = _(data).orderBy('x').last().x;
x.domain([minX - 500, maxX + 500]);
y.domain([0, 100]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3
.select("#d3")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + 0 + "," + height / 2 + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width / 2 + "," + 0 + ")")
.call(yAxis)
.append("text");
var gdots = svg.selectAll("g.dot")
.data(data)
.enter().append('g');
gdots.append("circle")
.attr("class", "dot")
.attr("r", function (d) {
return d.r;
})
.attr("cx", function (d) {
return x(d.x);
})
.attr("cy", function (d) {
return y(d.y);
})
.style("fill", function (d) {
return d.c;
});
gdots
.filter(function(d0, i){
var isCollide = false,
x0 = x(d0.x),
y0 = y(d0.y);
gdots.data().forEach(function(d1,j){
if (!isCollide){
if (d0.name != d1.name){
var x1 = x(d1.x),
y1 = y(d1.y);
isCollide = Math.pow((x1-x0),2) + Math.pow((y1-y0),2) <= Math.pow((d0.r+d1.r), 2);
}
}
});
return !isCollide;
})
.append("text").text(function(d){
return d.name;
})
.attr("x", function (d) {
return x(d.x);
})
.attr("y", function (d) {
return y(d.y);
});
.node {
cursor: pointer;
}
.dot {
opacity: .7;
cursor: pointer;
}
.axis path,
.axis line {
fill: none;
stroke: rgb(31, 119, 180);
shape-rendering: crispEdges;
}
text {
stroke: none;
fill: #666666;
font-size: .6em;
font-family: "Helvetica Neue"
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.min.js"></script>
<div id="d3"></div>

Related

Average line on a bar chart

I have a problem with a bar chart and its line average.
The average line doesn't cover all the bars. The last bar is without average line.
I used d3js code.
var data = [{
"session": "1",
"score": 70
},
{
"session": "2",
"score": 30
},
{
"session": "3",
"score": 50
},
{
"session": "4",
"score": 60
},
{
"session": "5",
"score": 40
}
];
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 480 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x2 = d3.scale.ordinal()
.rangeBands([0, width], 0);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
d.score = +d.score;
});
x.domain(data.map(function(d) {
return d.session;
}));
x2.domain(data.map(function(d) {
return d.session;
}));
y.domain([0, d3.max(data, function(d) {
return d.score;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("score");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.session);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.score);
})
.attr("height", function(d) {
return height - y(d.score);
});
var dataSum = d3.sum(data, function(d) {
return d.score;
});
var line = d3.svg.line()
.x(function(d, i) {
return x2(d.session) + i;
})
.y(function(d, i) {
return y(dataSum / data.length);
});
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("stroke-width", "2")
.attr("d", line);
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
rect.bar {
fill: cyan;
}
path.line {
stroke: black;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</body>
</html>
The existing code was appending a multi-segment path that stopped short because it was going from the start point of each entry in data to the next start point. This example replaces it with a single line that goes from the left most element's start position to the far right side of the graph.
var data = [{
"session": "1",
"score": 70
},
{
"session": "2",
"score": 30
},
{
"session": "3",
"score": 50
},
{
"session": "4",
"score": 60
},
{
"session": "5",
"score": 40
}
];
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 480 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x2 = d3.scale.ordinal()
.rangeBands([0, width], 0);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
d.score = +d.score;
});
x.domain(data.map(function(d) {
return d.session;
}));
x2.domain(data.map(function(d) {
return d.session;
}));
y.domain([0, d3.max(data, function(d) {
return d.score;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("score");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.session);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.score);
})
.attr("height", function(d) {
return height - y(d.score);
});
var dataSum = d3.sum(data, function(d) {
return d.score;
});
svg.append("line")
.attr("x1", x2(1))
.attr("x2", width)
.attr("y1", y(dataSum / data.length))
.attr("y2", y(dataSum / data.length));
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
rect.bar {
fill: cyan;
}
line {
stroke: black;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</body>
</html>

Trying to create D3.js chart for Temperature for highs and lows on days Saturday to Saturday

Having trouble with D3.js. Originally this code x axis was 0,1,2,3,4,5,6,7. I'm trying to set the x axis as x: ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]. Please help! Not sure how to fix it.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.grid path,
.grid line {
fill: none;
stroke: rgba(0, 0, 0, 0.25);
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke-width: 2.5px;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
var data = [ { label: "High",
x: ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
y: [82, 81, 81, 70, 77, 78, 79, 80] },
{ label: "Low",
x: ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
y: [67, 59, 50, 47, 51, 60, 66, 66] } ] ;
var xy_chart = d3_xy_chart()
.width(960)
.height(500)
.xlabel("Days")
.ylabel("Temperature F*") ;
var svg = d3.select("body").append("svg")
.datum(data)
.call(xy_chart) ;
function d3_xy_chart() {
var width = 640,
height = 480,
xlabel = "X Axis Label",
ylabel = "Y Axis Label" ;
function chart(selection) {
selection.each(function(datasets) {
//
// Create the plot.
//
var margin = {top: 20, right: 80, bottom: 30, left: 50},
innerwidth = width - margin.left - margin.right,
innerheight = height - margin.top - margin.bottom ;
var x_scale = d3.scale.linear()
.range([0, innerwidth])
.domain([ d3.min(datasets, function(d) { return d3.min(d.x); }),
d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ;
var y_scale = d3.scale.linear()
.range([innerheight, 0])
.domain([ d3.min(datasets, function(d) { return d3.min(d.y); }),
d3.max(datasets, function(d) { return d3.max(d.y); }) ]) ;
var color_scale = d3.scale.category10()
.domain(d3.range(datasets.length)) ;
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom") ;
var y_axis = d3.svg.axis()
.scale(y_scale)
.orient("left") ;
var x_grid = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickSize(-innerheight)
.tickFormat("") ;
var y_grid = d3.svg.axis()
.scale(y_scale)
.orient("left")
.tickSize(-innerwidth)
.tickFormat("") ;
var draw_line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x_scale(d[0]); })
.y(function(d) { return y_scale(d[1]); }) ;
var svg = d3.select(this)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_grid) ;
svg.append("g")
.attr("class", "y grid")
.call(y_grid) ;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_axis)
.append("text")
.attr("dy", "-.71em")
.attr("x", innerwidth)
.style("text-anchor", "end")
.text(xlabel) ;
svg.append("g")
.attr("class", "y axis")
.call(y_axis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text(ylabel) ;
var data_lines = svg.selectAll(".d3_xy_chart_line")
.data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
.enter().append("g")
.attr("class", "d3_xy_chart_line") ;
data_lines.append("path")
.attr("class", "line")
.attr("d", function(d) {return draw_line(d); })
.attr("stroke", function(_, i) {return color_scale(i);}) ;
data_lines.append("text")
.datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
.attr("transform", function(d) {
return ( "translate(" + x_scale(d.final[0]) + "," +
y_scale(d.final[1]) + ")" ) ; })
.attr("x", 3)
.attr("dy", ".35em")
.attr("fill", function(_, i) { return color_scale(i); })
.text(function(d) { return d.name; }) ;
}) ;
}
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
};
chart.height = function(value) {
if (!arguments.length) return height;
height = value;
return chart;
};
chart.xlabel = function(value) {
if(!arguments.length) return xlabel ;
xlabel = value ;
return chart ;
} ;
chart.ylabel = function(value) {
if(!arguments.length) return ylabel ;
ylabel = value ;
return chart ;
} ;
return chart;
}
</script>
This is an issue of scaling. You are scaling strings with a linear scale:
var x_scale = d3.scale.linear()
.range([0, innerwidth])
.domain([ d3.min(datasets, function(d) { return d3.min(d.x); }),
d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ;
There are two issues here: the min/max functions will evaluate the min/max of the x value strings, which are likely not the min/max you want. Also, the same issue arises with the use of the linear scale, it expects numbers.
With d3v3 we can use an ordinal scale:
var x_scale = d3.scale.ordinal()
.rangePoints([0, innerwidth])
.domain(datasets[0].x) ;
This assumes all data series have the same x values
Which gives us:
var data = [ { label: "High",
x: ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
y: [82, 81, 81, 70, 77, 78, 79, 80] },
{ label: "Low",
x: ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
y: [67, 59, 50, 47, 51, 60, 66, 66] } ] ;
var xy_chart = d3_xy_chart()
.width(960)
.height(500)
.xlabel("Days")
.ylabel("Temperature F*") ;
var svg = d3.select("body").append("svg")
.datum(data)
.call(xy_chart) ;
function d3_xy_chart() {
var width = 640,
height = 480,
xlabel = "X Axis Label",
ylabel = "Y Axis Label" ;
function chart(selection) {
selection.each(function(datasets) {
//
// Create the plot.
//
var margin = {top: 20, right: 80, bottom: 30, left: 50},
innerwidth = width - margin.left - margin.right,
innerheight = height - margin.top - margin.bottom ;
var x_scale = d3.scale.ordinal()
.rangePoints([0, innerwidth])
.domain(datasets[0].x) ;
var y_scale = d3.scale.linear()
.range([innerheight, 0])
.domain([ d3.min(datasets, function(d) { return d3.min(d.y); }),
d3.max(datasets, function(d) { return d3.max(d.y); }) ]) ;
var color_scale = d3.scale.category10()
.domain(d3.range(datasets.length)) ;
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom") ;
var y_axis = d3.svg.axis()
.scale(y_scale)
.orient("left") ;
var x_grid = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickSize(-innerheight)
.tickFormat("") ;
var y_grid = d3.svg.axis()
.scale(y_scale)
.orient("left")
.tickSize(-innerwidth)
.tickFormat("") ;
var draw_line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x_scale(d[0]); })
.y(function(d) { return y_scale(d[1]); }) ;
var svg = d3.select(this)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_grid) ;
svg.append("g")
.attr("class", "y grid")
.call(y_grid) ;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_axis)
.append("text")
.attr("dy", "-.71em")
.attr("x", innerwidth)
.style("text-anchor", "end")
.text(xlabel) ;
svg.append("g")
.attr("class", "y axis")
.call(y_axis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text(ylabel) ;
var data_lines = svg.selectAll(".d3_xy_chart_line")
.data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
.enter().append("g")
.attr("class", "d3_xy_chart_line") ;
data_lines.append("path")
.attr("class", "line")
.attr("d", function(d) {return draw_line(d); })
.attr("stroke", function(_, i) {return color_scale(i);}) ;
data_lines.append("text")
.datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
.attr("transform", function(d) {
return ( "translate(" + x_scale(d.final[0]) + "," +
y_scale(d.final[1]) + ")" ) ; })
.attr("x", 3)
.attr("dy", ".35em")
.attr("fill", function(_, i) { return color_scale(i); })
.text(function(d) { return d.name; }) ;
}) ;
}
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
};
chart.height = function(value) {
if (!arguments.length) return height;
height = value;
return chart;
};
chart.xlabel = function(value) {
if(!arguments.length) return xlabel ;
xlabel = value ;
return chart ;
} ;
chart.ylabel = function(value) {
if(!arguments.length) return ylabel ;
ylabel = value ;
return chart ;
} ;
return chart;
}
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.grid path,
.grid line {
fill: none;
stroke: rgba(0, 0, 0, 0.25);
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke-width: 2.5px;
}
<script src="https://d3js.org/d3.v3.js"></script>
Or:
Ok, now we at least see the axis and the lines. But we have a new problem: we have two data points with the same x value: "Saturday". A scale will always map a given input value to the same output value. So we need to differentiate the two Saturdays. One way we could differentiate the input strings is to use their index. This assumes an ordinal input:
This requires a slightly different scale set up:
var x_scale = d3.scale.ordinal()
.rangePoints([0,innerwidth])
.domain(d3.range(datasets[0].y.length));
d3.range(n) produces an array of numbers from 0 through to n-1), good for replicating each index in the data array
But, now we have to pass the index to each place where the scale is used (as opposed to the day). In this example I think it's only the line generator.
var draw_line = d3.svg.line()
.interpolate("basis")
.x(function(d,i) { return x_scale(i); })
.y(function(d) { return y_scale(d[1]); }) ;
Of course now we need to format the ticks so that they aren't numerical:
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickFormat(function(d) { return datasets[0].x[d]; })
Which gives us:
var data = [ { label: "High",
x: ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
y: [82, 81, 81, 70, 77, 78, 79, 80] },
{ label: "Low",
x: ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
y: [67, 59, 50, 47, 51, 60, 66, 66] } ] ;
var xy_chart = d3_xy_chart()
.width(960)
.height(500)
.xlabel("Days")
.ylabel("Temperature F*") ;
var svg = d3.select("body").append("svg")
.datum(data)
.call(xy_chart) ;
function d3_xy_chart() {
var width = 640,
height = 480,
xlabel = "X Axis Label",
ylabel = "Y Axis Label" ;
function chart(selection) {
selection.each(function(datasets) {
//
// Create the plot.
//
var margin = {top: 20, right: 80, bottom: 30, left: 50},
innerwidth = width - margin.left - margin.right,
innerheight = height - margin.top - margin.bottom ;
var x_scale = d3.scale.ordinal()
.rangePoints([0,innerwidth])
.domain(d3.range(datasets[0].y.length)); // assuming all x axes are the same
var y_scale = d3.scale.linear()
.range([innerheight, 0])
.domain([ d3.min(datasets, function(d) { return d3.min(d.y); }),
d3.max(datasets, function(d) { return d3.max(d.y); }) ]) ;
var color_scale = d3.scale.category10()
.domain(d3.range(datasets.length)) ;
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickFormat(function(d) { return datasets[0].x[d]; })
var y_axis = d3.svg.axis()
.scale(y_scale)
.orient("left") ;
var x_grid = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickSize(-innerheight)
.tickFormat("") ;
var y_grid = d3.svg.axis()
.scale(y_scale)
.orient("left")
.tickSize(-innerwidth)
.tickFormat("") ;
var draw_line = d3.svg.line()
.interpolate("basis")
.x(function(d,i) { return x_scale(i); })
.y(function(d) { return y_scale(d[1]); }) ;
var svg = d3.select(this)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_grid) ;
svg.append("g")
.attr("class", "y grid")
.call(y_grid) ;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_axis)
.append("text")
.attr("dy", "-.71em")
.attr("x", innerwidth)
.style("text-anchor", "end")
.text(xlabel) ;
svg.append("g")
.attr("class", "y axis")
.call(y_axis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text(ylabel) ;
var data_lines = svg.selectAll(".d3_xy_chart_line")
.data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
.enter().append("g")
.attr("class", "d3_xy_chart_line") ;
data_lines.append("path")
.attr("class", "line")
.attr("d", function(d) {return draw_line(d); })
.attr("stroke", function(_, i) {return color_scale(i);}) ;
data_lines.append("text")
.datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
.attr("transform", function(d) {
return ( "translate(" + x_scale(d.final[0]) + "," +
y_scale(d.final[1]) + ")" ) ; })
.attr("x", 3)
.attr("dy", ".35em")
.attr("fill", function(_, i) { return color_scale(i); })
.text(function(d) { return d.name; }) ;
}) ;
}
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
};
chart.height = function(value) {
if (!arguments.length) return height;
height = value;
return chart;
};
chart.xlabel = function(value) {
if(!arguments.length) return xlabel ;
xlabel = value ;
return chart ;
} ;
chart.ylabel = function(value) {
if(!arguments.length) return ylabel ;
ylabel = value ;
return chart ;
} ;
return chart;
}
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.grid path,
.grid line {
fill: none;
stroke: rgba(0, 0, 0, 0.25);
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke-width: 2.5px;
}
<script src="https://d3js.org/d3.v3.js"></script>
Notes
This answer assumes that you are passing ordinal data. Most of the challenge and the answer here regards input values that are the same. If every input value for the x axis is different then the first snippet will be fine (when dealing with ordinal data).
If you are hoping to have the chart function take in arbitrary data types, continuous, date/time, or ordinal, you'll need to build in additional logic that selects between the appropriate scale. I haven't otherwise touched that subject as the question was about why the axis and scale were not behaving as desired.

Creating a reversed D3 stack bar chart

Assuming I have data like this:
const data = [
{
month: 1
apples: ...,
bananas: ...,
cherries: ...,
dates: ...,
},
{
month: 2
apples: ...,
bananas: ...,
cherries: ...,
dates: ...,
},
{
month: 3
apples: ...,
bananas: ...,
cherries: ...,
dates: ...,
}
]
Going for 12 months, using keys of ['apples','bananas','cherries','dates']. The d3.stack() will produce an array for 4 bars with 12 sets of values. This makes sense. However, what if I wanted to create 12 bars with the keys broken up so it's sets of 4 values.
Is it possible to flip things on their heads in this fashion?
You just need to convert the data into the required format and flip the axis and data configurations in the chart as shown below.
Existing :
var margin = {
top: 20,
right: 160,
bottom: 35,
left: 30
};
var width = 500 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* Data in strings like it would be if imported from a csv */
var data = [{
year: "2006",
redDelicious: "10",
mcintosh: "15",
oranges: "9",
pears: "6"
},
{
year: "2007",
redDelicious: "12",
mcintosh: "18",
oranges: "9",
pears: "4"
},
{
year: "2008",
redDelicious: "05",
mcintosh: "20",
oranges: "8",
pears: "2"
},
{
year: "2009",
redDelicious: "01",
mcintosh: "15",
oranges: "5",
pears: "4"
}
];
var parse = d3.time.format("%Y").parse;
// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
return data.map(function(d) {
return {
x: parse(d.year),
y: +d[fruit]
};
});
}));
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) {
return d.x;
}))
.rangeRoundBands([10, width - 10], 0.02);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})])
.range([height, 0]);
var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];
// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat(function(d) {
return d
});
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) {
return colors[i];
});
var rect = groups.selectAll("rect")
.data(function(d) {
return d;
})
.enter()
.append("rect")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y0 + d.y);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y0 + d.y);
})
.attr("width", x.rangeBand())
.on("mouseover", function() {
tooltip.style("display", null);
})
.on("mouseout", function() {
tooltip.style("display", "none");
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});
// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(30," + i * 19 + ")";
});
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return colors.slice().reverse()[i];
});
legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
switch (i) {
case 0:
return "Anjou pears";
case 1:
return "Naval oranges";
case 2:
return "McIntosh apples";
case 3:
return "Red Delicious apples";
}
});
// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
path.domain {
stroke: none;
}
.y .tick line {
stroke: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
New :
var margin = {
top: 20,
right: 160,
bottom: 35,
left: 30
};
var width = 500 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* Data in strings like it would be if imported from a csv */
var data = [{
fruit: "redDelicious",
2006: "10",
2007: "12",
2008: "05",
2009: "01",
2010: "02"
},
{
fruit: "mcintosh",
2006: "15",
2007: "18",
2008: "20",
2009: "15",
2010: "10"
},
{
fruit: "oranges",
2006: "9",
2007: "9",
2008: "8",
2009: "5",
2010: "4"
},
{
fruit: "pears",
2006: "6",
2007: "4",
2008: "2",
2009: "4",
2010: "2"
}
];
var legends = Object.keys(data[0]);
legends.splice(legends.indexOf('fruit'), 1);
// Transpose the data into layers
var dataset = d3.layout.stack()(legends.map(function(year) {
return data.map(function(d) {
return {
x: d.fruit,
y: +d[year]
};
});
}));
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) {
return d.x;
}))
.rangeRoundBands([10, width - 10], 0.02);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})])
.range([height, 0]);
var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574","#6aa8e0"];
// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat(function(d) {
return d
});
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
//.tickFormat(d3.time.format("%Y"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) {
return colors[i];
});
var rect = groups.selectAll("rect")
.data(function(d) {
return d;
})
.enter()
.append("rect")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y0 + d.y);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y0 + d.y);
})
.attr("width", x.rangeBand())
.on("mouseover", function() {
tooltip.style("display", null);
})
.on("mouseout", function() {
tooltip.style("display", "none");
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});
// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(30," + i * 19 + ")";
});
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return colors.slice().reverse()[i];
});
legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
return legends.reverse()[i];
});
// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
path.domain {
stroke: none;
}
.y .tick line {
stroke: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

d3.js Data not plotting properly in x axis

I am learning d3 and trying to implement a specific functionality.
Data is not getting plotted properly. I am not able to find where it is going wrong.
Link to jsfiddle https://jsfiddle.net/4nc1nc95/1/
$(function() {
var width = 355;
var height = 142;
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 70
};
var scope = {
graphData: {
"data": [{
"YEAR": "FY16Q1",
"SAVINGS": null,
"SPEND": null
}, {
"YEAR": "FY16Q2",
"SAVINGS": null,
"SPEND": null
}, {
"YEAR": "FY16Q3",
"SAVINGS": null,
"SPEND": null
}, {
"YEAR": "FY16Q4",
"SAVINGS": "0.023961",
"SPEND": "7419879.04"
}, {
"YEAR": "FY17Q1",
"SAVINGS": "0.00618",
"SPEND": "34923499.71732"
}]
}
};
var x_domain = d3.extent(scope.graphData.data, function(d) {
return d.YEAR;
});
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .0)
.domain(scope.graphData.data.map(function(d) {
return d.YEAR;
}));
var y = d3.scale.linear()
.domain([0, 0.03])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5, "%");
var area = d3.svg.area()
.x(function(d) {
return x(d.YEAR);
})
.y0(height)
.y1(function(d) {
return y(d.SAVINGS);
});
var sampleSVG = d3.select('#area')
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + 62)
.append("g")
.attr("transform", "translate(" + margin.left + "," + (margin.top + 24) + ")");
sampleSVG.append("path")
.datum(scope.graphData.data)
.attr("class", "area")
.attr("d", area);
sampleSVG.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
sampleSVG.append("g")
.attr("class", "y axis")
.call(yAxis);
if (scope.mode == "restore") {
sampleSVG.append("g")
.append("text")
.attr("y", "-8%")
.attr("x", "-2%")
.attr("class", "heading tableHeader")
.text("SAVING");
}
})
Instead of:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .0)
Use:
var x = d3.scale.ordinal()
.rangePoints([0, width], .0)
Here is your fiddle: https://jsfiddle.net/gerardofurtado/b1mzyxLq/

How to render D3 js graph using json in mvc3 razor

I am new in D3 js.most of the examples in gallery load data from TSV files.
but I wanted to render line graph using json in mvc3 razor. below is code where i hard code my data.please let me know how to retrive dynamic data using json.
var data = [
{ "date": 0, "close": 0.3372 },
{ "date": 1, "close": 1.7 },
{ "date": 2, "close": 1.8 },
{ "date": 3, "close": 2.014 },
{ "date": 4, "close": 10.995 },
{ "date": 5, "close": 16.227 },
{ "date": 6, "close": 16.643 },
{ "date": 7, "close": 20.644 },
{ "date": 8, "close": 22.478 }
];
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.close); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
console.log("here");
data.forEach(function (d) {
d.date = parseInt(d.date);
d.close = +d.close;
});
console.log("here2");
x.domain(d3.extent(data, function (d) { return d.date; }));
y.domain(d3.extent(data, function (d) { return d.close; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.text("Request")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Probability");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);

Resources