StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I have updated the fiddle at: <a href="http://jsfiddle.net/PyvZ7/7/" rel="noreferrer">http://jsfiddle.net/PyvZ7/7/</a></p> <p>Don't forget to apply <code>clip-path</code> to the group. Your code used <code>select</code> instead of <code>selectAll</code>. So the transforms were not applying to all the circles within the group. Also <code>selectAll</code> is a css3 selector. You need to make sure you do <code>selectAll('.dot')</code> instead of <code>selectAll('dot')</code> as the latter would mean a tag and the former would mean elements having a class <code>dot</code>.</p> <p>Here is the modified code:</p> <pre><code>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 data = [{ 'Wed Jan 23 00:00:00 IST 2013': 3383387 }, { 'Thu Jan 24 00:00:00 IST 2013': 3883387 }, { 'Fri Jan 25 00:00:00 IST 2013': 4383387 }, { 'Sat Jan 26 00:00:00 IST 2013': 2383387 }, { 'Sun Jan 27 00:00:00 IST 2013': 5383387 }, { 'Mon Jan 28 00:00:00 IST 2013': 2283387 }]; var format = d3.time.format("%a %b %d %H:%M:%S IST %Y"); var parseDate = d3.time.format("%b %Y").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", brush); var area = d3.svg.area() .interpolate("monotone") .x(function(d) { return x(format.parse(d3.keys(d)[0])); }) .y0(height) .y1(function(d) { return y(d3.values(d)[0]); }); var area2 = d3.svg.area() .interpolate("monotone") .x(function(d) { return x2(format.parse(d3.keys(d)[0])); }) .y0(height2) .y1(function(d) { return y2(d3.values(d)[0]); }); 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 + ")"); x.domain(d3.extent(data.map(function(d) { return format.parse(d3.keys(d)[0]); }))); y.domain([0, d3.max(data.map(function(d) { return d3.values(d)[0]; }))]); x2.domain(x.domain()); y2.domain(y.domain()); focus.append("path") .datum(data) .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) .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); var circlegroup = focus.append("g"); circlegroup.attr("clip-path", "url(#clip)"); circlegroup.selectAll('.dot') .data(data) .enter().append("circle") .attr('class', 'dot') .attr("cx",function(d){ return x(format.parse(d3.keys(d)[0]));}) .attr("cy", function(d){ return y(d3.values(d)[0]);}) .attr("r", function(d){ return 4;}) .on('mouseover', function(d){ d3.select(this).attr('r', 8)}) .on('mouseout', function(d){ d3.select(this).attr('r', 4)}); function brush() { x.domain(brush.empty() ? x2.domain() : brush.extent()); focus.select("path").attr("d", area); focus.select(".x.axis").call(xAxis); circlegroup.selectAll(".dot").attr("cx",function(d){ return x(format.parse(d3.keys(d)[0]));}).attr("cy", function(d){ return y(d3.values(d)[0]);}); } </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