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.
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>
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
I am using D3 to create two level grouped category bar chart with brush functionality on x axis.But X axis line not displayed in FireFox even though i didn't add any css related to hide x axis.
X axis line appeared in Chrome and IE.
NOTE:here also if we click on Full Page x axis line display.else it doesn't display.
// Code goes here
var barsData = [
{
"value":100,
"key":"03-08-2016,0",
"secondKey":"Windows 7/Chrome49"
},
{
"value":40,
"key":"04-08-2016,1",
"secondKey":"Windows 7/Chrome49"
},
{
"value":20,
"key":"05-08-2016,2",
"secondKey":"Windows 7/Chrome49"
},
{
"value":100,
"key":"03-08-2016,3",
"secondKey":"Windows 7/Chrome50"
},
{
"value":27,
"key":"04-08-2016,4",
"secondKey":"Windows 7/Chrome50"
},
{
"value":57,
"key":"05-08-2016,5",
"secondKey":"Windows 7/Chrome50"
},
{
"value":40,
"key":"04-08-2016,6",
"secondKey":"Windows 7/Firefox44"
},
{
"value":60,
"key":"05-08-2016,7",
"secondKey":"Windows 7/Firefox44"
},
{
"value":50,
"key":"04-08-2016,8",
"secondKey":"Windows 7/Chrome47"
},
{
"value":40,
"key":"05-08-2016,9",
"secondKey":"Windows 7/Chrome47"
},
{
"value":80,
"key":"04-08-2016,10",
"secondKey":"Windows 7/Firefox45"
},
{
"value":60,
"key":"05-08-2016,11",
"secondKey":"Windows 7/Firefox45"
},
{
"value":0,
"key":"04-08-2016,12",
"secondKey":"Windows 7/IE10"
},
{
"value":40,
"key":"05-08-2016,13",
"secondKey":"Windows 7/IE10"
},
{
"value":50,
"key":"04-08-2016,14",
"secondKey":"Windows 7/Firefox42"
}
];
var osLevelData = [
{
"key":"Windows 7/Chrome49",
"values":[
{
"value":100,
"key":"03-08-2016,0",
"secondKey":"Windows 7/Chrome49"
},
{
"value":40,
"key":"04-08-2016,1",
"secondKey":"Windows 7/Chrome49"
},
{
"value":20,
"key":"05-08-2016,2",
"secondKey":"Windows 7/Chrome49"
}
],
"centerBarPosVal":"03-08-2016,0",
"lastBarPosVal":"05-08-2016,2"
},
{
"key":"Windows 7/Chrome50",
"values":[
{
"value":100,
"key":"03-08-2016,3",
"secondKey":"Windows 7/Chrome50"
},
{
"value":27,
"key":"04-08-2016,4",
"secondKey":"Windows 7/Chrome50"
},
{
"value":57,
"key":"05-08-2016,5",
"secondKey":"Windows 7/Chrome50"
}
],
"centerBarPosVal":"03-08-2016,3",
"lastBarPosVal":"05-08-2016,5"
},
{
"key":"Windows 7/Firefox44",
"values":[
{
"value":40,
"key":"04-08-2016,6",
"secondKey":"Windows 7/Firefox44"
},
{
"value":60,
"key":"05-08-2016,7",
"secondKey":"Windows 7/Firefox44"
}
],
"centerBarPosVal":"04-08-2016,6",
"lastBarPosVal":"05-08-2016,7"
},
{
"key":"Windows 7/Chrome47",
"values":[
{
"value":50,
"key":"04-08-2016,8",
"secondKey":"Windows 7/Chrome47"
},
{
"value":40,
"key":"05-08-2016,9",
"secondKey":"Windows 7/Chrome47"
}
],
"centerBarPosVal":"04-08-2016,8",
"lastBarPosVal":"05-08-2016,9"
},
{
"key":"Windows 7/Firefox45",
"values":[
{
"value":80,
"key":"04-08-2016,10",
"secondKey":"Windows 7/Firefox45"
},
{
"value":60,
"key":"05-08-2016,11",
"secondKey":"Windows 7/Firefox45"
}
],
"centerBarPosVal":"04-08-2016,10",
"lastBarPosVal":"05-08-2016,11"
},
{
"key":"Windows 7/IE10",
"values":[
{
"value":0,
"key":"04-08-2016,12",
"secondKey":"Windows 7/IE10"
},
{
"value":40,
"key":"05-08-2016,13",
"secondKey":"Windows 7/IE10"
}
],
"centerBarPosVal":"04-08-2016,12",
"lastBarPosVal":"05-08-2016,13"
},
{
"key":"Windows 7/Firefox42",
"values":[
{
"value":50,
"key":"04-08-2016,14",
"secondKey":"Windows 7/Firefox42"
}
],
"centerBarPosVal":"04-08-2016,14",
"lastBarPosVal":"04-08-2016,14"
}
];
var barColor = "#4A7B9D";
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 860 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var min_margin = {
top: height,
right: margin.right + 10,
bottom: margin.bottom,
left: margin.left + 10
},
min_height = 10,
min_width = 860 - min_margin.left - min_margin.right;
//first scale
var x = d3.scale.ordinal().rangeRoundBands([0, width], .2);
//second scale
var groupx = d3.scale.ordinal().rangeRoundBands([0, width], .2);
//scroll scale
var min_x = d3.scale.ordinal().rangeRoundBands([0, width], .2);
//y scale
var y = d3.scale.linear().range([height, 0]);
//Add domain for X scale
x.domain(barsData.map(function(d) {
return d.key;
}));
//Add domain for X scale
groupx.domain(osLevelData.map(function(d) {
return d.key;
}));
//scroll domain
min_x.domain(barsData.map(function(d) {
return d.key;
}));
//domain Y
y.domain([0, d3.max(barsData, function(d) {
return d.value;
})]);
//x axis
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(function(d){
return d.split(",")[0];
})
.orient("bottom");
//group axis
var groupAxis = d3.svg.axis()
.scale(groupx)
.tickFormat(function(d){
return d;
})
.orient("bottom");
//scroll axis
var min_xAxis = d3.svg.axis()
.scale(min_x)
.tickFormat(function(d){
return d;
})
.orient("bottom");
var main_xZoom = d3.scale.linear()
.range([0, width])
.domain([0, width]);
// y axis
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat(function(d){
return d;
})
.orient("left")
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", 800 + margin.top + margin.bottom);
//main g
var main = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
main.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height + min_height + margin.bottom);
// Add the x axis DOM elements
var xDOM = main.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height + min_height) + ")")
.attr("clip-path", "url(#clip)")
.call(xAxis)
//.selectAll(".tick text")
//.call(wrap, x.rangeBand());
xDOM.selectAll(".tick").append("line")
.attr("class","groupline")
.attr("y2",30)
.attr("transform", function(d,index) {
/*var position;
osLevelData.forEach(function(ddd){
if(ddd.key === d){
position = ddd.lastBarPosVal;
}
})*/
return "translate(" + (x.rangeBand()/2) + ",0)";
//console.log("d ..",d);
});
// Add the group axis DOM elements
var groupDOM = main.append("g")
.attr("class", "x1 axis")
.attr("transform", "translate(0," + (height + min_height + 30) + ")")
.attr("clip-path", "url(#clip)")
.call(groupAxis)
.selectAll(".tick")
.attr("transform", function(d) {
var centerPos;
osLevelData.forEach(function(ddd){
if(ddd.key === d){
centerPos = ddd.centerBarPosVal;
}
})
return "translate(" + (x(centerPos)+(x.rangeBand()/2)) + ",0)";
});
//.selectAll(".tick text")
//.call(wrap, groupx.rangeBand());
groupDOM.append("line")
.attr("class","groupline")
.attr("y2",30)
.attr("transform", function(d) {
var lastPos;
var centerPos;
osLevelData.forEach(function(ddd){
if(ddd.key === d){
lastPos = ddd.lastBarPosVal;
centerPos = ddd.centerBarPosVal;
}
})
return "translate(" + ((x(lastPos)+x.rangeBand()) - (x(centerPos)+(x.rangeBand()/2))) + ",0)";
});
//scroll DOM element
var mini_x_append = main.append("g")
.attr("transform", "translate(0," + (margin.top + height + 60) + ")")
.attr("width", min_width);
main.append("g")
.attr("class", "y axis")
.call(yAxis);
//create group with all bars
main.append("g")
.attr("clip-path", "url(#clip)")
.selectAll(".rect")
.data(barsData)
.enter().append("rect")
.attr("class", "rect")
.attr("x", function(d) {
return x(d.key);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return height - y(d.value);
})
.attr("fill",barColor);
//To display bar value on bars
main.selectAll("text.bar")
.data(barsData)
.enter().append("text")
.attr("class", "bar")
.attr("text-anchor", "middle")
.attr("x", function(d) { return x(d.key) + x.rangeBand()/2; })
.attr("y", function(d) { return y(d.value) - 5; })
.text(function(d) { return d.value+"%"; });
var xBrush = d3.svg.brush().x(min_x).on("brush", xBrushed);
//d3.svg.brush().x(groupx).on("brush", xBrushed);
var x_arc = d3.svg.arc()
.outerRadius(min_height / 2)
.startAngle(0)
.endAngle(function(d, i) {
return i ? -Math.PI : Math.PI;
});
var brush_x_grab = mini_x_append.append("g")
.attr("class", "x brush")
.call(xBrush);
brush_x_grab.selectAll(".resize").append("path")
.attr("transform", "translate(0," + min_height / 2 + ")")
.attr("d", x_arc)
.attr("fill","#FF0000");
brush_x_grab.selectAll("rect").attr("height", min_height).style("visibility","visible").attr("fill","#D3D3D3");
// Called to re-draw the bars on the main chart when the brush on the x axis
// has been altered.
function xBrushed() {
var originalRange = main_xZoom.range();
main_xZoom.domain(xBrush.empty() ? originalRange : xBrush.extent());
x.rangeRoundBands([main_xZoom(originalRange[0]), main_xZoom(originalRange[1])], .2);
groupx.rangeRoundBands([main_xZoom(originalRange[0]), main_xZoom(originalRange[1])], .2);
main.selectAll(".rect")
.data(barsData)
.attr("width", function(d) {
return x.rangeBand();
})
.attr("x", function(d) {
return x(d.key);
});
main.selectAll(".bar")
.data(barsData)
.attr("x", function(d) { return x(d.key) + x.rangeBand()/2; })
.attr("y", function(d) { return y(d.value) - 5; })
.text(function(d) { return d.value+"%"; });
main.select("g.x.axis").call(xAxis).selectAll(".tick .groupline")
.attr("transform", function(d,index) {
return "translate(" + (x.rangeBand()/2) + ",0)";
});
main.select("g.x1.axis").call(groupAxis).selectAll(".tick")
.attr("transform", function(d) {
var centerPos;
osLevelData.forEach(function(ddd){
if(ddd.key === d){
centerPos = ddd.centerBarPosVal;
}
})
return "translate(" + (x(centerPos)+(x.rangeBand()/2)) + ",0)";
})
.selectAll(".tick .groupline")
.attr("transform", function(d) {
var centerPos;
var lastPos;
osLevelData.forEach(function(ddd){
if(ddd.key === d){
lastPos = ddd.lastBarPosVal;
centerPos = ddd.centerBarPosVal;
}
})
return "translate(" + ((x(lastPos)+x.rangeBand()) - (x(centerPos)+(x.rangeBand()/2))) + ",0)";
})
//main.selectAll(
};
// This comes from the example at http://bl.ocks.org/mbostock/7555321
// for wrapping long axis tick labels
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
};
// Set the initial brush selections.
// svg.select(".x.brush").call(xBrush.extent(main_xZoom.domain()));
svg.select(".x.brush").call(xBrush.extent([0, 220]));
//svg.select(".y.brush").call(yBrush.extent(mini_y0.domain()));
// Forces a refresh of the brushes and main chart based
// on the selected extents.
xBrushed();
//yBrushed();
function type(d) {
d.frequency = +d.frequency;
return d;
}
/* Styles go here */
g.axis path,
g.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
g.brush rect.extent {
fill-opacity: 0.5;
fill:#FF0000;
}
.resize path {
fill-opacity: 0.2;
}
.bar {
fill: steelblue;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</body>
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 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!