I am developing a scatterplot in d3 where you can alter both x axis and y axis using a dropdown menu.
I was able to draw the grid lines but my problem is redrawing them when a new value is picked for either x axis or y axis.
I hope someone could advise me what I should do to make this happen.
Here is my code up until now(js):
d3.csv('data.csv',function (data) {
// CSV section
var body = d3.select('body')
var selectData = [ { "text" : "Trust words" },
{ "text" : "Surprise words" },
{ "text" : "Sadness words" },
{ "text" : "Positive words"},
{ "text" : "Negative words"},
{ "text" : "Fear words"},
{ "text" : "Disgust words"},
{ "text" : "Anticipation words"},
{ "text" : "Anger words"},
]
// Select X-axis Variable
var span = body.append('span')
.text('Select an Emotion word for the Horizontal scale: ')
var xInput = body.append('select')
.attr('id','xSelect')
.on('change',xChange)
.selectAll('option')
.data(selectData)
.enter()
.append('option')
.attr('value', function (d) { return d.text })
.text(function (d) { return d.text ;})
body.append('br')
body.append('br')
// Select Y-axis Variable
var span = body.append('span')
.text('Select an Emotion word for the Vertical scale: ')
var yInput = body.append('select')
.attr('id','ySelect')
.on('change',yChange)
.selectAll('option')
.data(selectData)
.enter()
.append('option')
.attr('value', function (d) { return d.text })
.text(function (d) { return d.text ;})
body.append('br')
// Variables
var body = d3.select('body')
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
var h = 700 - margin.top - margin.bottom
var w = 1350 - margin.left - margin.right
var rscale = d3.scale.linear()
// Scales
var cValue = function(d) { if (parseFloat(d['Emotions words']) >=0 && parseFloat(d['Emotions words']) <= 200000) return 'Emotion Words NO: 0-200,000 inc'
else if(parseFloat(d['Emotions words']) >200000 && parseFloat(d['Emotions words']) <=350000) return 'Emotion Words NO: 200,001-350,000 inc'
else return 'Emotion words NO: >350,000'},
color = d3.scale.category10();
var xScale = d3.scale.linear()
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d['Trust words']) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d['Trust words']) })])
])
.range([0,w])
var yScale = d3.scale.linear()
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d['Trust words']) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d['Trust words']) })])
])
.range([h,0])
// SVG
var svg = body.append('svg')
.attr('height',h + margin.top + margin.bottom)
.attr('width',w + margin.left + margin.right)
.append('g')
.attr('transform','translate(' + margin.left + ',' + margin.top + ')')
// X-axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(5)
// Y-axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(5)
function make_x_axis() {
return d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
}
// Circles
var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx',function (d) { return xScale(d['Trust words']) })
.attr('cy',function (d) { return yScale(d['Trust words']) })
.attr('r',function (d) { return rscale(d['Average_movie_rating'])*2;})
.attr('stroke','black')
.attr('stroke-width',1)
.attr('fill',function (d) { return color(cValue(d)); })
.on('mouseover', function () {
d3.select(this)
.transition()
.duration(500)
.attr('r',20)
.attr('stroke-width',3)
})
.on('mouseout', function () {
d3.select(this)
.transition()
.duration(500)
.attr('r',10)
.attr('stroke-width',1)
})
.append('title') // Tooltip
.text(function (d) { return 'Actor Name: ' + d['Actor_ Name'] +
'\nTrust words: ' + d['Trust words'] +
'\nSurprise words: ' + d['Surprise words']+
'\nSadness words: ' + d['Sadness words'] +
'\nPositive words: ' + d['Positive words'] +
'\nNegative words: ' + d['Negative words'] +
'\nFear words: ' + d['Fear words'] +
'\nDisgust words: ' + d['Disgust words'] +
'\nAnticipation words: ' + d['Anticipation words'] +
'\nAnger words: ' + d['Anger words'] +
'\nAverage ranking: '+ d['Average_movie_rating']})
// X-axis
svg.append('g')
.attr('class','axis')
.attr('id','xAxis')
.attr('transform', 'translate(0,' + h + ')')
.call(xAxis)
.append('text') // X-axis Label
.attr('id','xAxisLabel')
.attr('y',-10)
.attr('x',w)
.attr('dy','.71em')
.style('text-anchor','end')
.text('Trust words')
// Y-axis
svg.append('g')
.attr('class','axis')
.attr('id','yAxis')
.call(yAxis)
.append('text') // y-axis Label
.attr('id', 'yAxisLabel')
.attr('transform','rotate(-90)')
.attr('x',0)
.attr('y',5)
.attr('dy','.71em')
.style('text-anchor','end')
.text('Trust words')
svg.append('g')
.attr("class", "grid")
.attr("transform", "translate(0," + h + ")")
.call(make_x_axis()
.tickSize(-h, 0, 0)
.tickFormat("")
)
svg.append('g')
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-w, 0, 0)
.tickFormat("")
)
function yChange() {
var value = this.value // get the new y value
yScale // change the yScale
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d[value]) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d[value]) })])
])
yAxis.scale(yScale) // change the yScale
d3.select('#yAxis') // redraw the yAxis
.transition().duration(1000)
.call(yAxis)
d3.select('#yAxisLabel') // change the yAxisLabel
.text(value)
d3.selectAll('circle') // move the circles
.transition().duration(1000)
.delay(function (d,i) { return i*100})
.attr('cy',function (d) { return yScale(d[value]) })
}
function xChange() {
var value = this.value // get the new x value
xScale // change the xScale
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d[value]) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d[value]) })])
])
xAxis.scale(xScale) // change the xScale
d3.select('#xAxis') // redraw the xAxis
.transition().duration(1000)
.call(xAxis)
d3.select('#xAxisLabel') // change the xAxisLabel
.transition().duration(1000)
.text(value)
d3.selectAll('circle') // move the circles
.transition().duration(1000)
.delay(function (d,i) { return i*100})
.attr('cx',function (d) { return xScale(d[value]) })
}
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", w + 25)
.attr("y", 490)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
// draw legend text
legend.append("text")
.attr("x", w - 24)
.attr("y", 500)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d;})
.text(function(d) { return d;})
})
Thanks
I'm sorry, I wanted to write a comment, but I don't have enough reputation so I have to write this as an answer. Is there any chance you can provide a mini dataset so that I can run this code in my machine? It's easier to understand how the code is supposed to work if I have a dataset to run it with.
Also, what do you mean by gridlines? If you mean the ticks, then I think those won't change no matter what scale you use. You set it to 5 and so I think there will always be 5 evenly spaced tick marks.
Related
I want to update the point and axis as different option selection along with using tooltips. I select the value as a different option and select a different option. This code can also update the line with tooltips but when the line has updated the point of the previous line is exits but I want to remove those points when the line is updated.
var div = d3.select('body').append('div')
var margin = {top: 30, right: 30, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
// var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");
console.log(formatTime);
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)
// .tickFormat(formatPct)
.orient("left");
var line = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.pop);
});
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
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 dataFiltered = {};
var dataNested = {};
d3.csv("data2.csv", function (error, data) {
data.forEach(function (d) {
d.date = parseDate(d.year);
d.pop = +d.population;
d.value = +d.days;
});
var dataNested = d3.nest()
.key(function (d) {
return d.days
})
.entries(data)
div.append('select')
.attr('id', 'variableSelect')
.on('change', variableChange)
.selectAll('option')
.data(dataNested).enter()
.append('option')
.attr('value', function (d) {
return d.key
})
.text(function (d) {
return d.key
})
var dataFiltered = dataNested.filter(function (d) {
return d.key === d3.select('#variableSelect').property('value')
})
x.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.date;
}));
y.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.pop;
}));
// svg.append("path")
// .attr("class", "line")
// .attr("d", line(data));
// svg.select("dot")
// .data(data)
// .enter().append("circle")
// .attr("r", 4)
// .attr("cx", function (d) {
// return x(d.date);
// })
// .attr("cy", function (d) {
// return y(d.pop);
// })
function toolstip(div) {
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function (d) {
return x(d.date);
})
.attr("cy", function (d) {
return y(d.pop);
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "," + d.pop)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
}
toolstip(div);
// xFormat = "%d-%m-%y";
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + height + ")")
// .call(d3.axisBottom(xAxis).tickFormat(d3.timeFormat(xFormat)));
.call(xAxis);
svg.append("g")
.attr("class", "yAxis")
.call(yAxis)
// .call(d3.axisLeft(yAxis))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// .text("Cumulative Return");
svg.append("path")
.datum(dataFiltered[0].values)
.attr("class", "line")
.attr("d", line);
function variableChange() {
var value = this.value;
var dataFiltered = dataNested.filter(function (d) {
return d.key === value
})
console.log(dataFiltered);
x.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.date;
}));
y.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.pop;
}));
toolstip();
// svg.selectAll("dot")
d3.select('.xAxis').transition().duration(1000).call(xAxis)
d3.select('.yAxis').transition().duration(1000).call(yAxis)
d3.select('.line').datum(dataFiltered[0].values).attr('d', line)
}
}
);
I have a scatter plot which shows a trendline/average line based on the data provided. The only problem is that the trendline bleeds into the y axis label (see picture).
Here is my d3 code, how can I "trim" the trendline to fit only the plotted region of the chart?
scatterPlot.js
jQuery.sap.require("sap/ui/thirdparty/d3");
jQuery.sap.declare("pricingTool.ScatterPlot");
sap.ui.core.Element.extend("pricingTool.ScatterPlotItem", { metadata : {
properties : {
"quarter" : {type : "string", group : "Misc", defaultValue : null},
"values" : {type : "object", group : "Misc", defaultValue : null}
}
}});
sap.ui.core.Control.extend("pricingTool.ScatterPlot", {
metadata : {
properties: {
"title": {type : "string", group : "Misc", defaultValue : "ScatterPlot Title"}
},
aggregations : {
"items" : { type: "pricingTool.ScatterPlotItem", multiple : true, singularName : "item"}
},
defaultAggregation : "items",
events: {
"onPress" : {},
"onChange":{}
}
},
init: function() {
//console.log("vizConcept.ScatterPlot.init()");
this.sParentId = "";
},
createScatterPlot : function() {
//console.log("vizConcept.ScatterPlot.createScatterPlot()");
var oScatterPlotLayout = new sap.m.VBox({alignItems:sap.m.FlexAlignItems.Center,justifyContent:sap.m.FlexJustifyContent.Center});
var oScatterPlotFlexBox = new sap.m.FlexBox({height:"auto",alignItems:sap.m.FlexAlignItems.Center});
/* ATTENTION: Important
* This is where the magic happens: we need a handle for our SVG to attach to. We can get this using .getIdForLabel()
* Check this in the 'Elements' section of the Chrome Devtools:
* By creating the layout and the Flexbox, we create elements specific for this control, and SAPUI5 takes care of
* ID naming. With this ID, we can append an SVG tag inside the FlexBox
*/
this.sParentId=oScatterPlotFlexBox.getIdForLabel();
oScatterPlotLayout.addItem(oScatterPlotFlexBox);
return oScatterPlotLayout;
},
/**
* The renderer render calls all the functions which are necessary to create the control,
* then it call the renderer of the vertical layout
* #param oRm {RenderManager}
* #param oControl {Control}
*/
renderer: function(oRm, oControl) {
var layout = oControl.createScatterPlot();
oRm.write("<div");
oRm.writeControlData(layout); // writes the Control ID and enables event handling - important!
oRm.writeClasses(); // there is no class to write, but this enables
// support for ColorBoxContainer.addStyleClass(...)
oRm.write(">");
oRm.renderControl(layout);
oRm.addClass('verticalAlignment');
oRm.write("</div>");
},
onAfterRendering: function(){
//console.log("vizConcept.ScatterPlot.onAfterRendering()");
//console.log(this.sParentId);
var cItems = this.getItems();
var data = [];
for (var i=0;i<cItems.length;i++){
var oEntry = {};
for (var j in cItems[i].mProperties) {
oEntry[j]=cItems[i].mProperties[j];
}
data.push(oEntry);
}
$("svg").last().remove();
/*
* ATTENTION: See .createScatterPlot()
* Here we're picking up a handle to the "parent" FlexBox with the ID we got in .createScatterPlot()
* Now simply .append SVG elements as desired
* EVERYTHING BELOW THIS IS PURE D3.js
*/
var margin = {
top: 25,
right: 30,
bottom: 80,
left: 90
},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var tableData = data[0].values;
var dates = [];
for(var i = 0; i<tableData.length; i++){
dates[i] = new Date(tableData[i].date);
dates.sort(function(a,b) {
return a -b;
})
}
var minDate = dates[0],
maxDate = dates[dates.length-1];
//test//
var year = new Date(dates[0]);
minDate.setMonth(year.getMonth(), -2);
var year = new Date(dates[dates.length-1]);
console.log(year);
//maxDate.setMonth(year.getMonth(), 6);
console.log(maxDate);
//end test//
// Our X scale
//var x = d3.scale.linear()
var x = d3.time.scale()
.domain([minDate, maxDate])
.range([0, width]);
// Our Y scale
var y = d3.scale.linear()
.range([height, 0]);
// Our color bands
var color = d3.scale.ordinal()
.range(["#000", "#004460", "#0070A0", "#008BC6", "#009DE0", "#45B5E5", "8CCDE9", "#DAEBF2"]); //"#00A6ED",
// Use our X scale to set a bottom axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(8)
.tickFormat(d3.time.format("%b-%Y"));
// Same for our left axis
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var tip = d3.select("body").append("div")
.attr("class", "sctooltip")
.style("position", "absolute")
.style("text-align", "center")
.style("width", "80px")
.style("height", "42px")
.style("padding", "2px")
.style("font", "11px sans-serif")
.style("background", "#F0F0FF")
.style("border", "0px")
.style("border-radius", "8px")
.style("pointer-events", "none")
.style("opacity", 0);
var vis = d3.select("#" + this.sParentId);
var svg = vis.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("background-color","white")
.style("font", "12px sans-serif")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain([minDate, maxDate]);
// Our Y domain is from zero to our highest total
y.domain([0, d3.max(data, function (d) {
var max = d3.max(d.values, function (dd){
return(+dd.price);
})
return max;
})]);
var totalval = 0;
var totalval2 = 0;
var values = 0;
data.forEach(function (d) {
d.values.forEach(function (dd){
values +=1;
totalval += +dd.date;
totalval2 += +dd.price;
});
});
var priceAverage = totalval2/values;
var average = totalval/totalval2;
var value = data[0].values[0].price;
var line_data = [
{"x": 0, "y": y.domain()[0]},
{"x": y.domain()[1]*average, "y": y.domain()[1]}
];
var avgline = d3.svg.line()
.x(function(d){ return x(d.x); })
.y(function(d){ return y(d.y); })
.interpolate("linear");
svg.append("g")
.attr("class", "x axis")
.style("fill", "none")
.style("stroke", "grey")
.style("shape-rendering", "crispEdges")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-25)" );
svg.append("g")
.attr("class", "y-axis")
.style("fill", "none")
.style("stroke", "grey")
.style("shape-rendering", "crispEdges")
.call(yAxis);
//average line
svg.append("path")
.attr("class", "avgline")
.style("stroke", "#000")
.style("stroke-width", "1px")
.style("stroke-dasharray", ("4, 4"))
.attr("d", avgline(line_data));
var plot = svg.selectAll(".values") //changed this from quarter
.data(data)
.enter().append("g");
plot.selectAll("dot")
.data(function (d) {
return d.values;
})
.enter().append("circle")
.attr("class", "dot")
.attr("r", 5)
.attr("cx", function (d){
return x(d.date);
})
.attr("cy", function (d) {
return y(d.price);
})
.style("stroke", "#004460")
.style("fill", function (d) {
return color(d.name);
})
.style("opacity", .9)
.style("visibility", function(d){
if(+d.date != 0){
return "visible";
}else{
return "hidden";
}
})
.style("pointer-events", "visible")
.on("mouseover", function(d){
tip.transition()
.duration(200)
.style("opacity", .8);
tip.html(d.name + "<br/>" + d.quarter + "<br />" + "Avg. " +(+d.date/+d.price).toFixed(2))
.style("left", (d3.event.pageX-40) + "px")
.style("top", (d3.event.pageY-50) + "px");
})
.on("mouseout", function(d){
tip.transition()
.duration(500)
.style("opacity", 0);
});;
// var legend = svg.selectAll(".legend")
// .data(color.domain())
// .enter().append("g")
// .attr("class", "legend")
// .attr("transform", function (d, i) {
// return "translate(0," + i * 16 + ")";
// });
// legend.append("rect")
// .attr("x", width - 12)
// .attr("width", 12)
// .attr("height", 12)
// .style("fill", color);
// legend.append("text")
// .attr("x", width - 24)
// .attr("y", 6)
// .attr("dy", ".35em")
// .style("text-anchor", "end")
// .style("font", "11px sans-serif")
// .text(function (d) {
// return d;
// });
//y-axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", - (height/2))
.attr("y", 10 - margin.left)
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font", "16px sans-serif")
.text("PPI Cost($)");
//x-axis label
svg.append("text")
.attr("transform", "translate("+(width/2) +","+ (height +margin.top +50)+")")
.style("text-anchor", "middle")
.style("font", "16px sans-serif")
.text("Purchase Date");
var avglabel = svg.append("g")
.attr("transform", "translate(" + (width-40) + ",140)");
avglabel.append("text")
.style("text-anchor", "middle")
.text("Average: $" + priceAverage.toFixed(2));
}
});
Try setting the x values to the start and end of the graph:
var line_data = [
{x: x.domain()[0], y: average},
{x: x.domain()[1], y: average}
];
Alternatively you could set the path string directly without using a path generator:
svg.append("path")
.attr("class", "avgline")
.style("stroke", "#000")
.style("stroke-width", "1px")
.style("stroke-dasharray", ("4, 4"))
.attr("d", [
"M", x.range()[0], y(average),
"H", x.range()[1]
].join(' '))
The graphic below is the current output of my program, which is basically working. The problem is, it draws the graph from left to right, plotting the JSON data it receives, but then goes off the edge of the screen (or into the bit bucket), when what I want is for the graph to scroll to the left as the JSON data is consumed. You can see the data is cutoff past the "9" label.
I'm not sure where to begin making that happen and would appreciate some advice.
Current output:
function createLineChart(data, number) {
var xy_chart = d3_xy_chart()
.width(960)
.height(500)
.xlabel("TCS")
.ylabel("STATUS");
var svg = d3.select(".lineChart" + number).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, svg) {
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);
})]);
// Set y scale
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, i) {
// Remove remove decimal points and set values again to the x axis
if (d % 1 == 0) {
return parseInt(d)
} else {
return " "
}
});
var y_axis = d3.svg.axis()
.scale(y_scale)
.orient("left")
.tickFormat(function (d, i) {
if (d == "1") {
return "NOT EXECUTED"
} else if (d == "2") {
return "FAILED"
} else if (d == "3") {
return "PASSED"
} else {
return " "
}
});
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("");
// Draw the line
var draw_line = d3.svg.line()
.interpolate("linear")
.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 + ")");
// Append g as x grid to svg
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);
// Append g as x axis to svg
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);
});
// Set label texts
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;
}
}
I want to plot multiple lines and scatter plot on the same d3 chart.And I also define a mouse over function to calculate the distance between the scatter points and the line. Here is my js code:
import measurement from '../datasets/measurement';
// Parse the date / time
var parseDate = d3.time.format("%e/%_m/%Y %H");
// Get the data
d3.csv("../datasets/Book1.csv", function(error, data) {
data.forEach(function (d) {
d.date = parseDate.parse(d.dateHour);
d.estPressure = +d.x_inf;
d.lowPressure = +d.m1std;
d.upPressure = +d.p1std;
});
console.log(data);
// Set the dimensions of the canvas / graph
var margin = {top: 20, right: 50, bottom: 30, left: 66},
body_width = parseInt(d3.select('body').style('width').replace('px','')),
width = body_width - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
// Adds the svg canvas
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 + ")");
// Set the ranges
var x = d3.time.scale()
.domain([parseDate.parse("1/5/2016 00"), parseDate.parse("14/5/2016 23")])
// .domain(data.date])
.nice(d3.time.week)
/*.domain(data.map(function (d) {
return d.date;
}))*/
.range([0, width]);
//.rangeRoundBands([0, width], 0.1);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format('%B %e %H:00'));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.attr("x", 1780)
.attr("y", 940)// text label for the x axis
.style("text-anchor", "end")
.text("Time");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
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("pressure");
y.domain([0, d3.max(data, function (d) {
return d.upPressure;
})]);
var line = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.estPressure);
});
// Draw line.
var linegraph = svg.selectAll("path.line").data([data], function (d) {
return d.date;
});
linegraph.attr('d', line).style("opacity", 1.0);
linegraph.enter().append("path")
.attr("class", "line")
.attr("d", line);
});
var data1 = measurement.map(function (d) {
Object.keys(d).forEach(function (key) {
d[key] = +d[key];
});
return d;
});
console.log(data1);
// Add the scatterplot
svg.selectAll(".dot")
.data(data1)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function (d) {
return x(d.t);
})
.attr("cy", function (d) {
return y(d.est);
})
.on("mouseover", function (d) { //hover event
tooltip.transition()
.duration(100)
.style("opacity", .9)
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 30) + "px");
var dist = 0, lowerbound;
data.forEach(function (n) {
if (n.t === d.t) {
dist = d.est - n.pressure ;
if (dist < 0) dist = dist * -1;
}
else if (n.time < d.t) { // linear interpolation for the t
lowerbound = n;
}
});
tooltip.html("<h1>" + "X: " + d.t + " Y: " + d.x + " distance:" + dist.toFixed(3) + "</h1>");
})
.on("mouseout", function (d) {
tooltip.transition()
.duration(200)
.style("opacity", 0);
});
And my csv data for the line chart is like this:
tHour,x_inf,p1std,m1std,dateHour
1,10,10.3,9.2,1/5/2016 00
2,12,16.8,7.2,1/5/2016 01
3,14,21.2,6.8,1/5/2016 02
4,15,19.8,10.2,1/5/2016 03
5,14.5,16.9,12.1,1/5/2016 04
6,18,22.96,13.04,1/5/2016 05
My jason data for the scatter points are like(measurement):
{
"t": 1,
"est": 1
},
{
"t": 3,
"est": 12
},
{
"t": 5,
"est": 14
},
{
Could anyone help me about the code? I am new to d3...And I just can plot only one line here using the dateHour as x and x_inf as y in the csv data. I want to use dateHour data as x and plot three lines using x_inf,p1std,m1std values. It would be so nice if you could also help me with the scatter points.
I currently have a d3 multiseries line chart which displays how many emails and phone calls have been received.
My data retrieval and data structure is as follows:
var allCommunications = _uow.CommunicationRepository.Get()
.Where(c => c.DateOpened.Year == year)
.GroupBy(c => new { c.Method, c.DateOpened.Month })
.Select(g => new
{
Type = g.Key.Method,
xVal = g.Key.Month,
Value = g.Count()
});
This is then converted to the following structure:
public class LineChartData
{
public int xValue { get; set; }
public int EmailValue { get; set; }
public int PhoneValue { get; set; }
}
The graph is created using the following javascript:
function buildCommunicationLineChart(data, placeholder, callback, type) {
var margin = { top: 20, right: 30, bottom: 40, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
emailLineColour = "#779ECB", phoneLineColour = "#FF6961", tooltipTextColour = "white";
var x;
if (type == "month") {
var x = d3.scale.linear()
.domain([1, 31])
.range([0, width]);
} else if (type == "year")
{
var x = d3.scale.linear()
.domain([1, 12])
.range([0, width]);
}
var minPhone = Math.min.apply(Math, data.map(function (o) { return o.PhoneValue }));
var maxPhone = Math.max.apply(Math, data.map(function (o) { return o.PhoneValue }));
var minEmail = Math.min.apply(Math, data.map(function (o) { return o.EmailValue }));
var maxEmail = Math.max.apply(Math, data.map(function (o) { return o.EmailValue }));
var minY = Math.min(minPhone, minEmail);
var maxY = Math.max(maxPhone, maxEmail);
var y = d3.scale.linear()
.domain([minY, maxY + 5])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickPadding(10)
.tickSubdivide(true)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickPadding(10)
.tickSize(-width)
.tickSubdivide(true)
.orient("left");
if (type == "month") {
var emailTip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<strong>Emails:</strong> <span style='color:"+tooltipTextColour+"'>" + d.EmailValue + "</span><br /><strong>Day of Month:</strong><span style='color:white'>" + d.xValue + "</span>";
});
var phoneTip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<strong>Calls:</strong> <span style='color:" + tooltipTextColour + "'>" + d.PhoneValue + "</span><br /><strong>Day of Month:</strong><span style='color:white'>" + d.xValue + "</span>";
});
}
else if (type == "year") {
var emailTip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<strong>Emails:</strong> <span style='color:" + tooltipTextColour + "'>" + d.EmailValue + "</span><br /><strong>Month of Year:</strong><span style='color:white'>" + d.xValue + "</span>";
});
var phoneTip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<strong>Calls:</strong> <span style='color:" + tooltipTextColour + "'>" + d.PhoneValue + "</span><br /><strong>Month of Year:</strong><span style='color:white'>" + d.xValue + "</span>";
});
}
var svg = placeholder.append("svg")
.attr("width", width + margin.left + margin.right + 50)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "chart")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.call(emailTip);
svg.call(phoneTip);
if (type == "year") {
svg.append("g")
.attr("class", "x axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "none")
.attr("y", (-margin.left) + 530)
.attr("x", -height + 860)
.text('Month');
}
else if (type == "month") {
svg.append("g")
.attr("class", "x axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "none")
.attr("y", (-margin.left) + 525)
.attr("x", -height + 860)
.text('Day');
}
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", (-margin.left) + 15)
.attr("x", -height / 2)
.text('Communications');
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var emailLine = d3.svg.line()
.interpolate("linear")
.x(function (d) { return x(d.xValue); })
.y(function (d) { return y(d.EmailValue); });
var phoneLine = d3.svg.line()
.interpolate("linear")
.x(function (d) { return x(d.xValue); })
.y(function (d) { return y(d.PhoneValue); });
svg.selectAll('.emailLine')
.data(data)
.enter()
.append("path")
.attr("class", "line")
.attr('stroke', emailLineColour)
.attr("d", emailLine(data));
svg.selectAll("circle.emailLine")
.data(data)
.enter().append("svg:circle")
.attr("class", "emailLine")
.style("fill", emailLineColour)
.attr("cx", emailLine.x())
.attr("cy", emailLine.y())
.attr("r", 5)
.on('mouseover', emailTip.show)
.on('mouseout', emailTip.hide);
svg.selectAll('.phoneLine')
.data(data)
.enter()
.append("path")
.attr("class", "line")
.attr('stroke', phoneLineColour)
.attr("d", phoneLine(data));
svg.selectAll("circle.phoneLine")
.data(data)
.enter().append("svg:circle")
.attr("class", "phoneLine")
.style("fill", phoneLineColour)
.attr("cx", phoneLine.x())
.attr("cy", phoneLine.y())
.attr("r", 5)
.on('mouseover', phoneTip.show)
.on('mouseout', phoneTip.hide);
svg.append("text")
.attr("transform", "translate(" + (x(data[data.length - 1].xValue) + 5) + "," + y(data[data.length - 1].EmailValue) + ")")
.attr("dy", ".35em")
.style("fill", emailLineColour)
.text("Email");
svg.append("text")
.attr("transform", "translate(" + (x(data[data.length - 1].xValue) + 5) + "," + y(data[data.length - 1].PhoneValue) + ")")
.attr("dy", ".35em")
.style("fill", phoneLineColour)
.text("Phone");
if (callback) {
callback();
}
}
Obviously this is very long and very limited due to each series for the chart being hardcoded. Therefore, it would be quite a bit of work if another method of communication is added. My idea behind resolving this is to have a dynamic number of series and create a line for each series. Therefore i guess my data structure would have to be something like:
public class LineChartData
{
public string Type {get;set;} //for the label
public Data Data{get;set;}
}
public class Data
{
public int xValue { get; set; }
public int Value { get; set; }
}
Or something similar?
So i guess my question is, would this be the correct approach to structuring my data, any suggestions to change my query to do this, and how would i edit my javascript in order to account for this.
Apologies for the long winded question and thanks in advance for any help.
If any more info is required, please ask and i will provide anything i can.
Thanks,
EDIT:
Here is my updated code after attempting the suggestion by Mark below:
function buildCommunicationLineChart(data, placeholder, callback, type) {
var margin = { top: 20, right: 30, bottom: 40, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
emailLineColour = "#779ECB", phoneLineColour = "#FF6961", tooltipTextColour = "white";
var color = d3.scale.category10();
var nest = d3.nest()
.key(function (d) { return d.Type; })
.entries(data);
var x;
if (type == "month") {
var x = d3.scale.linear()
.domain([1, 31])
.range([0, width]);
} else if (type == "year")
{
var x = d3.scale.linear()
.domain([1, 12])
.range([0, width]);
}
var y = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickPadding(10)
.tickSubdivide(true)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickPadding(10)
.tickSize(-width)
.tickSubdivide(true)
.orient("left");
var line = d3.svg.line()
.interpolate("linear")
.x(function (d) { return x(d.xValue); })
.y(function (d) { return y(d.Value); });
var svg = placeholder.append("svg")
.attr("width", width + margin.left + margin.right + 50)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "chart")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
if (type == "year") {
svg.append("g")
.attr("class", "x axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "none")
.attr("y", (-margin.left) + 530)
.attr("x", -height + 860)
.text('Month');
}
else if (type == "month") {
svg.append("g")
.attr("class", "x axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "none")
.attr("y", (-margin.left) + 525)
.attr("x", -height + 860)
.text('Day');
}
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", (-margin.left) + 15)
.attr("x", -height / 2)
.text('Communications');
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
color.domain(d3.keys(nest[0]).filter(function (key) { return key === nest[0].key; }));
var methods = color.domain().map(function (commType) {
return {
commType: commType,
values: nest.map(function (d) {
return { xValue: d.xVal, Value: d.Value };
})
};
});
x.domain(d3.extent(nest, function (d) { return d.xVal; }));
y.domain([
d3.min(methods, function (m) { return d3.min(m.values, function (v) { return v.Value; }); }),
d3.max(methods, function (m) { return d3.max(m.values, function (v) { return v.Value; }); })
]);
var method = svg.selectAll('.method')
.data(methods)
.enter().append('g')
.attr('class', 'method');
method.append('path')
.attr('class', 'line')
.attr('d', function (d) { return line(d.values); })
.attr('stroke', function (d) { return color(d.commType); });
method.append('text')
.datum(function (d) { return { commType: d.commType, value: d.values[d.values.length - 1] }; })
.attr("transform", function (d) { return "translate(" + x(d.value.xVal) + "," + y(d.value.Value) + ")"; })
.attr('x', 3)
.attr('dy', '.35em')
.text(function (d) { return d.commType; });
if (callback) {
callback();
}
}
Your question might be a little too broad for StackOverflow, but I'll try to help. The way I always approach the question of how should my API output data, is to ask how is my data going to be consumed on the front-end? In this case, you are trying to create a d3 multi-line chart and d3 will want an array of objects containing an array of data points (here's a great example). Something like this in JSON:
[
{
key: 'Email', //<-- identifies the line
values: [ //<-- points for the line
{
xVal: '20160101',
Value: 10
}, {
xVal: '20160102',
Value: 20
}, ...
]
}, {
key: 'Phone',
values: [
{
xVal: 'Jan',
Value: 30
}, {
xVal: '20160102',
Value: 25
}, ...
]
},
...
]
Now the question becomes how to get your data into a structure like that. Given many hours, you could probably write a linq statement that'll do but, I kinda like returning a flat JSON object (after all if we are writing a re-useable restful interface, flat is the most useful). So, how then would we make that final jump for our easy to use d3 structure. Given your:
.Select(g => new
{
Type = g.Key.Method,
xVal = g.Key.Month,
Value = g.Count()
});
would produce a JSON object like:
[{"Type":"Phone","xVal":"Feb","Value":1},{"Type":"Email","xVal":"Jan","Value":3},{"Type":"Phone","xVal":"Jan","Value":1}]
d3 could then get to our "easy to work with" format as easy as:
var nest = d3.nest()
.key(function(d) { return d.Type; })
.entries(data);
Which produces:
[
{
"key":"Phone",
"values":[
{
"Type":"Phone",
"xVal":"Feb",
"Value":1
},
{
"Type":"Phone",
"xVal":"Jan",
"Value":1
}
]
},
{
"key":"Email",
"values":[
{
"Type":"Email",
"xVal":"Jan",
"Value":3
}
]
}
]
From this structure, your multi-line chart becomes a breeze....
EDITS FOR COMMENTS
I really didn't understand what you were attempting to do with some of your code (in particular with your methods variable - the data was already in a great format for d3). So I refactored a bit:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script>
// function buildCommunicationLineChart(data, placeholder, callback, type) {
var margin = {
top: 20,
right: 30,
bottom: 40,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var colors = {
"Phone": "#FF6961",
"Email": "#779ECB"
}
var color = d3.scale.category10();
var data = [{
"Type": "Phone",
"xValue": 1,
"Value": 5
}, {
"Type": "Email",
"xValue": 1,
"Value": 7
}, {
"Type": "Email",
"xValue": 2,
"Value": 1
}, {
"Type": "Phone",
"xValue": 2,
"Value": 4
}, {
"Type": "Phone",
"xValue": 4,
"Value": 2
}];
var nest = d3.nest()
.key(function(d) {
return d.Type;
})
.entries(data);
var x;
var type = "month";
if (type == "month") {
var x = d3.scale.linear()
.domain([1, 31])
.range([0, width]);
} else if (type == "year") {
var x = d3.scale.linear()
.domain([1, 12])
.range([0, width]);
}
var y = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickPadding(10)
.tickSubdivide(true)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickPadding(10)
.tickSize(-width)
.tickSubdivide(true)
.orient("left");
var line = d3.svg.line()
.interpolate("linear")
.x(function(d) {
return x(d.xValue);
})
.y(function(d) {
return y(d.Value);
});
var svg = d3.select('body').append("svg")
.attr("width", width + margin.left + margin.right + 50)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "chart")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
y.domain([
0,
d3.max(nest, function(t) { return d3.max(t.values, function(v) { return v.Value; }); })
]);
x.domain([
d3.min(nest, function(t) { return d3.min(t.values, function(v) { return v.xValue; }); }),
d3.max(nest, function(t) { return d3.max(t.values, function(v) { return v.xValue; }); })
]);
nest.forEach(function(d){
for (var i = x.domain()[0]; i <= x.domain()[1]; i++){
if (!d.values.some(function(v){ return (v.xValue === i) })){
d.values.splice((i - 1), 0, {xValue: i, Value: 0});
}
}
});
var xAxis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
if (type == "year") {
xAxis
.append("text")
.attr("class", "axis-label")
.attr("transform", "none")
.attr("y", margin.top + 15)
.attr("x", width / 2)
.text('Month');
} else if (type == "month") {
xAxis
.append("text")
.attr("class", "axis-label")
.attr("y", margin.top + 15)
.attr("x", width / 2)
.text('Day')
.style('text-anchor', 'middle');
}
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", (-margin.left) + 15)
.attr("x", -height / 2)
.text('Communications')
.style('text-anchor', 'middle');
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
/*
color.domain(d3.keys(nest[0]).filter(function(key) {
return key === nest[0].key;
}));
var methods = color.domain().map(function(commType) {
return {
commType: commType,
values: nest.map(function(d) {
return {
xValue: d.xVal,
Value: d.Value
};
})
};
});
*/
var method = svg.selectAll('.method')
.data(nest)
.enter().append('g')
.attr('class', 'method');
method.append('path')
.attr('class', 'line')
.attr('d', function(d) {
return line(d.values);
})
.style('stroke', function(d) {
return color(d.key);
// OR if you want to use you defined ones
//return colors[d.key];
});
method.append('text')
.attr("transform", function(d) {
var len = d.values.length - 1;
return "translate(" + x(d.values[len].xValue) + "," + y(d.values[len].Value) + ")";
})
.attr('x', 3)
.attr('dy', '.35em')
.text(function(d) {
return d.key;
});
//if (callback) {
// callback();
//}
// }
</script>
</body>
</html>
EDIT FOR COMMENTS 2
That's actually a tricky question. How about:
// for each dataset
nest.forEach(function(d){
// loop our domain
for (var i = x.domain()[0]; i <= x.domain()[1]; i++){
// if there's no xValue at that location
if (!d.values.some(function(v){ return (v.xValue === i) })){
// add a zero in place
d.values.splice((i - 1), 0, {xValue: i, Value: 0});
}
}
});
Code sample above is edited also.