I am trying to build a chart, but I see that the starting data labels at the beginning being cut off. Not sure what is the reason. I tried using the padding solution but it doesnt seem to work.
My code is based on the C3jS library.
My x-axis padding is :
padding: {
top: 0,
bottom: 0,
left: 0
}
and y axis padding :
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
}
My fiddle: https://jsfiddle.net/sourabhtewari/8uz8j01j/371/
my code:
var stuff = [{
"year": 2015,
"month": 12,
"s1": 0.38,
"s2": 100,
"s3": 22.2,
"s4": 61,
"s5": -7,
},
{
"year": 2016,
"month": 1,
"s1": 0.39,
"s2": 101,
"s3": 22.12,
"s4": 62,
"s5": -6.0,
},
{
"year": 2016,
"month": 2,
"s1": 0.43,
"s2": 102,
"s3": 22.11,
"s4": 65,
"s5": -5.7,
},
{
"year": 2016,
"month": 3,
"s1": 0.40,
"s2": 103,
"s3": 22.07,
"s4": 63,
"s5": -5.3,
},
{
"year": 2016,
"month": 4,
"s1": 0.39,
"s2": 104,
"s3": 22.04,
"s4": 61,
"s5": -7.0,
},
{
"year": 2016,
"month": 5,
"s1": 0.38,
"s2": 105,
"s3": 22.2,
"s4": 56,
"s5": -11.3,
},
{
"year": 2016,
"month": 6,
"s1": 0.38,
"s2": 106,
"s3": 22.05,
"s4": 56,
"s5": -12.8,
},
{
"year": 2016,
"month": 7,
"s1": 0.37,
"s2": 102,
"s3": 22.7,
"s4": 58,
"s5": -9.7,
},
{
"year": 2016,
"month": 8,
"s1": 0.37,
"s2": 105,
"s3": 21.20,
"s4": 53,
"s5": -6.2,
},
{
"year": 2016,
"month": 9,
"s1": 0.35,
"s2": 108,
"s3": 20.52,
"s4": 64,
"s5": -5.3,
},
{
"year": 2016,
"month": 10,
"s1": 0.37,
"s2": 103,
"s3": 20.92,
"s4": 62,
"s5": -3.3,
},
{
"year": 2016,
"month": 11,
"s1": 0.36,
"s2": 107,
"s3": 21.11,
"s4": 51,
"s5": -5.7,
},
{
"year": 2016,
"month": 12,
"s1": 0.37,
"s2": 114,
"s3": 22.08,
"s4": 56,
"s5": -8.3,
},
{
"year": 2017,
"month": 1,
"s1": 0.35,
"s2": 103,
"s3": 22.07,
"s4": 56,
"s5": -7.2,
},
{
"year": 2017,
"month": 2,
"s1": 0.36,
"s2": 108,
"s3": 22.2,
"s4": 63,
"s5": -9.0,
},
{
"year": 2017,
"month": 3,
"s1": 0.37,
"s2": 96,
"s3": 25.67,
"s4": 62,
"s5": -9.4,
},
{
"year": 2017,
"month": 4,
"s1": 0.38,
"s2": 102,
"s3": 21.94,
"s4": 63,
"s5": -9.5,
},
{
"year": 2017,
"month": 5,
"s1": 0.35,
"s2": 114,
"s3": 22.07,
"s4": 61,
"s5": -9.0,
},
{
"year": 2017,
"month": 6,
"s1": 0.36,
"s2": 103,
"s3": 21.51,
"s4": 54,
"s5": -9.7,
},
{
"year": 2017,
"month": 7,
"s1": 0.36,
"s2": 107,
"s3": 22.2,
"s4": 65,
"s5": -11.3,
},
{
"year": 2017,
"month": 8,
"s1": 0.35,
"s2": 108,
"s3": 20.2,
"s4": 61,
"s5": -12.8,
},
{
"year": 2017,
"month": 9,
"s1": 0.36,
"s2": 103,
"s3": 22.15,
"s4": 50,
"s5": -8,
},
{
"year": 2017,
"month": 10,
"s1": 0.37,
"s2": 112,
"s3": 22.07,
"s4": 65,
"s5": -9,
},
];
var colors = {
data1: '#ff6666',
data2: '#737575',
data3: '#27A5CF',
data4: '#C9BC22',
data5: '#4D4B39',
default: '#000000'
};
var filterShade = {
data1: '#ff666685',
data2: '#73757587',
data3: '#27a5cf87',
data4: '#c9bc228f',
data5: '#4d4b3985',
default: '#000000'
}
var xAxisDates = [];
xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}
var factor = {
s1: 10,
s2: 0.08,
s3: 0.52,
s4: 0.18,
s5: 20
};
var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
vals1.push(stuff[i]["s1"] * factor.s1)
};
var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
vals2.push(stuff[i]["s2"] * factor.s2)
};
var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
vals3.push(stuff[i]["s3"] * factor.s3)
};
var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
vals5.push((stuff[i]["s5"] + factor.s5))
};
var chart = c3.generate({
size: {
width: 2000,
height: 1000
},
legend: {
show: false
},
data: {
onmouseover: onMouseover,
onmouseout: onMouseout,
type: 'spline',
groups: [
['data1', 'data2', 'data3', 'data4', 'data5']
],
order: null,
x: 'x',
columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
labels: {
format: {
data1: function(value, id, i, j) {
return value / factor.s1 + "%"
},
data2: function(value, id, i, j) {
return Math.round(value / factor.s2);
},
data3: function(value, id, i, j) {
return value / factor.s3 + "%"
},
data4: function(value, id, i, j) {
return Math.round(value / factor.s4) + "%"
},
data5: function(value, id, i, j) {
return (value - factor.s5).toFixed(1);
}
}
},
colors: {
data1: colors.data1,
data2: colors.data2,
data3: colors.data3,
data4: colors.data4,
data5: colors.data5,
}
},
tooltip: {
show: false,
format: {
value: function(value, ratio, id) {
if (id == 'data1') {
return value / factor.s1 + "%";
}
if (id == 'data2') {
return (value / factor.s2).toFixed(2);
}
if (id == 'data3') {
return value / factor.s3 + "%";
}
if (id == 'data4') {
return Math.round(value / factor.s4) + "%"
}
if (id == 'data5') {
return (value - factor.s5).toFixed(1);
}
}
},
},
axis: {
y: {
min: 0,
max: 60,
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
}
},
x: {
type: 'timeseries',
padding: {
top: 0,
bottom: 0,
left: 0
},
tick: {
values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
format: "%b-%y",
}
}
},
grid: {
x: {
lines: [
{value: '2017-06-01', text: 'June 17'}
]
}
},
padding: {
right: 30,
left: 80,
top: 80
},
point: {
show: false
}
});
d3.select("svg").append("foreignObject")
.attr("x", -20)
.attr("width", 200)
.style("text-anchor", "left")
//.append("xhtml:body")
.style("font", "14px 'Calibri'")
.style("text-align", "center")
.style("line-height", "0.2")
.html("<h3>ABC Approval of</h3></b><h3>need for speed Strategy</h3></b><h3>(Dec-15)</h3>");
d3.select("svg").append("circle")
.attr("class", "xyZero")
.attr("cx", 80)
.attr("cy", 970)
.attr("r", 6);
d3.select("svg").append("circle")
.attr("class", "data1")
.attr("cx", 40)
.attr("cy", 920)
.attr("r", 30)
.attr("fill", colors.data1);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 920)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 1<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data2")
.attr("cx", 40)
.attr("cy", 800)
.attr("r", 30)
.attr("fill", colors.data2);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 800)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 2<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data3")
.attr("cx", 40)
.attr("cy", 620)
.attr("r", 30)
.attr("fill", colors.data3);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 620)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 3<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data4")
.attr("cx", 40)
.attr("cy", 470)
.attr("r", 30)
.attr("fill", colors.data4);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 470)
.attr('class', 'dataLabelBlack')
.attr("width", 200)
.html("Data 4<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data5")
.attr("cx", 40)
.attr("cy", 280)
.attr("r", 30)
.attr("fill", colors.data5);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 280)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 5<sup>1</sup>");
console.log(d3.select("svg defs"));
var data1 = d3.select("svg defs").append("filter")
.attr("id", "filter1")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data1)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter1 = d3.select("#filter1")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data2 = d3.select("svg defs").append("filter")
.attr("id", "filter2")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data2)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter2 = d3.select("#filter2")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data3 = d3.select("svg defs").append("filter")
.attr("id", "filter3")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data3)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter3 = d3.select("#filter3")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data4 = d3.select("svg defs").append("filter")
.attr("id", "filter4")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data4)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter4 = d3.select("#filter4")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data5 = d3.select("svg defs").append("filter")
.attr("id", "filter5")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data5)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter1 = d3.select("#filter5")
.append('feComposite')
.attr('in', 'SourceGraphic');
function onMouseover(elemData) {
var id = elemData.name;
if (id == undefined) id = elemData.id;
var el = d3.select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-" + id + " > .c3-text-" + elemData.index);
if (id == 'data1')
el.attr('filter', 'url(#filter1)');
if (id == 'data2')
el.attr('filter', 'url(#filter2)');
if (id == 'data3')
el.attr('filter', 'url(#filter3)');
if (id == 'data4')
el.attr('filter', 'url(#filter4)');
if (id == 'data5')
el.attr('filter', 'url(#filter5)');
}
function onMouseout(elemData) {
var id = elemData.name;
if (id == undefined) id = elemData.id;
var el = d3.select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-" + id + " > .c3-text-" + elemData.index);
el.attr('filter', '')
}
Use a min/max configuration also for x axis like below:
x: {
type: 'timeseries',
min: '2015-11-01',
max: '2017-11-01',
...
}
Related
I am trying to create a scatter plot based on two timestamps in d3, but i'm not sure the proper way to use the d3-time-format methods to properly parse the values in the timestamp format and build a range based on a 24-hour period. So far I built a function to loop through my array and use the d3 methods to convert the string to a d3-readable format, but I can seem to figure out how to format the output so it converts from date format to time format. My questions are does d3 accept time format? And how can I go about converting the date object to a time object? At the moment I have a y-axis that presents ticks for years.
Provided is my full code:
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<style>
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 30px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<script>
var data = [
{
"x": "23:19:30",
"y": "08:07:00"
},
{
"x": "22:55:30",
"y": "06:08:00"
},
{
"x": "21:14:30",
"y": "06:13:30"
},
{
"x": "21:24:30",
"y": "06:04:30"
},
{
"x": "21:24:00",
"y": "06:04:00"
},
{
"x": "21:28:00",
"y": "06:09:00"
},
{
"x": "23:23:30",
"y": "08:20:30"
},
{
"x": "23:47:00",
"y": "08:01:30"
},
{
"x": "00:03:00",
"y": "06:49:30"
},
{
"x": "21:46:00",
"y": "06:21:00"
},
{
"x": "21:58:00",
"y": "06:02:30"
},
{
"x": "21:33:00",
"y": "05:56:00"
},
{
"x": "22:33:00",
"y": "06:15:30"
},
{
"x": "23:49:00",
"y": "07:10:30"
},
{
"x": "23:46:30",
"y": "08:35:30"
},
{
"x": "23:15:30",
"y": "05:59:30"
},
{
"x": "21:26:00",
"y": "06:05:00"
},
{
"x": "21:26:30",
"y": "05:54:00"
},
{
"x": "21:06:00",
"y": "05:53:00"
},
{
"x": "21:25:00",
"y": "05:47:30"
},
{
"x": "00:29:30",
"y": "08:59:30"
},
{
"x": "01:14:00",
"y": "08:09:30"
},
{
"x": "23:12:30",
"y": "06:06:30"
},
{
"x": "21:26:00",
"y": "05:52:30"
},
{
"x": "21:18:30",
"y": "05:47:00"
},
{
"x": "20:54:30",
"y": "07:07:30"
},
{
"x": "21:36:00",
"y": "05:53:30"
},
{
"x": "00:28:00",
"y": "08:00:00"
},
{
"x": "23:21:30",
"y": "07:58:30"
},
{
"x": "21:34:00",
"y": "05:51:00"
},
{
"x": "21:23:30",
"y": "05:58:00"
},
{
"x": "21:05:30",
"y": "05:53:00"
},
{
"x": "21:33:30",
"y": "05:39:30"
},
{
"x": "23:49:30",
"y": "06:50:00"
},
{
"x": "01:11:00",
"y": "08:37:30"
},
{
"x": "22:34:30",
"y": "05:15:00"
},
{
"x": "22:49:30",
"y": "05:55:00"
},
{
"x": "22:06:30",
"y": "06:03:00"
},
{
"x": "21:32:30",
"y": "06:01:00"
},
{
"x": "21:49:00",
"y": "05:39:30"
},
{
"x": "22:47:30",
"y": "08:27:30"
},
{
"x": "21:26:30",
"y": "05:51:00"
},
{
"x": "21:47:30",
"y": "05:51:00"
},
{
"x": "21:28:00",
"y": "05:47:30"
},
{
"x": "21:32:00",
"y": "05:47:30"
},
{
"x": "21:13:30",
"y": "05:46:00"
},
{
"x": "23:42:30",
"y": "06:45:00"
},
{
"x": "21:33:00",
"y": "05:48:00"
},
{
"x": "21:45:00",
"y": "05:51:00"
},
{
"x": "21:29:30",
"y": "06:06:00"
},
{
"x": "21:16:00",
"y": "05:43:00"
},
{
"x": "21:14:00",
"y": "05:46:30"
},
{
"x": "00:01:30",
"y": "07:25:30"
},
{
"x": "02:24:00",
"y": "10:35:30"
},
{
"x": "22:29:30",
"y": "07:04:00"
},
{
"x": "21:43:30",
"y": "05:51:00"
},
{
"x": "21:31:30",
"y": "05:45:00"
},
{
"x": "22:16:30",
"y": "05:50:30"
},
{
"x": "21:59:00",
"y": "05:47:00"
},
{
"x": "02:55:30",
"y": "11:15:30"
},
{
"x": "02:57:00",
"y": "07:23:00"
},
{
"x": "21:49:30",
"y": "06:48:30"
},
{
"x": "21:31:30",
"y": "05:26:30"
}
]
// D3 date parser
for (var i=0; i < data.length; i++){
var parser = d3.timeParse("%I:%M:%S")
data[i].x = parser(data[i].x);
data[i].y = parser(data[i].y);
}
console.log(data)
var margin = { top: 10, right: 30, bottom: 30, left: 60 }
var width = 800 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
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.scaleTime()
.domain([d3.min(data, function(d) { return d.date }), d3.max(data, function(d) { return d.date })])
.range([0, width]);
svg.append("g")
.attr("transform", "translate(" + 0 + "," + height + ")")
.call(d3.axisBottom(x))
// .tickFormat(d3.time.format);
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("Date");
var y = d3.scaleTime()
.domain([0, d3.max(data, function(d){ return +d.y })])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Time Asleep (Minutes)");
// Add line path
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.y) })
);
// Add the scatterplot (data points)
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3)
.attr("cx", function(d){ return x(d.date) })
.attr("cy", function(d){ return y(d.y) })
// Add tooltip on hover
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(d.x + "<br/>" + d.label)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 30) + "px")
})
// Remove tooltip after hover
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
</script>
To format the date, use d3.timeParse. This will parse any date string to a Date object. D3 can understand and work with time objects with timeScale.
I've renamed your original data to rawData. We also need to sort the data by the X axis:
var toDate = d3.timeParse("%H:%M:%S")
var data = rawData.map(d => ({
x: toDate(d.x),
y: toDate(d.y),
})).sort((a, b) => d3.descending(a.x, b.x)
To calculate the domain, use d3.extent which will compute the domain automatically.
var x = d3.scaleTime()
.domain(d3.extent(data, d => d.x))
.range([0, width]);
<head></head>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<style>
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 30px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<script>
var rawData = [
{
"x": "23:19:30",
"y": "08:07:00"
},
{
"x": "22:55:30",
"y": "06:08:00"
},
{
"x": "21:14:30",
"y": "06:13:30"
},
{
"x": "21:24:30",
"y": "06:04:30"
},
{
"x": "21:24:00",
"y": "06:04:00"
},
{
"x": "21:28:00",
"y": "06:09:00"
},
{
"x": "23:23:30",
"y": "08:20:30"
},
{
"x": "23:47:00",
"y": "08:01:30"
},
{
"x": "00:03:00",
"y": "06:49:30"
},
{
"x": "21:46:00",
"y": "06:21:00"
},
{
"x": "21:58:00",
"y": "06:02:30"
},
{
"x": "21:33:00",
"y": "05:56:00"
},
{
"x": "22:33:00",
"y": "06:15:30"
},
{
"x": "23:49:00",
"y": "07:10:30"
},
{
"x": "23:46:30",
"y": "08:35:30"
},
{
"x": "23:15:30",
"y": "05:59:30"
},
{
"x": "21:26:00",
"y": "06:05:00"
},
{
"x": "21:26:30",
"y": "05:54:00"
},
{
"x": "21:06:00",
"y": "05:53:00"
},
{
"x": "21:25:00",
"y": "05:47:30"
},
{
"x": "00:29:30",
"y": "08:59:30"
},
{
"x": "01:14:00",
"y": "08:09:30"
},
{
"x": "23:12:30",
"y": "06:06:30"
},
{
"x": "21:26:00",
"y": "05:52:30"
},
{
"x": "21:18:30",
"y": "05:47:00"
},
{
"x": "20:54:30",
"y": "07:07:30"
},
{
"x": "21:36:00",
"y": "05:53:30"
},
{
"x": "00:28:00",
"y": "08:00:00"
},
{
"x": "23:21:30",
"y": "07:58:30"
},
{
"x": "21:34:00",
"y": "05:51:00"
},
{
"x": "21:23:30",
"y": "05:58:00"
},
{
"x": "21:05:30",
"y": "05:53:00"
},
{
"x": "21:33:30",
"y": "05:39:30"
},
{
"x": "23:49:30",
"y": "06:50:00"
},
{
"x": "01:11:00",
"y": "08:37:30"
},
{
"x": "22:34:30",
"y": "05:15:00"
},
{
"x": "22:49:30",
"y": "05:55:00"
},
{
"x": "22:06:30",
"y": "06:03:00"
},
{
"x": "21:32:30",
"y": "06:01:00"
},
{
"x": "21:49:00",
"y": "05:39:30"
},
{
"x": "22:47:30",
"y": "08:27:30"
},
{
"x": "21:26:30",
"y": "05:51:00"
},
{
"x": "21:47:30",
"y": "05:51:00"
},
{
"x": "21:28:00",
"y": "05:47:30"
},
{
"x": "21:32:00",
"y": "05:47:30"
},
{
"x": "21:13:30",
"y": "05:46:00"
},
{
"x": "23:42:30",
"y": "06:45:00"
},
{
"x": "21:33:00",
"y": "05:48:00"
},
{
"x": "21:45:00",
"y": "05:51:00"
},
{
"x": "21:29:30",
"y": "06:06:00"
},
{
"x": "21:16:00",
"y": "05:43:00"
},
{
"x": "21:14:00",
"y": "05:46:30"
},
{
"x": "00:01:30",
"y": "07:25:30"
},
{
"x": "02:24:00",
"y": "10:35:30"
},
{
"x": "22:29:30",
"y": "07:04:00"
},
{
"x": "21:43:30",
"y": "05:51:00"
},
{
"x": "21:31:30",
"y": "05:45:00"
},
{
"x": "22:16:30",
"y": "05:50:30"
},
{
"x": "21:59:00",
"y": "05:47:00"
},
{
"x": "02:55:30",
"y": "11:15:30"
},
{
"x": "02:57:00",
"y": "07:23:00"
},
{
"x": "21:49:30",
"y": "06:48:30"
},
{
"x": "21:31:30",
"y": "05:26:30"
}
]
// D3 date parser
var toDate = d3.timeParse("%H:%M:%S")
var data = rawData.map(d => ({
x: toDate(d.x),
y: toDate(d.y),
})).sort((a, b) => d3.descending(a.x, b.x))
console.log(data[0])
var margin = { top: 10, right: 30, bottom: 30, left: 60 }
var width = 800 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
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.scaleTime()
.domain(d3.extent(data, d => d.x))
.range([0, width]);
svg.append("g")
.attr("transform", "translate(" + 0 + "," + height + ")")
.call(d3.axisBottom(x))
// .tickFormat(d3.time.format);
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("Date");
var y = d3.scaleTime()
.domain(d3.extent(data, d => d.y))
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Time Asleep (Minutes)");
// Add line path
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.x) })
.y(function(d) { return y(d.y) })
);
// Add the scatterplot (data points)
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3)
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.y) })
// Add tooltip on hover
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(d.x + "<br/>" + d.label)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 30) + "px")
})
// Remove tooltip after hover
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
</script>
I'm creating a pretty simple line graph and want the initial load to be a section of all available data, so am setting extent on the x axis:
This is how I am setting the extent:
axis: {
"x": {
"type": "timeseries",
"tick": {
"format": "%d/%m/%Y"
},
"label": {
"text": "X Label",
"position": "outer-center"
},
"padding": {
"left": 0
},
"extent": ["2017-10-01", "2017-10-05"]
},
"y": {
"label": {
"text": "Y Label",
"position": "outer-middle"
}
}
},
But it is ignored. The chart just shows the full extent of the data.
Is this the correct way to show a subset of the data when the chart is generated?
This is the full code and here's a fiddle (I tried a code snippet but didn't work)
const columnData = [
["x", "2017-10-01", "2017-10-02", "2017-10-03", "2017-10-04", "2017-10-05", "2017-10-06", "2017-10-07", "2017-10-08", "2017-10-09", "2017-10-10", "2017-10-11", "2017-10-12", "2017-10-13", "2017-10-14", "2017-10-15", "2017-10-16"],
["data0", -55, -50, 11, -18, 39, 65, -84, -15, 14, 81, -79, 67, -48, 38, 99, -60],
["data1", 28, 14, -99, -33, 55, 71, 58, 66, 7, -88, 99, -37, -7, 59, -13, -57],
["data2", 14, 6, -9, 25, 42, -93, -6, 67, -35, 88, 36, 45, 42, 78, 51, -88],
["data3", 31, -73, -69, 45, 55, 15, -48, 41, -64, -12, -6, 14, -69, 16, -65, -73],
["data4", 98, 60, 82, 80, -62, -47, 55, 87, -65, 37, 22, 30, 93, -69, -88, 33],
["data5", -98, 57, 71, -25, -40, 13, 72, -90, 71, -71, -21, -9, -90, 73, -94, 100]
];
const generateChart = function() {
const chart = c3.generate({
data: {
"x": "x",
"columns": columnData,
"type": "line"
},
axis: {
"x": {
"type": "timeseries",
"tick": {
"format": "%d/%m/%Y"
},
"label": {
"text": "X Label",
"position": "outer-center"
},
"padding": {
"left": 0
},
"extent": ["2017-10-01", "2017-10-05"]
},
"y": {
"label": {
"text": "Y Label",
"position": "outer-middle"
}
}
},
zoom: {
enabled: true
},
transition: {
duration: 100
},
legend: {
show: false
},
subchart: {
show: true
},
size: {
height: 500
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
};
generateChart();
As of 11th May 2018 it seems this is a bug: https://github.com/c3js/c3/issues/2357
I switched to earlier versions (see below) of C3 and D3 and it works as it should.
I am now using C3 version 0.4.10 and D3 version 3.5.0
I am trying to use the onMouseover api of c3js to include a data-label highlight instead of a tooltip (that is just highlight data-labels for that x-axis unlike showing it in a tooltip).
But when I try and look at the data, it (function) doesn't give me anything. I believe there is a different approach to do this.
My fiddle: https://jsfiddle.net/sourabhtewari/8uz8j01j/198/
my code:
var stuff = [{
"year": 2015,
"month": 12,
"s1": 0.38,
"s2": 100,
"s3": 22.2,
"s4": 61,
"s5": -7,
},
{
"year": 2016,
"month": 1,
"s1": 0.39,
"s2": 101,
"s3": 22.12,
"s4": 62,
"s5": -6.0,
},
{
"year": 2016,
"month": 2,
"s1": 0.43,
"s2": 102,
"s3": 22.11,
"s4": 65,
"s5": -5.7,
},
{
"year": 2016,
"month": 3,
"s1": 0.40,
"s2": 103,
"s3": 22.07,
"s4": 63,
"s5": -5.3,
},
{
"year": 2016,
"month": 4,
"s1": 0.39,
"s2": 104,
"s3": 22.04,
"s4": 61,
"s5": -7.0,
},
{
"year": 2016,
"month": 5,
"s1": 0.38,
"s2": 105,
"s3": 22.2,
"s4": 56,
"s5": -11.3,
},
{
"year": 2016,
"month": 6,
"s1": 0.38,
"s2": 106,
"s3": 22.05,
"s4": 56,
"s5": -12.8,
},
{
"year": 2016,
"month": 7,
"s1": 0.37,
"s2": 102,
"s3": 22.7,
"s4": 58,
"s5": -9.7,
},
{
"year": 2016,
"month": 8,
"s1": 0.37,
"s2": 105,
"s3": 21.20,
"s4": 53,
"s5": -6.2,
},
{
"year": 2016,
"month": 9,
"s1": 0.35,
"s2": 108,
"s3": 20.52,
"s4": 64,
"s5": -5.3,
},
{
"year": 2016,
"month": 10,
"s1": 0.37,
"s2": 103,
"s3": 20.92,
"s4": 62,
"s5": -3.3,
},
{
"year": 2016,
"month": 11,
"s1": 0.36,
"s2": 107,
"s3": 21.11,
"s4": 51,
"s5": -5.7,
},
{
"year": 2016,
"month": 12,
"s1": 0.37,
"s2": 114,
"s3": 22.08,
"s4": 56,
"s5": -8.3,
},
{
"year": 2017,
"month": 1,
"s1": 0.35,
"s2": 103,
"s3": 22.07,
"s4": 56,
"s5": -7.2,
},
{
"year": 2017,
"month": 2,
"s1": 0.36,
"s2": 108,
"s3": 22.2,
"s4": 63,
"s5": -9.0,
},
{
"year": 2017,
"month": 3,
"s1": 0.37,
"s2": 96,
"s3": 25.67,
"s4": 62,
"s5": -9.4,
},
{
"year": 2017,
"month": 4,
"s1": 0.38,
"s2": 102,
"s3": 21.94,
"s4": 63,
"s5": -9.5,
},
{
"year": 2017,
"month": 5,
"s1": 0.35,
"s2": 114,
"s3": 22.07,
"s4": 61,
"s5": -9.0,
},
{
"year": 2017,
"month": 6,
"s1": 0.36,
"s2": 103,
"s3": 21.51,
"s4": 54,
"s5": -9.7,
},
{
"year": 2017,
"month": 7,
"s1": 0.36,
"s2": 107,
"s3": 22.2,
"s4": 65,
"s5": -11.3,
},
{
"year": 2017,
"month": 8,
"s1": 0.35,
"s2": 108,
"s3": 20.2,
"s4": 61,
"s5": -12.8,
},
{
"year": 2017,
"month": 9,
"s1": 0.36,
"s2": 103,
"s3": 22.15,
"s4": 50,
"s5": -8,
},
{
"year": 2017,
"month": 10,
"s1": 0.37,
"s2": 112,
"s3": 22.07,
"s4": 65,
"s5": -9,
},
];
var xAxisDates = [];
xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}
var factor = {
s1: 10,
s2: 0.08,
s3: 0.52,
s4: 0.18,
s5: 20
};
var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
vals1.push(stuff[i]["s1"] * factor.s1)
};
var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
vals2.push(stuff[i]["s2"] * factor.s2)
};
var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
vals3.push(stuff[i]["s3"] * factor.s3)
};
var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
vals5.push((stuff[i]["s5"] + factor.s5))
};
var chart = c3.generate({
size: {
width: 2000,
height: 600
},
onmouseover: onMouseover,
data: {
type: 'spline',
groups: [
['data1', 'data2', 'data3', 'data4', 'data5']
],
order: null,
x: 'x',
columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
labels: {
format: {
data1: function(value, id, i, j) {
return value / factor.s1 + "%"
},
data2: function(value, id, i, j) {
return Math.round(value / factor.s2);
},
data3: function(value, id, i, j) {
return value / factor.s3 + "%"
},
data4: function(value, id, i, j) {
return Math.round(value / factor.s4) + "%"
},
data5: function(value, id, i, j) {
return (value - factor.s5).toFixed(1);
}
}
},
colors: {
data1: '#ff6666',
data2: '#737575',
data3: '#27A5CF',
data4: '#C9BC22',
data5: '#4D4B39'
}
},
tooltip: {
format: {
value: function(value, ratio, id) {
if (id == 'data1') {
return value / factor.s1 + "%";
}
if (id == 'data2') {
return (value / factor.s2).toFixed(2);
}
if (id == 'data3') {
return value / factor.s3 + "%";
}
if (id == 'data4') {
return Math.round(value / factor.s4) + "%"
}
if (id == 'data5') {
return (value - factor.s5).toFixed(1);
}
}
},
},
axis: {
y: {
min: 0,
max: 60,
padding: {
top: 0,
bottom: 0
}
},
x: {
type: 'timeseries',
padding: {
top: 0,
bottom: 0,
left:0
},
tick: {
values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
format: "%b-%y",
}
}
},
padding: {
right: 30
},
point: {
show: false
}
});
function onMouseover(elemData) {
console.log(elemData);
}
Attach onmouseover/onmouseout handler to data instead of to general chart:
data: {
onmouseover: onMouseover,
onmouseout: onMouseout,
...
}
and apply style to data text labels:
function onMouseover(elemData) {
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "red");
}
function onMouseout(elemData) {
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "none");
}
Check the fiddle updated: https://jsfiddle.net/beaver71/2pxjdcm2/
var stuff = [{
"year": 2015,
"month": 12,
"s1": 0.38,
"s2": 100,
"s3": 22.2,
"s4": 61,
"s5": -7,
},
{
"year": 2016,
"month": 1,
"s1": 0.39,
"s2": 101,
"s3": 22.12,
"s4": 62,
"s5": -6.0,
},
{
"year": 2016,
"month": 2,
"s1": 0.43,
"s2": 102,
"s3": 22.11,
"s4": 65,
"s5": -5.7,
},
{
"year": 2016,
"month": 3,
"s1": 0.40,
"s2": 103,
"s3": 22.07,
"s4": 63,
"s5": -5.3,
},
{
"year": 2016,
"month": 4,
"s1": 0.39,
"s2": 104,
"s3": 22.04,
"s4": 61,
"s5": -7.0,
},
{
"year": 2016,
"month": 5,
"s1": 0.38,
"s2": 105,
"s3": 22.2,
"s4": 56,
"s5": -11.3,
},
{
"year": 2016,
"month": 6,
"s1": 0.38,
"s2": 106,
"s3": 22.05,
"s4": 56,
"s5": -12.8,
},
{
"year": 2016,
"month": 7,
"s1": 0.37,
"s2": 102,
"s3": 22.7,
"s4": 58,
"s5": -9.7,
},
{
"year": 2016,
"month": 8,
"s1": 0.37,
"s2": 105,
"s3": 21.20,
"s4": 53,
"s5": -6.2,
},
{
"year": 2016,
"month": 9,
"s1": 0.35,
"s2": 108,
"s3": 20.52,
"s4": 64,
"s5": -5.3,
},
{
"year": 2016,
"month": 10,
"s1": 0.37,
"s2": 103,
"s3": 20.92,
"s4": 62,
"s5": -3.3,
},
{
"year": 2016,
"month": 11,
"s1": 0.36,
"s2": 107,
"s3": 21.11,
"s4": 51,
"s5": -5.7,
},
{
"year": 2016,
"month": 12,
"s1": 0.37,
"s2": 114,
"s3": 22.08,
"s4": 56,
"s5": -8.3,
},
{
"year": 2017,
"month": 1,
"s1": 0.35,
"s2": 103,
"s3": 22.07,
"s4": 56,
"s5": -7.2,
},
{
"year": 2017,
"month": 2,
"s1": 0.36,
"s2": 108,
"s3": 22.2,
"s4": 63,
"s5": -9.0,
},
{
"year": 2017,
"month": 3,
"s1": 0.37,
"s2": 96,
"s3": 25.67,
"s4": 62,
"s5": -9.4,
},
{
"year": 2017,
"month": 4,
"s1": 0.38,
"s2": 102,
"s3": 21.94,
"s4": 63,
"s5": -9.5,
},
{
"year": 2017,
"month": 5,
"s1": 0.35,
"s2": 114,
"s3": 22.07,
"s4": 61,
"s5": -9.0,
},
{
"year": 2017,
"month": 6,
"s1": 0.36,
"s2": 103,
"s3": 21.51,
"s4": 54,
"s5": -9.7,
},
{
"year": 2017,
"month": 7,
"s1": 0.36,
"s2": 107,
"s3": 22.2,
"s4": 65,
"s5": -11.3,
},
{
"year": 2017,
"month": 8,
"s1": 0.35,
"s2": 108,
"s3": 20.2,
"s4": 61,
"s5": -12.8,
},
{
"year": 2017,
"month": 9,
"s1": 0.36,
"s2": 103,
"s3": 22.15,
"s4": 50,
"s5": -8,
},
{
"year": 2017,
"month": 10,
"s1": 0.37,
"s2": 112,
"s3": 22.07,
"s4": 65,
"s5": -9,
},
];
var xAxisDates = [];
xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}
var factor = {
s1: 10,
s2: 0.08,
s3: 0.52,
s4: 0.18,
s5: 20
};
var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
vals1.push(stuff[i]["s1"] * factor.s1)
};
var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
vals2.push(stuff[i]["s2"] * factor.s2)
};
var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
vals3.push(stuff[i]["s3"] * factor.s3)
};
var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
vals5.push((stuff[i]["s5"] + factor.s5))
};
var chart = c3.generate({
size: {
width: 2000,
height: 600
},
//onmouseover: onMouseover,
data: {
onmouseover: onMouseover,
onmouseout: onMouseout,
type: 'spline',
groups: [
['data1', 'data2', 'data3', 'data4', 'data5']
],
order: null,
x: 'x',
columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
labels: {
format: {
data1: function(value, id, i, j) {
return value / factor.s1 + "%"
},
data2: function(value, id, i, j) {
return Math.round(value / factor.s2);
},
data3: function(value, id, i, j) {
return value / factor.s3 + "%"
},
data4: function(value, id, i, j) {
return Math.round(value / factor.s4) + "%"
},
data5: function(value, id, i, j) {
return (value - factor.s5).toFixed(1);
}
}
},
colors: {
data1: '#ff6666',
data2: '#737575',
data3: '#27A5CF',
data4: '#C9BC22',
data5: '#4D4B39'
}
},
tooltip: {
format: {
value: function(value, ratio, id) {
if (id == 'data1') {
return value / factor.s1 + "%";
}
if (id == 'data2') {
return (value / factor.s2).toFixed(2);
}
if (id == 'data3') {
return value / factor.s3 + "%";
}
if (id == 'data4') {
return Math.round(value / factor.s4) + "%"
}
if (id == 'data5') {
return (value - factor.s5).toFixed(1);
}
}
},
},
axis: {
y: {
min: 0,
max: 60,
padding: {
top: 0,
bottom: 0
}
},
x: {
type: 'timeseries',
padding: {
top: 0,
bottom: 0,
left:0
},
tick: {
values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
format: "%b-%y",
}
}
},
padding: {
right: 30
},
point: {
show: false
}
});
function onMouseover(elemData) {
console.log(elemData.name, elemData.index);
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "red");
}
function onMouseout(elemData) {
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "none");
//rgb(255, 102, 102)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<div id="chart"></div>
Using d3js, I need to draw(append) circles, not all together but with less then one second of distance. So one circle in x position, another one in y position after 0.5 second.
Use setTimeout. Here is the working code snippet.
var nodes = [{
"name": "6",
"x": 207,
"y": 305
}, {
"name": "7",
"x": 404,
"y": 310
}, {
"name": "8",
"x": 420,
"y": 510
}, {
"name": "9",
"x": 540,
"y": 126
}, {
"name": "10",
"x": 350,
"y": 150
}, {
"name": "11",
"x": 177,
"y": 320
}, {
"name": "12",
"x": 200,
"y": 190
}, {
"name": "13",
"x": 170,
"y": 150
}, {
"name": "14",
"x": 107,
"y": 510
}, {
"name": "15",
"x": 104,
"y": 150
}, {
"name": "16",
"x": 104,
"y": 150
}, {
"name": "17",
"x": 310,
"y": 160
}, {
"name": "18",
"x": 120,
"y": 110
}, {
"name": "19",
"x": 619,
"y": 145
}, {
"name": "20",
"x": 148,
"y": 107
}, {
"name": "21",
"x": 575,
"y": 107
}];
var width = 500,
height = 400;
var color = d3.scale.category20();
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
nodes.forEach(function(d, i) {
setTimeout(function() {
svg.append("circle")
.datum(d)
.attr("class", "node")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", "10")
.style("fill", function(d) {
return color(i);
});
}, 500 * i);
});
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.overlay {
fill: none;
pointer-events: all;
}
#map{
border: 2px #555 dashed;
width:500px;
height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<div id="map"></div>
</body>
You can use the standard javascript methods setTimeout or setInterval to append the circles one by one with a variable delay depending on the circle index.
Or, you could create all the circles on enter normally using the standard d3 syntax but with opacity set to 0 and just add a .transition() with delay dependent on the index that sets opacity to 1
Here's a working jsfiddle of the latter option: http://jsfiddle.net/pg5m3m3n/5/
Extract:
canvas.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
'cx': function(d) { return d.x; },
'cy': function(d) { return d.y; },
'r': 10,
'opacity': 0
})
.transition().delay(function(d,i) { return i*50; })
.attr('opacity',1);
The pros of this is that it uses d3 syntax and it's just 2 lines of code more than the normal append, the con is that the circles are actually added immediately and only become visible one by one, which may give performance issues if the number of circles to append is huge.
There must be something obvious I'm missing here.
I'm trying to draw a simple line and this is my javascript:
// CRASH DATA
var lineData = [
{ "x": 0, "y": 0.5},
{ "x": 2, "y": 0.1},
{ "x": 4, "y": -0.5},
{ "x": 6, "y": -0.8},
{ "x": 8, "y": -0.9},
{ "x": 10, "y": -0.10},
{ "x": 12, "y": -0.10},
{ "x": 14, "y": -0.11},
{ "x": 16, "y": -0.10},
{ "x": 18, "y": -0.9},
{ "x": 20, "y": -0.7},
{ "x": 22, "y": -0.6},
{ "x": 24, "y": -0.5},
{ "x": 26, "y": -0.3},
{ "x": 28, "y": -0.1},
{ "x": 30, "y": 0.2},
{ "x": 32, "y": 0.4},
{ "x": 34, "y": 0.8},
{ "x": 36, "y": 0.8},
{ "x": 38, "y": 0.7},
{ "x": 40, "y": 0.4},
{ "x": 42, "y": 0.4},
{ "x": 44, "y": 0.4},
{ "x": 46, "y": 0.2},
{ "x": 48, "y": 0.1},
{ "x": 50, "y": 0}
];
//DRAW TRAJECTORY
function draw(data){
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
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 + ")");
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.x; }));
y.domain(d3.extent(data, function(d) { return d.y; }));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
svg.append("path") // Add the lineFunction path.
.attr("class", "line")
.attr("d", lineFunction(data));
};
//PUT EVERYTHING ON SCREEN
$( document ).ready(function() {
draw(lineData);
});
And here is the outcome:
You aren't actually using the scales you define. Your line function should be
var lineFunction = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })
.interpolate("linear");
Complete example here.