I am trying to follow this https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
Here is my fiddle: https://jsfiddle.net/q0xece4k/17/'
<!DOCTYPE html>
<meta charset="utf-8">
<title>Plotting a Trendline with D3.js</title>
<style>
.line {
stroke: blue;
fill:none;
stroke-width: 3;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-size: 10px;
font-family: sans-serif;
}
.text-label {
font-size: 10px;
font-family: sans-serif;
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
</style>
<div>
<div id="container"></div>
</div>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
var height = 300;
var width = 600;
var margin = {top: 10, right:20, bottom: 50, left: 40};
// formatters for axis and labels
var rateFormat = d3.format("0.1f");
var trendDataArr = [
{
date: "2017-01-29",
value: 87.1
},
{
date: "2017-02-06",
value: 88
},
{
date: "2017-02-13",
value: 86.8
},
{
date: "2017-02-20",
value: 86.8
},
{
date: "2017-02-27",
value: 87.1
},
{
date: "2017-03-05",
value: 85.8
},
{
date: "2017-03-12",
value: 85.5
},
{
date: "2017-03-19",
value: 87.1
},
{
date: "2017-03-26",
value: 88
},
{
date: "2017-04-02",
value: 87.4
},
{
date: "2017-04-09",
value: 86.8
},
{
date: "2017-04-16",
value: 87.1
},
{
date: "2017-04-23",
value: 87.4
},
{
date: "2017-04-30",
value: 85.8
},
{
date: "2017-05-07",
value: 86.5
},
{
date: "2017-05-14",
value: 87.1
},
{
date: "2017-05-21",
value: 86.9
},
{
date: "2017-05-28",
value: 87.7
},
{
date: "2017-06-04",
value: 87.8
}
];
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var svg = d3.select('#container')
.append("svg")
.attr("pointer-events", "all")
.attr("width", 1000 + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.append("g");
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("g")
.attr("class", "y axis");
svg.append("g")
.attr("class", "x axis");
function getDate(d) {
return moment(d["date"],"YYYY-MM-DD").toDate();
}
function removeDuplicates(xLabels){
var result = [];
xLabels.forEach(function(item) {
if(result.indexOf(item) < 0) {
result.push(item);
}
return result;
});
}
var minDate = getDate(trendDataArr[0]),
maxDate = getDate(trendDataArr[trendDataArr.length-1]);
var xScale = d3.scaleTime()
// .rangeBands([margin.left, width-100], .1);
.domain([minDate, maxDate])
.range([margin.left, width])
// .nice(trendDataArr.length);
var yScale = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom(xScale)
.tickFormat(d3.timeFormat('%d %b %y'));
var yAxis = d3.axisLeft(yScale);
var xLabels = trendDataArr.map(function (d) { return getDate(d); });
xScale.domain(d3.extent(xLabels));
yScale.domain([Math.round(d3.min(trendDataArr, function(d) { return parseFloat(d['value']); }))-5, Math.round(d3.max(trendDataArr, function(d) { return parseFloat(d['value']); }))+5]);
var line = d3.line()
.x(function(d) { return xScale(getDate(d)); })
.y(function(d) { return yScale(d['value']); })
.curve(d3.curveCardinal);
svg.append("path")
.datum(trendDataArr)
.attr('fill','none')
.attr("d", line(trendDataArr.filter(function(d) {
return d;
}
)
)
)
.attr('stroke', "steelblue")
.attr('stroke-width', 2);
svg.select(".x.axis")
.attr("transform", "translate(0," + (height+5) + ")")
.call(xAxis.tickFormat(d3.timeFormat("%d %b %y")))
.selectAll("text")
.style("text-anchor","end")
.attr("transform", function(d) {
return "rotate(-45) ";
});
svg.select(".y.axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis.tickFormat(rateFormat));
// chart title
svg.append("text")
.attr("x", (width + (margin.left + margin.right) )/ 2 -200)
.attr("y", 0 + margin.top -20)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-family", "sans-serif")
.text("Zoomable chart");
//y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -20)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Rate");
function zoomed() {
var t = d3.event.transform;
xScale.domain(t.rescaleX(xScale).domain());
}
</script>
</body>
Could someone help me with the zooming in/out on the axis so that I can drill into each day or zoom out to years?
I got it to work:
here is the updated fiddle:
https://jsfiddle.net/q0xece4k/17/
var height = 300;
var width = 600;
var margin = {top: 10, right:20, bottom: 50, left: 40};
// formatters for axis and labels
var rateFormat = d3.format("0.1f");
var trendDataArr = [
{
date: "2017-01-29",
value: 87.1
},
{
date: "2017-02-06",
value: 88
},
{
date: "2017-02-13",
value: 86.8
},
{
date: "2017-02-20",
value: 86.8
},
{
date: "2017-02-27",
value: 87.1
},
{
date: "2017-03-05",
value: 85.8
},
{
date: "2017-03-12",
value: 85.5
},
{
date: "2017-03-19",
value: 87.1
},
{
date: "2017-03-26",
value: 88
},
{
date: "2017-04-02",
value: 87.4
},
{
date: "2017-04-09",
value: 86.8
},
{
date: "2017-04-16",
value: 87.1
},
{
date: "2017-04-23",
value: 87.4
},
{
date: "2017-04-30",
value: 85.8
},
{
date: "2017-05-07",
value: 86.5
},
{
date: "2017-05-14",
value: 87.1
},
{
date: "2017-05-21",
value: 86.9
},
{
date: "2017-05-28",
value: 87.7
},
{
date: "2017-06-04",
value: 87.8
}
];
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var svg = d3.select('#container')
.append("svg")
.attr("pointer-events", "all")
.attr("width", 1000 + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.append("g");
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("g")
.attr("class", "y axis");
svg.append("g")
.attr("class", "x axis");
function getDate(d) {
return moment(d["date"],"YYYY-MM-DD").toDate();
}
function removeDuplicates(xLabels){
var result = [];
xLabels.forEach(function(item) {
if(result.indexOf(item) < 0) {
result.push(item);
}
return result;
});
}
var minDate = getDate(trendDataArr[0]),
maxDate = getDate(trendDataArr[trendDataArr.length-1]);
var xScale = d3.scaleTime()
// .rangeBands([margin.left, width-100], .1);
.domain([minDate, maxDate])
.range([margin.left, width])
// .nice(trendDataArr.length);
var yScale = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom(xScale)
.tickFormat(d3.timeFormat('%d %b %y'));
var yAxis = d3.axisLeft(yScale);
var xLabels = trendDataArr.map(function (d) { return getDate(d); });
xScale.domain(d3.extent(xLabels));
yScale.domain([Math.round(d3.min(trendDataArr, function(d) { return parseFloat(d['value']); }))-5, Math.round(d3.max(trendDataArr, function(d) { return parseFloat(d['value']); }))+5]);
var line = d3.line()
.x(function(d) { return xScale(getDate(d)); })
.y(function(d) { return yScale(d['value']); })
.curve(d3.curveCardinal);
svg.append("path")
.datum(trendDataArr)
.attr('fill','none')
.attr("d", line(trendDataArr.filter(function(d) {
return d;
}
)
)
)
.attr('stroke', "steelblue")
.attr('stroke-width', 2);
svg.select(".x.axis")
.attr("transform", "translate(0," + (height+5) + ")")
.call(xAxis.tickFormat(d3.timeFormat("%d %b %y")))
.selectAll("text")
.style("text-anchor","end")
.attr("transform", function(d) {
return "rotate(-45) ";
});
svg.select(".y.axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis.tickFormat(rateFormat));
// chart title
svg.append("text")
.attr("x", (width + (margin.left + margin.right) )/ 2 -200)
.attr("y", 0 + margin.top -20)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-family", "sans-serif")
.text("Zoomable chart");
//y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -20)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Rate");
function zoomed() {
var t = d3.event.transform;
xScale.domain(t.rescaleX(xScale).domain());
}
You need to call xAxis again.
function zoomed() {
console.info('zoom called');
var t = d3.event.transform;
xScale.domain(t.rescaleX(xScale).domain());
svg.select(".x.axis")
.call(xAxis.tickFormat(d3.timeFormat("%d %b %y")));
}
This is not the complete solution as it just zooms xAxis and not the plot but it might help you in zooming the plot too.
Or you might want to refer: https://bl.ocks.org/deristnochda/1ffe16ccf8bed2035ea5091ab9bb53fb
Related
Assuming I have data like this:
const data = [
{
month: 1
apples: ...,
bananas: ...,
cherries: ...,
dates: ...,
},
{
month: 2
apples: ...,
bananas: ...,
cherries: ...,
dates: ...,
},
{
month: 3
apples: ...,
bananas: ...,
cherries: ...,
dates: ...,
}
]
Going for 12 months, using keys of ['apples','bananas','cherries','dates']. The d3.stack() will produce an array for 4 bars with 12 sets of values. This makes sense. However, what if I wanted to create 12 bars with the keys broken up so it's sets of 4 values.
Is it possible to flip things on their heads in this fashion?
You just need to convert the data into the required format and flip the axis and data configurations in the chart as shown below.
Existing :
var margin = {
top: 20,
right: 160,
bottom: 35,
left: 30
};
var width = 500 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* Data in strings like it would be if imported from a csv */
var data = [{
year: "2006",
redDelicious: "10",
mcintosh: "15",
oranges: "9",
pears: "6"
},
{
year: "2007",
redDelicious: "12",
mcintosh: "18",
oranges: "9",
pears: "4"
},
{
year: "2008",
redDelicious: "05",
mcintosh: "20",
oranges: "8",
pears: "2"
},
{
year: "2009",
redDelicious: "01",
mcintosh: "15",
oranges: "5",
pears: "4"
}
];
var parse = d3.time.format("%Y").parse;
// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
return data.map(function(d) {
return {
x: parse(d.year),
y: +d[fruit]
};
});
}));
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) {
return d.x;
}))
.rangeRoundBands([10, width - 10], 0.02);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})])
.range([height, 0]);
var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];
// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat(function(d) {
return d
});
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) {
return colors[i];
});
var rect = groups.selectAll("rect")
.data(function(d) {
return d;
})
.enter()
.append("rect")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y0 + d.y);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y0 + d.y);
})
.attr("width", x.rangeBand())
.on("mouseover", function() {
tooltip.style("display", null);
})
.on("mouseout", function() {
tooltip.style("display", "none");
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});
// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(30," + i * 19 + ")";
});
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return colors.slice().reverse()[i];
});
legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
switch (i) {
case 0:
return "Anjou pears";
case 1:
return "Naval oranges";
case 2:
return "McIntosh apples";
case 3:
return "Red Delicious apples";
}
});
// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
path.domain {
stroke: none;
}
.y .tick line {
stroke: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
New :
var margin = {
top: 20,
right: 160,
bottom: 35,
left: 30
};
var width = 500 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* Data in strings like it would be if imported from a csv */
var data = [{
fruit: "redDelicious",
2006: "10",
2007: "12",
2008: "05",
2009: "01",
2010: "02"
},
{
fruit: "mcintosh",
2006: "15",
2007: "18",
2008: "20",
2009: "15",
2010: "10"
},
{
fruit: "oranges",
2006: "9",
2007: "9",
2008: "8",
2009: "5",
2010: "4"
},
{
fruit: "pears",
2006: "6",
2007: "4",
2008: "2",
2009: "4",
2010: "2"
}
];
var legends = Object.keys(data[0]);
legends.splice(legends.indexOf('fruit'), 1);
// Transpose the data into layers
var dataset = d3.layout.stack()(legends.map(function(year) {
return data.map(function(d) {
return {
x: d.fruit,
y: +d[year]
};
});
}));
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) {
return d.x;
}))
.rangeRoundBands([10, width - 10], 0.02);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})])
.range([height, 0]);
var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574","#6aa8e0"];
// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat(function(d) {
return d
});
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
//.tickFormat(d3.time.format("%Y"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) {
return colors[i];
});
var rect = groups.selectAll("rect")
.data(function(d) {
return d;
})
.enter()
.append("rect")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y0 + d.y);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y0 + d.y);
})
.attr("width", x.rangeBand())
.on("mouseover", function() {
tooltip.style("display", null);
})
.on("mouseout", function() {
tooltip.style("display", "none");
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});
// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(30," + i * 19 + ")";
});
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return colors.slice().reverse()[i];
});
legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
return legends.reverse()[i];
});
// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
path.domain {
stroke: none;
}
.y .tick line {
stroke: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
window.onload = function(){
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
};var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;
var parseDate = d3.timeFormat("%c").parse;
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom()
.scale(x).ticks(5);
var yAxis = d3.axisLeft()
.scale(y).ticks(5);
var valueline = d3.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.close);
});
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Get the data
var data = [{
date: "1 ",
close: "58.13"
}, {
date: "2 ",
close: "53.98"
}, {
date: "3 ",
close: "67.00"
}, {
date: "4 ",
close: "89.70"
}, {
date: "5 ",
close: "99.00"
}, {
date: "6 ",
close: "20.00"
}];
var data2 = [{
date: "1 ",
close: "52.13"
}, {
date: "2 ",
close: "30.98"
}, {
date: "3 ",
close: "36.00"
}, {
date: "4 ",
close: "40.70"
}, {
date: "5 ",
close: "20.00"
}, {
date: "6 ",
close: "96.00"
}];
data.forEach(function (d) {
d.date = d.date;
d.close = +d.close;
});
// scaleLinear the range of the data
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain([0, d3.max(data, function (d) {
return d.close;
})]);
svg.append("path") // Add the valueline path.
.attr("d", valueline(data)).attr("stroke","red");
svg.append("path") // Add the valueline path.
.attr("d", valueline(data2)).attr("stroke","blue");
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);
}
I am new to this. I want to add color to the stroke I am using but I am unable to do it. I have added attribute for applying stroke color in the code but it is not working. I want each of the line to be of different color. Please help me with the feasible solution.
Your code seems to work fine. Here is the d3 way of implementation for the same.
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;
var parseDate = d3.timeFormat("%c").parse;
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom()
.scale(x).ticks(5);
var yAxis = d3.axisLeft()
.scale(y).ticks(5);
var valueline = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
var colors = d3.scaleOrdinal(d3.schemeCategory10);
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 + ")");
// Get the data
var data = [{
date: "1 ",
close: "58.13"
}, {
date: "2 ",
close: "53.98"
}, {
date: "3 ",
close: "67.00"
}, {
date: "4 ",
close: "89.70"
}, {
date: "5 ",
close: "99.00"
}, {
date: "6 ",
close: "20.00"
}];
var data2 = [{
date: "1 ",
close: "52.13"
}, {
date: "2 ",
close: "30.98"
}, {
date: "3 ",
close: "36.00"
}, {
date: "4 ",
close: "40.70"
}, {
date: "5 ",
close: "20.00"
}, {
date: "6 ",
close: "96.00"
}];
data.forEach(function(d) {
d.date = d.date;
d.close = +d.close;
});
// scaleLinear the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, d3.max(data, function(d) {
return d.close;
})]);
svg.selectAll("path.line").data([data, data2])
.enter().
append("path") // Add the valueline path.
.attr("class", "line")
.attr("d", valueline)
.attr("stroke", function(d, i) {
return colors(i);
});
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);
path {
fill: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>d
I am getting json data from backend. using the back-end data, I am trying to draw a line chart.
But the chart is very ugly, since the number values are not converting properlty. also i am not getting x axis values as date values here. how to convert the date number to properly here?
my try :
var datas = [
{"date":1404075600000,"ActualPercentage" : 63.4, "PlanPercentage" : 62.7},
{"date":1404680400000,"ActualPercentage" : 58.0, "PlanPercentage" : 59.9},
{"date":1405285200000,"ActualPercentage" : 53.3, "PlanPercentage" : 59.1},
{"date":1405890000000,"ActualPercentage" : 55.7, "PlanPercentage" : 58.8},
{"date":1406494800000,"ActualPercentage" : 64.2, "PlanPercentage" : 58.7},
{"date":1407099600000,"ActualPercentage" : 58.8, "PlanPercentage" : 57.0},
{"date":1407704400000,"ActualPercentage" : 57.9, "PlanPercentage" : 56.7},
{"date":1408309200000,"ActualPercentage" : 61.8, "PlanPercentage" : 56.8},
{"date":1408914000000,"ActualPercentage" : 69.3, "PlanPercentage" : 56.7},
{"date":1409518800000,"ActualPercentage" : 71.2, "PlanPercentage" : 60.1}
]
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - 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.ordinal()
.domain(["ActualPercentage", "PlanPercentage"])
.range(["#FF0000", "#009933"]);
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.temperature); });
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(d3.keys(datas[0]).filter(function(key) { return key !== "date"; }));
datas.forEach(function(d) {
d.date = parseDate( String(d.date).slice(0, 8 ) );
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: datas.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
x.domain(d3.extent(datas, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
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");
var path = city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
var totalLength = [path[0][0].getTotalLength()];
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
You can simply convert the timestamp string to date using Date function.
datas.forEach(function(d) {
d.date = new Date(d.date);
});
var datas = [{
"date": 1404075600000,
"ActualPercentage": 63.4,
"PlanPercentage": 62.7
}, {
"date": 1404680400000,
"ActualPercentage": 58.0,
"PlanPercentage": 59.9
}, {
"date": 1405285200000,
"ActualPercentage": 53.3,
"PlanPercentage": 59.1
}, {
"date": 1405890000000,
"ActualPercentage": 55.7,
"PlanPercentage": 58.8
}, {
"date": 1406494800000,
"ActualPercentage": 64.2,
"PlanPercentage": 58.7
}, {
"date": 1407099600000,
"ActualPercentage": 58.8,
"PlanPercentage": 57.0
}, {
"date": 1407704400000,
"ActualPercentage": 57.9,
"PlanPercentage": 56.7
}, {
"date": 1408309200000,
"ActualPercentage": 61.8,
"PlanPercentage": 56.8
}, {
"date": 1408914000000,
"ActualPercentage": 69.3,
"PlanPercentage": 56.7
}, {
"date": 1409518800000,
"ActualPercentage": 71.2,
"PlanPercentage": 60.1
}
]
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var color = d3.scale.ordinal()
.domain(["ActualPercentage", "PlanPercentage"])
.range(["#FF0000", "#009933"]);
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.temperature);
});
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(d3.keys(datas[0]).filter(function(key) {
return key !== "date";
}));
datas.forEach(function(d) {
d.date = new Date(d.date);
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: datas.map(function(d) {
return {
date: d.date,
temperature: +d[name]
};
})
};
});
x.domain(d3.extent(datas, function(d) {
return d.date;
}));
y.domain([
d3.min(cities, function(c) {
return d3.min(c.values, function(v) {
return v.temperature;
});
}),
d3.max(cities, function(c) {
return d3.max(c.values, function(v) {
return v.temperature;
});
})
]);
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");
var path = city.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return color(d.name);
});
var totalLength = [path[0][0].getTotalLength()];
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I referred to this stackoverflow link for some code but for some reason on my chart, the chart disappears when I try to zoom in.
I tried putting the code and the data in this Vida document but the visualization won't show up altogether, and I still can't figure out the issue there.
Thanks for the help!
svg {
font: 10px sans-serif;
}
path {
fill:none;
stroke:white;
stroke-width:2px;
}
.axis path, .axis line {
fill: none;
stroke: #CCC;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.path_H2O {
stroke:green;
}
.path_OH- {
stroke:red;
}
.path_Ca3SiO5 {
stroke:yellow;
}
var margin = {top: 10, right: 20, bottom: 100, left: 40},
margin2 = {top: 630, right: 20, bottom: 20, left: 40},
width = 1600 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom,
height2 = 700 - margin2.top - margin2.bottom;
var x = d3.scale.linear().range([0, width]),
x2 = d3.scale.linear().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", brush);
var area = function (Concent) {
return d3.svg.area()
.interpolate("step")
.x(function(d) { return x(d.Time); })
.y0(height)
.y1(function(d) { return y(d[Concent]); });
};
var area2 = function (Concent) {
return d3.svg.area()
.interpolate("step")
.x(function(d) { return x2(d.Time); })
.y0(height2)
.y1(function(d) { return y2(d[Concent]); });
};
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
var myfunc = function(Time, data){
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Time"; }));
data.forEach(function(d){
var y0 = 0; });
/* d.concent = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.concent[d.concent.length - 1].y1;});
dataset=data;*/
console.log(Time, data);
x.domain(d3.extent(data.map(function(d) { return d.Time; })));
y.domain([0, d3.max(data.map(function(d) { return d.H2O; }))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.selectAll('path')
.data(['H2O', 'OH-', 'Ca3SiO5'])
.enter()
.append('path')
.attr('clip-path', 'url(#clip)')
.attr('d', function (col) {
return area(col)(data);
})
.attr('class', function (col) {
return "path_" + col + " data";
});
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "y axis")
.call(yAxis);
context.selectAll('path')
.data(['H2O', 'OH-', 'Ca3SiO5'])
.enter()
.append('path')
.attr('d', function (col) {
return area2(col)(data);
})
.attr('class', function (col) {
return "path_" + col;
});
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.selectAll("path.data").attr("d", function (col) { return area(col)(data); });
focus.select(".x.axis").call(xAxis);
}
};
var data= d3.json([
{
"Time":0,
"H2O":0.7223999972,
"Ca3SiO5":0.2775999921,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":0,
"H3SiO4-":0,
"Ca++":0,
"CaOH+":0,
"OH-":0,
"Vacancy":"0"
},
{
"Time":0,
"H2O":0.7223999972,
"Ca3SiO5":0.2775999921,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":0,
"H3SiO4-":0,
"Ca++":0,
"CaOH+":0,
"OH-":0,
"Vacancy":"0"
},
{
"Time":0.1011666667,
"H2O":0.722445376,
"Ca3SiO5":0.2775546219,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.66E-006,
"H3SiO4-":0.0007145257,
"Ca++":0.0021455429,
"CaOH+":3.01E-006,
"OH-":0.0035762526,
"Vacancy":"0"
},
{
"Time":0.2025,
"H2O":0.7224635218,
"Ca3SiO5":0.277536476,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":5.77E-006,
"H3SiO4-":0.000996856,
"Ca++":0.0029978343,
"CaOH+":1.00E-005,
"OH-":0.0049973131,
"Vacancy":"0"
},
{
"Time":0.3038333333,
"H2O":0.7224757574,
"Ca3SiO5":0.2775242411,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.19E-005,
"H3SiO4-":0.001183896,
"Ca++":0.0035669817,
"CaOH+":2.03E-005,
"OH-":0.005946632,
"Vacancy":"0"
},
{
"Time":0.4051666667,
"H2O":0.722485082,
"Ca3SiO5":0.277514916,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.92E-005,
"H3SiO4-":0.0013237783,
"Ca++":0.0039957417,
"CaOH+":3.31E-005,
"OH-":0.0066624743,
"Vacancy":"0"
},
{
"Time":0.5065,
"H2O":0.7224926814,
"Ca3SiO5":0.2775073166,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":2.77E-005,
"H3SiO4-":0.0014351806,
"Ca++":0.0043407829,
"CaOH+":4.80E-005,
"OH-":0.0072388754,
"Vacancy":"0"
},
{
"Time":0.611,
"H2O":0.7224993205,
"Ca3SiO5":0.2775006773,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":3.68E-005,
"H3SiO4-":0.0015308949,
"Ca++":0.0046383714,
"CaOH+":6.48E-005,
"OH-":0.0077369817,
"Vacancy":"0"
},
{
"Time":0.7155,
"H2O":0.7225050948,
"Ca3SiO5":0.2774949035,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":4.60E-005,
"H3SiO4-":0.0016128709,
"Ca++":0.0048938526,
"CaOH+":8.27E-005,
"OH-":0.0081655806,
"Vacancy":"0"
},
{
"Time":0.82,
"H2O":0.7225102312,
"Ca3SiO5":0.2774897666,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":5.54E-005,
"H3SiO4-":0.0016845349,
"Ca++":0.0051181417,
"CaOH+":0.0001016937,
"OH-":0.0085426217,
"Vacancy":"0"
},
{
"Time":0.9245,
"H2O":0.722514876,
"Ca3SiO5":0.2774851215,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":6.52E-005,
"H3SiO4-":0.0017480743,
"Ca++":0.0053181429,
"CaOH+":0.0001216663,
"OH-":0.0088794869,
"Vacancy":"0"
};
],myfunc);
For the full dataset, please refer to the vida document I posted. Thanks!
I am posting my efforts here since it is easier to type all that is needed in a greater box, if nothing else. I created a FIDDLE to help us out. A few points:
I had to change the variable/myfunc strategy because it was not working. You will need to tell me if this actually worked. The lines are pretty flat but your data seems to show little variation in magnitude and perhaps some tweak in the scaling may help.
You were calling brush but your function is called brushed...that change was enough to activate the brush to do its job.
Well, let's see what you say. I hope this helps.
I have a d3 focus/context chart where I would like to be able to pan on the focus portion after brushing the context, and I would like the brushed section of the context area to move in sync with the panning of the focus area. However, when I click on the focus portion after I select a region in the context chart, the focus scale changes and the points no longer show up at the correct coordinates. The following code is available on jsfiddle as well:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
circle {
-webkit-transition: fill-opacity 250ms linear;
}
.selecting circle {
fill-opacity: .5;
}
.selecting circle.selected {
stroke: #f00;
}
.brush .extent {
stroke: #B8C6D0;
fill-opacity: .125;
shape-rendering: crispEdges;
}
#context .axis path.domain {
stroke: lightsteelblue;
stroke-width: 5px;
}
#context .tick {
stroke:black;
stroke-width: 1px;
}
#context .x .tick {
stroke:black;
stroke-width: 2px;
}
.axis path, .axis line {
fill: none;
stroke: #ddd;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.axis path {
stroke: #999;
stroke-width: 2px;
}
</style>
<script type="text/javascript">//<![CDATA[
var data = [{
Id: "1",
Year: 1950,
Relevance: 55,
Category: "Cat1",
SpecFreq: 5,
GenFreq: 10
}, {
Id: "2",
Year: 1975,
Relevance: 25,
Category: "Cat1",
SpecFreq: 2,
GenFreq: 31
}, {
Id: "3",
Year: 1990,
Relevance: 75,
Category: "Cat1",
SpecFreq: 8,
GenFreq: 23
}, {
Id: "4",
Year: 1970,
Relevance: 45,
Category: "Cat1",
SpecFreq: 17,
GenFreq: 60
}, {
Id: "5",
Year: 1985,
Relevance: 90,
Category: "Cat1",
SpecFreq: 17,
GenFreq: 25
}];
$(function () {
//dimensions
var margin = {
top: 5.5,
right: 19.5,
bottom: 39.5,
left: 39.5
};
//data domain extents
var extentX = d3.extent(data, function (d) {
return d.Year;
});
var extentY = d3.extent(data, function (d) {
return d.Relevance;
});
var focusAxisOptions = {
x: {
ticks: {
format: d3.format("d"),
size: -1* (500 - margin.top - margin.bottom),
ticks: 10
},
showLabel: true
},
y: {
ticks: {
format: d3.format(""),
size: -1 * (800 - margin.left - margin.right),
ticks: 10
},
showLabel: true
}
};
var contextAxisOptions = {
x: {
ticks: {
format: d3.format("d"),
size: -1 * (100 - margin.top - margin.bottom),
ticks: 10
},
showLabel: true
},
y: {
ticks: {
format: "",
size: 0,
ticks: 0
},
showLabel: false
}
};
var focus = DrawChart(data, margin, 800 - margin.left - margin.right, 500 - margin.top - margin.bottom, extentX, extentY, focusAxisOptions);
var context = DrawChart(data, margin, 800 - margin.left - margin.right, 100 - margin.top - margin.bottom, extentX, extentY, contextAxisOptions);
MakeContextBrushable(context, focus);
MakeFocusZoomable(focus);
});
function DrawChart(data, margin, width, height, extentX, extentY, axisOptions) {
//pad extents to provide some extra "blank" areas around edge of graph
var paddedExtentX = [extentX[0] - 5, extentX[1] +5];
var paddedExtentY = [extentY[0] - 5, extentY[1] +5];
//scales
var x = d3.scale.linear().domain(paddedExtentX).range([0, width]);
var y = d3.scale.linear().domain(paddedExtentY).range([height, 0]);
var radiusMax = .025 * width;
var radius = d3.scale.sqrt().domain([0, 100]).range([0, radiusMax]);
var color = d3.scale.ordinal().domain(["Cat1", "Cat2", "Cat3"]).range(["#b7b8a0", "#898a72", "#878772"]);
//axes
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(axisOptions.x.ticks.format).tickSize(axisOptions.x.ticks.size).ticks(axisOptions.x.ticks.ticks);
var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(axisOptions.y.ticks.format).tickSize(axisOptions.y.ticks.size).ticks(axisOptions.y.ticks.ticks);
//create and size svg element
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("float", "left")
.style("clear", "left");
var g = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); ;
// Add the x-axis.
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("font-size", "10px")
.attr("dy", "1.5em");
// Add the y-axis.
g.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")
.style("font-size", "10px")
.attr("dx", "-1em");
// Add the x-axis label.
if (axisOptions.x.showLabel) {
g.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width / 2)
.attr("y", height + 35)
.text(" Year");
}
// Add the y-axis label.
if (axisOptions.y.showLabel) {
g.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", -1 * height / 2)
.attr("y", -40)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Relevance");
}
//plot genFreq
var gGenerally = g.append("g").selectAll("circle")
.data(data)
.enter().append("circle")
.style("fill", function (d) {
return color(d.Category);
})
.attr("cx", function (d) {
return x(d.Year);
})
.attr("cy", function (d) {
return y(d.Relevance);
})
.attr("r", function (d) {
return radius(d.GenFreq);
})
.append("title")
.text(function (d) {
return "(" + d.Year + ", " + d.Relevance + ", " + d.GenFreq + ", " + d.SpecFreq + ")";
});
//plot specFreq
var gWithin = g.append("g").selectAll("circle")
.data(data)
.enter().append("circle")
.style("fill", function (d) {
return "#d6d487";
})
.attr("cx", function (d) {
return x(d.Year);
})
.attr("cy", function (d) {
return y(d.Relevance);
})
.attr("r", function (d) {
return radius(d.SpecFreq);
})
.append("title")
.text(function (d) {
return "(" + d.Year + ", " + d.Relevance + ", " + d.GenFreq + ", " + d.SpecFreq + ")";
});
var chart = {
svg: svg,
g: g,
x: x,
y: y,
xAxis: xAxis,
yAxis: yAxis
}
return chart;
}
function MakeContextBrushable(context, focus) {
var brush = d3.svg.brush().x(context.x).y(context.y)
.on("brushstart", brushstart)
.on("brush", brushmove)
.on("brushend", brushend);
context.g.append("g")
.attr("class", "brush")
.call(brush);
function brushstart() {
context.svg.classed("selecting", true);
}
function brushmove() {
var e = d3.event.target.extent();
var circle = context.svg.selectAll("circle");
circle.classed("selected", function (d) {
return e[0][0] <= d["DecisionYear"] && d["DecisionYear"] <= e[1][0]
&& e[0][1] <= d["Relevance"] && d["Relevance"] <= e[1][1];
});
}
function brushend() {
context.svg.classed("selecting", !d3.event.target.empty());
if (!d3.event.target.empty()) {
var e = d3.event.target.extent();
focus.x.domain([e[0][0], e[1][0]]);
focus.y.domain([e[0][1], e[1][1]]);
focus.g.select(".x.axis").call(focus.xAxis)
.selectAll("text")
.style("font-size", "10px")
.attr("dx", "-1em");
focus.g.select(".y.axis").call(focus.yAxis)
.selectAll("text")
.style("font-size", "10px")
.attr("dx", "-1em");
var circle = focus.svg.selectAll("circle").attr("cx", function (d) { return focus.x(d.Year); })
.attr("cy", function (d) { return focus.y(d.Relevance); })
console.log("BrushEnd Domain: [" + focus.x.domain()[0] + ", " + focus.x.domain()[1] + "]");
}
else {
focus.x.domain(context.x.domain());
focus.y.domain(context.y.domain());
focus.g.select(".x.axis").call(focus.xAxis)
.selectAll("text")
.style("font-size", "10px")
.attr("dx", "-1em");
focus.g.select(".y.axis").call(focus.yAxis)
.selectAll("text")
.style("font-size", "10px")
.attr("dx", "-1em");
var circle = focus.g.selectAll("circle").attr("cx", function (d) { return focus.x(d.Year); })
.attr("cy", function (d) { return focus.y(d.Relevance); })
}
}
}
function MakeFocusZoomable(focus) {
focus.svg.call(d3.behavior.zoom().x(focus.x).y(focus.y).on("zoom", Zoom));
function Zoom() {
focus.svg.select(".x.axis").call(focus.xAxis).selectAll("text")
.style("font-size", "10px")
.attr("dy", "1.5em");
focus.svg.select(".y.axis").call(focus.yAxis).selectAll("text")
.style("font-size", "10px")
.attr("dx", "-1em");
focus.svg.selectAll("circle").attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
}
</script>
</head>
<body>
<div id="chart">
</div>
</body>
</html>
To reset the brushing after panning, you would need to reset and call brush.extent again:
//Find extent of zoomed area, for example the edges of graphed region
var brushExtent = [x.invert(0), x.invert(width)];
context.select(".brush").call(brush.extent(brushExtent));
Here's an example of focus/context brushing panning synchronization on a line graph:
http://jsfiddle.net/MtXvx/8/
Hope that helps!