I have the following data structure as on screenshot. Could someone help me to display a multiline chart with it. I am stuck at setting the range and domain. As I am not able to find the minimum and maximum values. Looping at object, might be bad Idea, as there potentially going to be a lot of data.
Could someone suggest the correct way to do this?
Image with data structure
I am trying to use this as an example, and it has a similar task. But due to some circumstances I can not send data through AJAX in the same format as it is in this example.
http://jsfiddle.net/JYS8n/1/
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 360 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) {
return x(d.Date);
})
.y(function (d) {
return y(d.Value);
});
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 + ")");
color.domain(data.map(function (d) { return d.City; }));
data.forEach(function (kv) {
kv.Data.forEach(function (d) {
d.Date = parseDate(d.Date);
});
});
var cities = data;
var minX = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Date; }) });
var maxX = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Date; }) });
var minY = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Value; }) });
var maxY = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Value; }) });
x.domain([minX, maxX]);
y.domain([minY, maxY]);
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("Temperature (ºF)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.Data);
})
.style("stroke", function (d) {
return color(d.City);
});
city.append("text")
.datum(function (d) {
return {
name: d.City,
date: d.Data[d.Data.length - 1].Date,
value: d.Data[d.Data.length - 1].Value
};
})
.attr("transform", function (d) {
return "translate(" + x(d.date) + "," + y(d.value) + ")";
})
.attr("x", 3)
.attr("dy", ".35em")
.text(function (d) {
return d.name;
});
Related
I am creating an interactive bar chart in D3. When a button is pressed the data changes.
Here's simplified code for the bar chart:
<svg class="cex"></svg>
<script>
var margin = {top: 20, right: 20, bottom: 60, left: 35},
width = 650 - margin.left - margin.right,
height = 300- margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.outerTickSize(0)
.orient("left");
var cex = d3.select(".cex")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("/input.csv", function(error, data) {
x.domain(data.map(function(d) { return d.City; }));
y.domain([0, d3.max(data, function(d) { return d.EatIn; })]);
cex.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(60)")
.style("text-anchor", "start");;
cex.append("g")
.attr("class", "y axis")
.call(yAxis);
var bar=cex.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.City); })
.attr("y", function(d) { return y(d.EatIn); })
.attr("height", function(d) { return height - y(d.EatIn); })
.attr("width", x.rangeBand());
});
function type(d) {
d.EatIn = +d.EatIn;
return d;
}
When a button is selected the following update code runs:
function EatOutData() {
d3.csv("/input.csv", function(error, data) {
x.domain(data.map(function(d) { return d.City; }));
y.domain([0, d3.max(data, function(d) { return d.EatOut; })]);
var sel = cex.selectAll("rect")
.data(data);
sel.exit().remove();
sel.enter().append("rect")
sel.attr("class", "bar")
sel.attr("x", function(d) { return x(d.City); })
sel.attr("y", function(d) { return y(d.EatOut); })
sel.attr("height", function(d) { return height - y(d.EatOut); })
sel.attr("width", x.rangeBand());
sel.selectAll("g.y.axis")
.call(yAxis);
sel.selectAll("g.x.axis")
.call(xAxis);
function type(d) {
d.EatOut = +d.EatOut;
return d;
}
}
)};
The update changes the Y variable. So the height of the bar changes but the axis doesn't change and the scale of the two variables are quite different.
There have been a couple other SO posts on this but none seemed to fix it for me. I'm not sure why the y.domain in the update doesn't adjust them. Would really appreciate any suggestions.
You will have to remove the axis (or the text) and draw it again just like you are removing the bars and plotting them again to update data on the axis. Check the working plnkr here.
function EatOutData() {
d3.csv("input2.csv", function(error, data) {
x.domain(data.map(function(d) { console.log(d); return d.City; }));
y.domain([0, d3.max(data, function(d) { return d.EatOut; })]);
var sel = cex.selectAll("rect")
.data(data);
sel.exit().remove();
d3.select(".x.axis").remove();
sel.enter().append("rect")
sel.attr("class", "bar")
sel.attr("x", function(d) { return x(d.City); })
sel.attr("y", function(d) { return y(d.EatOut); })
sel.attr("height", function(d) { return height - y(d.EatOut); })
sel.attr("width", x.rangeBand());
cex.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(60)")
.style("text-anchor", "start");;
sel.selectAll("g.y.axis")
.call(yAxis);
sel.selectAll("g.x.axis")
.call(xAxis);
function type(d) {
d.EatOut = +d.EatOut;
return d;
}
}
)};
I'm trying to generate a D3 Stream Graph similar to this beautiful example using some activity tracker data.
I've referenced this example - http://jsfiddle.net/NTJPB/1/light
My JSFiddle - http://jsfiddle.net/Nyquist212/00war1o6/ is telling me I have something wrong with my json format (despite trying to model it on the examples).
The core of my code looks something like this -
data.forEach(function(d){
parseDate = d3.time.format("%m/%d/%Y").parse;
d.date = parseDate(d.date);
d.value = Math.round(+d.value);
});
var maxval = d3.max(data, function(d){ return d.value; });
// Nest the json by key
var nest = d3.nest()
.key(function(d) { return d.key; })
.entries(data);
var margin = {top: 50, right: 50, bottom: 50, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var color = d3.scale.linear()
.range(["#0A3430", "#1E5846", "#3E7E56", "#6BA55F", "#A4CA64", "#E8ED69"]);
var x = d3.scale.linear()
.range([0, width])
.domain([0, data[0].length]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, maxval]);
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 + ")");
var stack = d3.layout.stack()
.offset("wiggle");
var layers = stack([data]);
var area = d3.svg.area()
.interpolate('cardinal')
.x(function (d, i) { return x(i); })
.y0(function (d) { return y(d.y0);})
.y1(function (d) { return y(d.y0 + d.y);});
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function (d) {return area(d);})
.style("fill", function (d, i) {
return color(i);
});
var layers = stack([nest]);
var area = d3.svg.area()
.interpolate('cardinal')
.x(function (d, i) { return x(i); })
.y0(function (d) { return y(d.y0);})
.y1(function (d) { return y(d.y0 + d.y);});
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function (d) {return area(d);})
.style("fill", function (d, i) {
return color(i);
});
What is the preferred/desired json format I need to massage my data into? Is this even my problem?
Thanks
I refactored things and managed to get it working... amongst other things I think I was polluting my global variable namespace.
http://jsfiddle.net/Nyquist212/00war1o6/
margin = {top: 20, right: 20, bottom: 20, left: 30};
width = 950 - margin.left - margin.right;
height = 250 - margin.top - margin.bottom;
colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
parseDate = d3.time.format("%m/%d/%Y").parse;
x = d3.time.scale().range([margin.left, width]);
y = d3.scale.linear().range([height, 0]);
z = d3.scale.ordinal().range(colorrange);
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.years);
yAxis = d3.svg.axis().scale(y);
nest = d3.nest()
.key(function(d) { return d.key; });
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value= +d.value;
});
stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
layers = stack(nest.entries(data));
area = d3.svg.area()
//.interpolate("cardinal")
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
svg = d3.select("#streamgraph").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 + ")");
layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxis.orient("right"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis.orient("left"));
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})
})
I'm trying to build a multi series bar chart using d3 but running into problems due to the sparse nature of the dataset.
I want to force the x-axis to have a tick for every day, even if there is no data. The test data I have can have data points that are weeks apart so I'm expecting wide areas with no bars - which is fine.
I thought I could force the xAxis to use a set of predefined ticks using the tickValues array, but these leads to very strange display of overlaying the text for each day on top of days that do have some data.
I've included a screenshot of what I mean.
I get the feeling I'm supposed to do something when calculating the width of the bars but can't figure out what that might be.
Code:
var data = [];
var tickValues = [];
var max = _.max(chartData.tabular, function(assessment) { return assessment.dateUTC; });
var min = _.min(chartData.tabular, function(assessment) { return assessment.dateUTC; });
var iter = moment.twix(min.dateUTC, max.dateUTC).iterate("days");
while(iter.hasNext()){
var momentObj = iter.next();
var assessment = _.find(chartData.tabular, {'date': momentObj.format('DD/MM/YYYY')});
tickValues.push(momentObj.valueOf());
if(assessment != null){
if(assessment.type == 'calculated'){
data.push({date: momentObj.valueOf(), calculated: assessment.score, manual: null});
}
if(assessment.type == 'manual'){
data.push({date: momentObj.valueOf(), calculated: null, manual: assessment.score});
}
}
}
log(data);
var margin = {top: 20, right: 55, bottom: 30, left: 40},
width = $('#cahai-chart').width() - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(tickValues)
.tickFormat(function(d){return d3.time.format('%d/%m/%y')(new Date(d))});
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var color = d3.scale.ordinal()
.range(["#001c9c","#101b4d","#475003","#9c8305","#d3c47c"]);
var svg = d3.select("#cahai-chart svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var labelVar = 'date';
var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});
color.domain(varNames);
data.forEach(function (d) {
var y0 = 0;
d.mapping = varNames.map(function (name) {
return {
name: name,
label: d[labelVar],
y0: y0,
y1: y0 += +d[name]
};
});
d.total = d.mapping[d.mapping.length - 1].y1;
});
x.domain(data.map(function (d) { return d.date; }));
y.domain([0, d3.max(data, function (d) { return d.total; })]);
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");
var selection = svg.selectAll(".series")
.data(data)
.enter().append("g")
.attr("class", "series")
.attr("transform", function (d) { return "translate(" + x(d.date) + ",0)"; });
selection.selectAll("rect")
.data(function (d) { return d.mapping; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function (d) { return y(d.y1); })
.attr("height", function (d) { return y(d.y0) - y(d.y1); })
.style("fill", function (d) { return color(d.name); })
.style("stroke", "grey")
.on("mouseover", function (d) { showPopover.call(this, d); })
.on("mouseout", function (d) { removePopovers(); })
var legend = svg.selectAll(".legend")
.data(varNames.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function (d, i) { return "translate(55," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 10)
.attr("width", 10)
.attr("height", 10)
.style("fill", color)
.style("stroke", "grey");
legend.append("text")
.attr("x", width - 12)
.attr("y", 6)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function (d) { return d; });
function removePopovers () {
$('.popover').each(function() {
$(this).remove();
});
}
function showPopover (d) {
$(this).popover({
title: d.name,
placement: 'auto top',
container: 'body',
trigger: 'manual',
html : true,
content: function() {
return "Date: " + d3.time.format('%d/%m/%y')(new Date(d.label)) +
"<br/>Score: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); }
});
$(this).popover('show')
}
An ordinal scale will always show as many ticks are there are values in the domain. You just need to pass the full array of dates as the domain.
Replace this line
x.domain(data.map(function (d) { return d.date; }));
with this
x.domain(tickValues);
It looks like you have everything else set up correctly, so this will space the bars out along the axis and make them slimmer.
I have an issue on my bar/line chart whereby when data is refreshed, the left hand side Y axis has its tick marks change orientation from left to right. I am sure I have muddled up something simple as I am 4 days into D3, but I cannot see the problem.
My code is in JFIDDLE here. I have also added it to this post. Thank you for any assistance!
var data;
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 838 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.05);
var yL = d3.scale.linear()
.range([height, 0]);
var yR = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxisL = d3.svg.axis()
.scale(yL)
.orient("left")
.ticks(10);
var yAxisR = d3.svg.axis()
.scale(yR)
.orient("right")
.ticks(10);
var EfficiencyLine = d3.svg.line()
.interpolate("basis")
.x(function (d) {
return x(d.xaxis);
})
.y(function (d) {
return yR(d.max_efficiency);
});
var svg = d3.select("#daychart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var which_data = Math.floor(Math.random() * 3) + 1
switch (which_data) {
case 1:
data = data1;
break;
case 2:
data = data2;
break;
case 3:
data = data3;
break;
default:
};
//d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=CDAY&id=C1200031", function (error, data) {
data.forEach(function (d) {
d.max_energy = +d.max_energy;
d.max_efficiency = +d.max_efficiency;
});
x.domain(data.map(function (d) {
return d.xaxis;
}));
yL.domain([0, d3.max(data, function (d) {
return d.max_energy;
})]);
yR.domain([0, d3.max(data, function (d) {
return d.max_efficiency;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("transform", "rotate(0)")
.attr("y", 23)
.attr("x", 340)
.attr("dy", ".71em")
.style("text-anchor", "bottom")
.text("Timeline");
svg.append("g")
.attr("class", "y axis")
.call(yAxisL)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("x", -145)
.attr("dy", ".71em")
.style("text-anchor", "top")
.text("Energy - KWh");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.call(yAxisR)
.append("text")
.attr("y", 50)
.attr("x", -160)
.attr("transform", "translate(" + width + " ,0)")
.attr("transform", "rotate(-90)")
.attr("dy", ".71em")
.style("text-anchor", "top")
.text("Efficiency - KWh/KW");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(d.xaxis);
})
.attr("width", x.rangeBand())
.attr("y", function (d) {
return yL(d.max_energy);
})
.transition().delay(function (d, i) {
return i * 10;
}).duration(10)
.attr("height", function (d) {
return height - yL(d.max_energy);
});
svg.append("path")
.attr("d", EfficiencyLine(data))
.attr("class", "EfficiencyLine");
//Create labels
svg.selectAll("text.label")
.data(data)
.enter()
.append("text")
.attr("class", "label")
.text(function (d) {
if (d.max_energy == 0) {
return "";
} else {
return parseFloat(Math.round(d.max_energy * 100) / 100).toFixed(1);
};
})
.attr("x", function (d) {
return x(d.xaxis) + x.rangeBand() / 2;
})
.attr("y", function (d) {
return yL(d.max_energy) - 2;
})
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");
//});
//On click, update with new data
d3.select("p").on("click", function () {
var which_data = Math.floor(Math.random() * 3) + 1
switch (which_data) {
case 1:
data = data1;
break;
case 2:
data = data2;
break;
case 3:
data = data3;
break;
default:
};
// Get the data again
// d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PDAY&id=P100023", function (error, data) {
data.forEach(function (d) {
d.max_energy = +d.max_energy;
d.max_efficiency = +d.max_efficiency;
});
// Scale the range of the data again
x.domain(data.map(function (d) {
return d.xaxis;
}));
yL.domain([0, d3.max(data, function (d) {
return d.max_energy;
})]);
yR.domain([0, d3.max(data, function (d) {
return d.max_efficiency;
})]);
svg.select("g.x").call(xAxis);
svg.select("g.y").call(yAxisL); <---- PROBLEM HERE IS SUSPECT?!
svg.select("g.y").call(yAxisR);
// Make the changes
svg.selectAll(".bar") // change the bar
.data(data) // Update the data within.
.transition().delay(function (d, i) {
return i / data.length * 1000;
})
.duration(500)
.attr("x", function (d) {
return x(d.xaxis);
})
.attr("y", function (d) {
return yL(d.max_energy);
})
.attr("width", x.rangeBand())
.attr("height", function (d) {
return height - yL(d.max_energy);
});
svg.selectAll("path.EfficiencyLine") // change the EfficiencyLine
.data(data) // Update the data within.
.transition().delay(function (d, i) {
return i / data.length * 1000;
})
.duration(500)
.attr("d", EfficiencyLine(data));
svg.selectAll("text.label")
.data(data)
.transition().delay(function (d, i) {
return i / data.length * 1000;
})
.duration(500)
.text(function (d) {
if (d.max_energy == 0) {
return "";
} else {
return parseFloat(Math.round(d.max_energy * 100) / 100).toFixed(1);
};
})
.attr("x", function (d) {
return x(d.xaxis) + x.rangeBand() / 2;
})
.attr("y", function (d) {
return yL(d.max_energy) - 2;
})
//});
});
Your problem is in following two lines: (line number 492-493)
svg.select("g.y").call(yAxisL);
svg.select("g.y").call(yAxisR);
Your solution is to have two y axes two different classes, and you will achieve that by changing above lines to:
svg.select("g.y-l").call(yAxisL);
svg.select("g.y-r").call(yAxisR);
and also change
line 386 to:
.attr("class", "y-l axis")
line 397 to:
.attr("class", "y-r axis")
You need class names that are consistent.
Updated working fiddle is here
Let me know if you need any additional clarification, have a dilemma etc.
i'm using the following code for generating multi line graph. I'm getting the result. But the graph looks like:
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 1025 - margin.left - margin.right,
height = 339 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.days); })
.y(function(d) { return y(d.testRuns); });
var svg = d3.select("#application_status_graph").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 + ")");
d3.json("js/lineChartData.json", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) {return key !== "days"; }));
data.forEach(function(d) {
d.days = parseInt(d.days);
});
var status = color.domain().map(function(name){
return{
name: name,
values: data.map(function(d){
return {days: d.days, testRuns: +d[name]};
})
}
});
x.domain(d3.extent(data, function(d) { return d.days; }));
y.domain([
d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.testRuns; }); }),
d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.testRuns; }); })
]);
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("Number of Test Runs");
var city = svg.selectAll(".city")
.data(status)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.days) + "," + y(d.value.testRuns) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
But i need it in this form:
I'm new to d3. The attribute which i'm using is line only for both. But it is coming as curves. Any help is appreciated. Thanks
the problem is in var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.days); })
.y(function(d) { return y(d.testRuns); });
it should be changed to .interpolate("linear") to get the desired effect.
the wiki link explanes all types of line you can obtain:
https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate
hope this helps!