Categorical labels in bar chart partially hidden - d3.js

I have a bar chart where my x-axis tick labels are being cut off within the svg and I can't seem to find the proper action to take to reveal them. I have tried playing around with the .range() properties associated with the x variable with no success and am wondering if I should add a "transform" attribute or maybe a "margin-bottom" attribute to resolve the issue. Any guidance on what could be causing this issue and the best resolution?
<html>
<!-- Load d3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<meta charset="utf-8">
<body>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
</body>
<script>
var data = [
{ "x": "Friday", "y": 7.620000000000001 },
{ "x": "Monday", "y": 6.463333333333335 },
{ "x": "Saturday", "y": 7.236666666666666 },
{ "x": "Sunday", "y": 7.388571428571429 },
{ "x": "Thursday", "y": 8.051111111111112 },
{ "x": "Tuesday", "y": 7.717999999999999 },
{ "x": "Wednesday", "y": 7.742 }
]
var margin = { top: 10, right: 30, bottom: 30, left: 60 }
var width = 800 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;
var svg = d3.select("#my_dataviz")
.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 + ")"); // translate(margin left, margin top)
var x = d3.scaleBand()
.domain(d3.max(data, function(d) { return d.x }))
.range([0, width])
.padding(0.2);
svg.append("g")
.attr("transform", "translate(" + 0 + "," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Append x-scale title
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("Weekday");
</script>
</html>


The data of x-axis should use .map to get ...
var x = d3.scaleBand()
.domain(data.map(function(d) { return d.x; }))
.range([0, width])
.padding(0.2);

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>

How to fix a display issue in a multiple line graph. The svg.append("path") is not displaying anything

Im trying to create a multiline graph for my angular web app to visualise some data that will add lines according to the items in the data variable. As i'm trying to append the path line in the svg element i can't manage to display it. Right now only the two axes are displayed correctly.
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleTime().domain([new Date(2000, 0, 0), new Date(2017, 0, 0)]).range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var svg = d3.select(this.htmlElement).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 + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(d3.timeYear, 1));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// define the line
var line = d3.line()
.x(function(d) {
return d.name;
})
.y(function(d) {
return d.value;
});
data.forEach(function(d) {
svg.append("path")
.attr("class", "line")
.attr('d', line(d.series))
.attr('stroke', 'blue')
.attr('stroke-width', 2)
.attr('fill', 'none');
});
the structure of the data is
var data = [{
"key": "Germany",
"series": [
{
"a": "Germany",
"name": "2010",
"value": 0.2
},
{
"a": "Germany",
"name": "2011",
"value": 0.5
}
]
}, {
"key": "uk",
"series": [
{
"a":"uk",
"name": "2010",
"value": 0.3
},
{
"a":"uk",
"name": "2011",
"value": 0.6
}
]
}];
i guess that the problem lies on the data.foreach loop but i can't manage to find it.

according to the comments above the working code can be seen below
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleTime().domain([new Date(2000, 0, 0), new Date(2017, 0, 0)]).range([0, width]);
var y = d3.scaleLinear().domain([0,1]).range([height, 0]);
var svg = d3.select(this.htmlElement).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 + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(d3.timeYear, 1));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// define the line
var line = d3.line()
.x(function(d) {
return x(new Date(d.name, 0));
})
.y(function(d) {
return y(d.value);
});
data.forEach(function(d) {
svg.append("path")
.attr("class", "line")
.attr('d', line(d.series))
.attr('stroke', 'blue')
.attr('stroke-width', 2)
.attr('fill', 'none');
});

in D3.js how to add/remove datapoints at the same time?

In the example below, if my new dataset has new entry and also some record removed (added burrito, removed apple), how can i reflect the changes at the same time? So far the code pushes in a new bar, but not removing the first bar, nor does the axis updates even though I tried to re-set the x axis domain.
Blockquote
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<title>D3: Loading data from a CSV file</title>
</head>
<body>
<p>Click on this text to update the chart with new data values (once).</p>
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 30, left: 40},
w = 600 - margin.left - margin.right,
h = 300 - margin.top - margin.bottom;
var padding = 40;
var data = [
{ "Food": "Apples", "Deliciousness": 9, "new":4 },
{ "Food": "Green Beans", "Deliciousness": 5, "new":4 },
{ "Food": "Egg Salad Sandwich", "Deliciousness": 4, "new":4 },
{ "Food": "Cookies", "Deliciousness": 10, "new":4 },
{ "Food": "Liver", "Deliciousness": 2, "new":4 },
];
data.forEach(function(d) {
d.Deliciousness = +d.Deliciousness;
});
//define key
var key = function(d) {
return d.Food;
}
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right + padding)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left+"," +
margin.top+")");
//initial state
//scale and axis
var xScale = d3.scaleBand()
.domain(d=>d.Food)
.range([0,w])
.paddingInner(0.2);
xScale.domain(data.map(function(d) { return d.Food; }));
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, d=>d.Deliciousness)])
.rangeRound([h,0]);
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(5);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5);
//draw rect
svg.selectAll('rect')
.data(data, key)
.enter()
.append('rect')
.attr('x',(d,i) => margin.left + i * ((w + 20 ) / data.length))
.attr('y',d=>yScale(d.Deliciousness))
.attr('width', xScale.bandwidth())
.attr('height',d =>h-yScale(d.Deliciousness))
.attr('fill',function(d){
if (d===30) return "red";
return "rgb(0,0,"+d.Deliciousness*10+")" ;});
//text label
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(d=>d.Deliciousness)
.attr('x',(d,i) => margin.left + i * ((w + 20 ) / data.length) + 0.4*w/ data.length)
.attr("y", d=>yScale(d.Deliciousness)+15)
.attr("fill","white")
.attr("text-anchor", "middle");
//draw axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + margin.left + "," + h + ")")
.call(xAxis);
//transition
d3.select("p")
.on("click", function() {
//New values for dataset
data = [
{ "Food": "Green Beans", "Deliciousness": 5, "new":4 },
{ "Food": "Egg Salad Sandwich", "Deliciousness": 4, "new":4 },
{ "Food": "Cookies", "Deliciousness": 10, "new":4 },
{ "Food": "Liver", "Deliciousness": 2, "new":4 },
{ "Food": "Burrito", "Deliciousness": 7, "new":4 }];
xScale.domain(data.map(function(d) { return d.Food; }));
//Update all rects
var bars = svg.selectAll("rect")
.data(data, key);
bars.enter()
.append("rect")
// <-- This makes it a smooth transition!
.attr("x", w)
.attr('y',d=>yScale(d.Deliciousness))
.attr("width", xScale.bandwidth())
.attr('height',d =>h-yScale(d.Deliciousness))
.merge(bars) //Merges the enter selection with the update selection
.transition() //Initiate a transition on all elements in the update selection (all rects)
.duration(500)
.attr('x',(d,i) => margin.left + i * ((w + 20 ) / data.length))
.attr('y',d=>yScale(d.Deliciousness))
.attr('width', xScale.bandwidth())
.attr('height',d =>h-yScale(d.Deliciousness))
});
</script>
</body>
</html>
And the current wrong output is attached.
Thanks!

You are missing two things. One, .remove the exit selection and two, update your x-axis.
xScale.domain(data.map(function(d) {
return d.Food;
}));
// redraw x-axis
svg.select('.xaxis')
.call(xAxis);
//Update all rects
var bars = svg.selectAll("rect")
.data(data, key);
// remove those things exitiing
bars.exit().remove();
Running code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<title>D3: Loading data from a CSV file</title>
</head>
<body>
<p>Click on this text to update the chart with new data values (once).</p>
<script type="text/javascript">
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
w = 600 - margin.left - margin.right,
h = 300 - margin.top - margin.bottom;
var padding = 40;
var data = [{
"Food": "Apples",
"Deliciousness": 9,
"new": 4
}, {
"Food": "Green Beans",
"Deliciousness": 5,
"new": 4
}, {
"Food": "Egg Salad Sandwich",
"Deliciousness": 4,
"new": 4
}, {
"Food": "Cookies",
"Deliciousness": 10,
"new": 4
}, {
"Food": "Liver",
"Deliciousness": 2,
"new": 4
}, ];
data.forEach(function(d) {
d.Deliciousness = +d.Deliciousness;
});
//define key
var key = function(d) {
return d.Food;
}
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right + padding)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," +
margin.top + ")");
//initial state
//scale and axis
var xScale = d3.scaleBand()
.domain(d => d.Food)
.range([0, w])
.paddingInner(0.2);
xScale.domain(data.map(function(d) {
return d.Food;
}));
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.Deliciousness)])
.rangeRound([h, 0]);
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(5);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5);
//draw rect
svg.selectAll('rect')
.data(data, key)
.enter()
.append('rect')
.attr('x', (d, i) => margin.left + i * ((w + 20) / data.length))
.attr('y', d => yScale(d.Deliciousness))
.attr('width', xScale.bandwidth())
.attr('height', d => h - yScale(d.Deliciousness))
.attr('fill', function(d) {
if (d === 30) return "red";
return "rgb(0,0," + d.Deliciousness * 10 + ")";
});
//text label
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(d => d.Deliciousness)
.attr('x', (d, i) => margin.left + i * ((w + 20) / data.length) + 0.4 * w / data.length)
.attr("y", d => yScale(d.Deliciousness) + 15)
.attr("fill", "white")
.attr("text-anchor", "middle");
//draw axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
svg.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(" + margin.left + "," + h + ")")
.call(xAxis);
//transition
d3.select("p")
.on("click", function() {
//New values for dataset
data = [{
"Food": "Green Beans",
"Deliciousness": 5,
"new": 4
}, {
"Food": "Egg Salad Sandwich",
"Deliciousness": 4,
"new": 4
}, {
"Food": "Cookies",
"Deliciousness": 10,
"new": 4
}, {
"Food": "Liver",
"Deliciousness": 2,
"new": 4
}, {
"Food": "Burrito",
"Deliciousness": 7,
"new": 4
}];
xScale.domain(data.map(function(d) {
return d.Food;
}));
svg.select('.xaxis')
.call(xAxis);
//Update all rects
var bars = svg.selectAll("rect")
.data(data, key);
bars.exit().remove();
bars.enter()
.append("rect")
// <-- This makes it a smooth transition!
.attr("x", w)
.attr('y', d => yScale(d.Deliciousness))
.attr("width", xScale.bandwidth())
.attr('height', d => h - yScale(d.Deliciousness))
.merge(bars) //Merges the enter selection with the update selection
.transition() //Initiate a transition on all elements in the update selection (all rects)
.duration(500)
.attr('x', (d, i) => margin.left + i * ((w + 20) / data.length))
.attr('y', d => yScale(d.Deliciousness))
.attr('width', xScale.bandwidth())
.attr('height', d => h - yScale(d.Deliciousness));
});
</script>
</body>
</html>

Show labels based on collision detection scatter plot in d3js

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>

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