StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POfocus+context graph in d3
text
Body
copied!<p>I am using focus + context graph to display historical data. But it is highly inaccurate. I have data every 10 mins for last week. I want the viz to be blank for when data is unavailable. As you can see in the screen shot attached, I have no data between Thu 25 to Fri 26 12pm. But still it shows as if there was data. Can I have color only where data is present?</p> <p>Is this possible with focus + context, or should I pursue another form of visualization?</p> <p><img src="https://i.stack.imgur.com/yKP3a.png" alt="enter image description here"></p> <p>Here is my code:</p> <pre><code>function drawChart(user_name) { var margin = {top: 10, right: 10, bottom: 100, left: 40}, margin2 = {top: 430, right: 10, bottom: 20, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, height2 = 500 - margin2.top - margin2.bottom; var parseDate = d3.time.format("%a %e %H %M").parse; var x = d3.time.scale().range([0, width]), x2 = d3.time.scale().range([0, width]), y = d3.scale.linear().range([height, 0]), y2 = d3.scale.linear().range([height2, 0]); 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", brushed); var area = d3.svg.area() .interpolate("monotone") .x(function(d) { return x(d.receiveddate); }) .y0(height) .y1(function(d) { return y(d.gtse); }); var area2 = d3.svg.area() .interpolate("monotone") .x(function(d) { return x2(d.receiveddate); }) .y0(height2) .y1(function(d) { return y2(d.gtse); }); 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 + ")"); d3.json("rest.php/lastweek"+"/"+user_name, function(error, data) { var allData = data.records; var gtsef = []; allData.forEach(function(d) { var formattedDate = new Date(+d.receiveddate).toString(); d.receiveddate = parseDate(d3.time.format("%a %e %H %M")(new Date(formattedDate))); d.gtse = +d.gtse; gtsef.push(d.gtse); }); x.domain(d3.extent(allData.map(function(d) { return d.receiveddate; }))); y.domain([0, d3.max(allData.map(function(d) { return d.gtse; }))]); x2.domain(x.domain()); y2.domain(y.domain()); focus.append("path") .datum(data.records) .attr("clip-path", "url(#clip)") .attr("d", area); focus.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); focus.append("g") .attr("class", "y axis") .call(yAxis); context.append("path") .datum(data.records) .attr("d", area2); 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.select("path").attr("d", area); focus.select(".x.axis").call(xAxis); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload