We Keep Coding

D3 chart can't update -- enter and exit property of selection both empty

I'm trying to make a scatter plot using a .json file. It will let the user to select which group of data in the json file to be displayed. So I'm trying to use the update pattern.
The following code will make the first drawing, but every time selectGroup() is called(the code is in the html file), nothing got updated. The console.log(selection) did come back with a new array each time, but the enter and exit property of that selection is always empty.
Can anyone help me take a look? Thanks a lot!
var margin = {
top: 30,
right: 40,
bottom: 30,
left: 40
}
var width = 640 - margin.right - margin.left,
height = 360 - margin.top - margin.bottom;
var dataGroup;
var groupNumDefault = "I";
var maxX, maxY;
var svg, xAxis, xScale, yAxis, yScale;
//select and read data by group
function init() {
d3.json("data.json", function (d) {
maxX = d3.max(d, function (d) {
return d.x;
});
maxY = d3.max(d, function (d) {
return d.y;
});
console.log(maxY);
svg = d3.select("svg")
.attr("id", "scatter_plot")
.attr("width", 960)
.attr("height", 500)
.append("g")
.attr("id", "drawing_area")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//x-axis
xScale = d3.scale.linear().range([0, width]).domain([0, maxX]);
xAxis = d3.svg.axis()
.scale(xScale).orient("bottom").ticks(6);
//y-axis
yScale = d3.scale.linear().range([0, height]).domain([maxY, 0]);
yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(6);
svg.append("g")
.attr("class", "x_axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y_axis")
.call(yAxis);
});
selectGroup(groupNumDefault);
}
//update data
function selectGroup(groupNum) {
d3.json("/data.json", function (d) {
dataGroup = d.filter(function (el) {
return el.group == groupNum;
});
console.log(dataGroup);
drawChart(dataGroup);
});
}
//drawing function
function drawChart(data) {
var selection = d3.select("svg").selectAll("circle")
.data(data);
console.log(selection);
selection.enter()
.append("circle")
.attr("class", "dots")
.attr("cx", function (d) {
console.log("updating!");
return xScale(d.x);
})
.attr("cy", function (d) {
return yScale(d.y);
})
.attr("r", function (d) {
return 10;
})
.attr("fill", "red");
selection.exit().remove();
}
init();

The problem here is on two fronts:
Firstly, your lack of a key function in your data() call means data is matched by index (position in data array) by default, which will mean no enter and exit selections if the old and current datasets sent to data() are of the same size. Instead, most (perhaps all) of the data will be put in the update selection when d3 matches by index (first datum in old dataset = first datum in new dataset, second datum in old dataset = second datum in new dataset etc etc)
var selection = d3.select("svg").selectAll("circle")
.data(data);
See: https://bl.ocks.org/mbostock/3808221
Basically, you need your data call adjusted to something like this (if your data has an .id property or anything else that can uniquely identify each datum)
var selection = d3.select("svg").selectAll("circle")
.data(data, function(d) { return d.id; });
This will generate enter() and exit() (and update) selections based on the data's actual contents rather than just their index.
Secondly, not everything the second time round is guaranteed be in the enter or exit selections. Some data may be just an update of existing data and not in either of those selections (in your case it may be intended to be completely new each time). However, given the situation just described above it's pretty much guaranteed most of your data will be in the update selection, some of it by mistake. To show updates you will need to alter the code like this (I'm assuming d3 v3 here, apparently it's slightly different for v4)
selection.enter()
.append("circle")
.attr("class", "dots")
.attr("r", function (d) {
return 10;
})
.attr("fill", "red");
// this new bit is the update selection (which includes the just added enter selection
// now, the syntax is different in v4)
selection // v3 version
// .merge(selection) // v4 version (remove semi-colon off preceding enter statement)
.attr("cx", function (d) {
console.log("updating!");
return xScale(d.x);
})
.attr("cy", function (d) {
return yScale(d.y);
})
selection.exit().remove();
Those two changes should see your visualisation working, unless of course the problem is something as simple as an empty set of data the second time around which would also explain things :-)

How to group and filter using crossfilter in d3.js

js users,
I just started using d3.js & crossfilter and was attempting to make use of Adam Pearce's example on meteor map to visualise weather data. Instead of having only one record for each name in the "name" column, I have multiple-year records as I'm keen to analyse the weather changes over the years. Below is a sample of the original data and my own data:
orginal data
name mass_g year cartodb_id ....
Vilna 1 1967 34039
Silistra 1 1917 34017
My data
name rainfall year cartodb_id ....
station_A 100 1997 34039
station_A 200 1998 34039
station_B 300 1997 34017
station_B 400 1998 34017
I'm not sure where went wrong as it did not produce any error(s). However,
the crossfilter did not seem to take effect on the map
it did not group the rainfall values by the stations on the map (I think they are overlapping each other)
I couldn't group the two bar charts such that I could show the time series of rainfall over the years, as well as the rainfall distribution (I think need to use some Reduce function but I can't figure it out)
Below is my js script to replace the original drawMap.js (sorry, it's a little too long; Thank you for any kind advice!):
var width = 1000,
height = 500;
var proj = d3.geo.mercator()
.center([103.8,1.33])
.scale(100000)
.rotate([0,0]);
var path = d3.geo.path()
.projection(proj);
// for map
var zoom = d3.behavior.zoom()
.translate(proj.translate())
.scale(proj.scale())
.scaleExtent([100000,Infinity]) //.scaleExtent([height*.33, 4 * height])
.on("zoom", zoom);
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);
function zoom() {
proj.translate(d3.event.translate).scale(d3.event.scale);
svg.selectAll("path").attr("d", path);
circles
.attr("cx", function(d){return proj([d.long, d.lat])[0];})
.attr("cy", function(d){return proj([d.long, d.lat])[1];});
}
var borders = svg.append("g");
var impacts = svg.append("g");
// colours and scales for the corresponding values in map
var metorScale = d3.scale.pow().exponent(.5).domain([0, 100, 1000, 2000, 3000, 5000, 8000]);
var colorScale = d3.scale.linear().domain([1980, 1888, 1996, 2004, 2014]);
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6)
.style("background", "rgba(250,250,250,.7)");
tooltip.append("img")
.attr("id", "tooltipImg")
.attr("height", 200)
.attr("width", 200)
.style("opacity", "1");
// change the fell file to our rainfall
// file has to be at aggregated level for each year
// one station one value for one year
// change the json file to our map
queue()
.defer(d3.json, "Planning_Area_Census2010_WGS84.json")
.defer(d3.csv, "yearlyrainfall.csv")
/*.defer(d3.json, "pics.json")*/
.await(ready);
var metors;
// for the rest of the code
// removed pics in the inputs
function ready(error, topology, csv){
borders.selectAll("path")
.data(topojson.object(topology, topology.objects.Planning_Area_Census2010_WGS84)
.geometries)
.enter()
.append("path")
.attr("d", path)
.attr("class", "border")
rawMetors = csv;
// change mass_g to rainfall
// cartodb_id is a key for our station
metors = [];
rawMetors.forEach(function(d){
d.rainfall = +d.rainfall;
d.year = +d.year;
d.id = +d.cartodb_id;
d.name = d.name;
d.region = d.region;
metors.push(d);
});
metors.sort(function(a, b){return a.id - b.id;})
// size tag to rainfall
//colour tag to year
metorScale
.range([1.5, 2, 3, 4, 5, 8, 10]);
colorScale
.range(["#FFFF66", "#FFFF00", "#E68000", "#D94000", "#CC0000"]);
circles = impacts.selectAll("circle")
.data(metors).enter()
.append("svg:a")
.attr("xlink:href", function(d) { return d.database; })
.attr("xlink:show", "new")
.append("circle")
.attr("cx", function(d){return proj([d.long, d.lat])[0];})
.attr("cy", function(d){return proj([d.long, d.lat])[1];})
.attr("r", function(d){return metorScale(d.rainfall);})
.attr("id", function(d){return "id" + d.id;})
.style("fill", function(d){return colorScale(d.year); })
.on("mouseover", function(d){
d3.select(this)
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill-opacity", 1);
tooltip
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 5) + "px")
.transition().duration(300)
.style("opacity", 1)
.style("display", "block")
updateDetails(d);
})
.on("mouseout", function(d){
d3.select(this)
.attr("stroke", "")
.attr("fill-opacity", function(d){return 1;})
tooltip.transition().duration(700).style("opacity", 0);
});
metorsCF = crossfilter(metors),
all = metorsCF.groupAll(),
year = metorsCF.dimension(function(d){return d.year;}), /*creating a type dimension*/
years = year.group(function(d){return Math.floor(d);}),
rainfall = metorsCF.dimension(function(d){return d.rainfall }), /*creating a type dimension*/
rainfalls = rainfall.group(function(d){return Math.floor(d/10)*10;}),
// for grouping at var charts
// group by type, change to region
region = metorsCF.dimension(function(d){return d.region;}), /*creating a type dimension*/
regions = region.group();
// create group of ids
cartoDbId = metorsCF.dimension(function(d){return d.id;}); /*creating a type dimension*/
cartoDbIds = cartoDbId.group()
// create all the bar charts
// first one draw by group of years
// change the domain relate to the format tick in barchart.js
var charts = [
barChart()
.dimension(year)
.group(years)
.x(d3.scale.linear()
.domain([1970,2020])
.rangeRound([-1, 20*24-5])),
// change the domain relate to the format tickvalues in barchart.js
barChart()
.dimension(rainfall)
.group(rainfalls)
.x(d3.scale.linear()
.domain([1,10000])
.rangeRound([0,20*24]))
];
var chart = d3.selectAll(".chart")
.data(charts)
.each(function(chart){chart.on("brush", renderAll).on("brushend", renderAll)});
d3.selectAll("#total")
.text(metorsCF.size());
function render(method){
d3.select(this).call(method);
}
lastFilterArray = [];
metors.forEach(function(d, i){
lastFilterArray[i] = 1;
});
function renderAll(){
chart.each(render);
var filterArray = cartoDbIds.all();
filterArray.forEach(function(d, i){
if (d.value != lastFilterArray[i]){
lastFilterArray[i] = d.value;
d3.select("#id" + d.key).transition().duration(500)
.attr("r", d.value == 1 ? 2*metorScale(metors[i].rainfall) : 0)
.transition().delay(550).duration(500)
.attr("r", d.value == 1 ? metorScale(metors[i].rainfall) : 0);
}
})
d3.select("#active").text(all.value());
}
window.reset = function(i){
charts[i].filter(null);
renderAll();
}
renderAll();
}
// to show the labels on what to display on map
var printDetails = [
{'var': 'name', 'print': 'Station'},
{'var': 'region', 'print': 'Region'},
{'var': 'rainfall', 'print': 'Rainfall(mm)'},
{'var': 'year', 'print': 'Year'}];
function updateDetails(metorsCF){
// var image = new Image();
// image.onload = function(){
// document.getElementById("tooltipImg").src = 'pictures/' + metor.cartodb_id + '.jpg';}
// image.src = 'pictures/' + metor.cartodb_id + '.jpg';
tooltip.selectAll("div").remove();
tooltip.selectAll("div").data(printDetails).enter()
.append("div")
.append('span')
.text(function(d){return d.print + ": ";})
.attr("class", "boldDetail")
.insert('span')
.text(function(d){return metorsCF[d.var];})
.attr("class", "normalDetail");
}
[1]: http://roadtolarissa.com/meteors/

Zooming datasets in d3.js

I have overlayed two datasets, a boundary map and a point map in d3.js. I want to be able to zoom both datasets at the same time. With the current code, only the point map responds to the zoom. How can I zoom both datasets at the same time
The code is shown below
var canvas = d3.select("body").append("svg")
.attr("width",260)
.attr("height",400)
d3.json("/Maps/iowastate.json",function (data){
var group = canvas.selectAll("g")
.data(data.features)
.enter()
.append("g")
var projection =d3.geo.mercator()
.scale(250)
//.translate([0,0]);
var path = d3.geo.path().projection(projection);
var areas = group.append("path")
.attr("d", path)
.attr("class","area")
.attr("fill","black");
d3.csv("/Maps/detectors.csv",function (d){
var group = canvas.selectAll("g")
.data(d)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.StartLong,d.StartLat])[0];
})
.attr("cy", function(d,i) {
return projection([d.StartLong,d.StartLat])[1];
})
.attr("r", 0.1)
.style("fill", "red");
//console.log(projection(d[0].StartLat))
var zoom = d3.behavior.zoom()
.on("zoom",function(){
group.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
group.selectAll("path")
.attr("d", path.projection(projection));
});
canvas.call(zoom)
})
var zoom = d3.behavior.zoom()
.on("zoom",function(){
group.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
group.selectAll("path")
.attr("d", path.projection(projection));
});
canvas.call(zoom)
})

You are applying the right modifications, but twice to the same set of elements instead of the two different layers. To make it work, keep a reference to the other group (e.g. by using different variable names) and apply the transformations to both groups.

Add images to d3 chord diagram

I would like images as the endpoints. I have tried adding but no luck. Any ideas/working examples?
http://bost.ocks.org/mike/uberdata/

Each neighborhood in that example is given a <g> element with a class of group.
// Add a group per neighborhood.
var group = svg.selectAll(".group")
.data(layout.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover", mouseover);
This is the element to which the text label and the endpoint path are appended.
// Add the group arc.
var groupPath = group.append("path")
.attr("id", function(d, i) { return "group" + i; })
.attr("d", arc)
.style("fill", function(d, i) { return cities[i].color; });
// Add a text label.
var groupText = group.append("text")
.attr("x", 6)
.attr("dy", 15);
You could append each image to this group also, using an svg <image> element. If, for example, your dataset contains the urls for your images, you might do the following:
var groupImage = group.append("image")
.attr("xlink:href", function(d) {return d.image_url;})

plots on multiple instances of graph

I'm using the d3 library to plot a bar graph with JSON objects recieved from the server through websockets. What is happening though is that each time the graph is plotted it draws a new instance of a graph. So I end up with multiple graphs.
But I want the JSON data to be all plotted onto the same one graph.
Here's my code:
ws = new WebSocket("ws://localhost:8888/dh");
var useData = []
//var chart;
var chart = d3.select("body")
.append("svg:svg")
.attr("class", "chart")
.attr("width", 420)
.attr("height", 200);
ws.onmessage = function(evt)
{
var distances = JSON.parse(evt.data);
data = distances.miles;
console.log(data);
if(useData.length <= 10){
useData.push(data)
}
else
{
var draw = function(data){
// Set the width relative to max data value
var x = d3.scale.linear()
.domain([0, d3.max(useData)])
.range([0, 420]);
var y = d3.scale.ordinal()
.domain(useData)
.rangeBands([0, 120]);
var rect = chart.selectAll("rect")
.data(useData)
// enter rect
rect.enter().append("svg:rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());
// update rect
rect
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());
var text = chart.selectAll("text")
.data(useData)
// enter text
text.enter().append("svg:text")
.attr("x", x)
.attr("y", function (d) { return y(d) + y.rangeBand() / 2; })
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(String);
// update text
text
.data(useData)
.attr("x", x)
.text(String);
}
useData.length = 0;
}
}
How can I plot all points onto on graph which is being constantly updated?
It's a shame that d3 cannot handle data in real-time and update charts accordingly, or if it can that there's no clear tutorial/ explanation of how to.
Thanks

My guess is because you're creating a chart every time with:
var chart = d3.select("body")
.append("svg:svg")
.attr("class", "chart")
.attr("width", 420)
.attr("height", 20 * useData.length);
Rather you need to check if chart exists, and if so, don't call that line.
// outside of .onmessage
var chart;
// inside of .onmessage
if (!chart) {
chart = d3.select("body")
.append("svg:svg")
.attr("class", "chart")
.attr("width", 420)
.attr("height", 20 * useData.length);
}

Like Brian said you keep creating a new svg element at every onmessage event. However, in D3 you don't need to use an if statement to check for element existence; after you do a data join, the enter() selection will only contain the elements that did not exist yet:
// data join
var chart = d3.select("body").selectAll(".chart")
.data([useData]); // if you wanted multiple charts: .data([useData1, useDate2, useData3])
// enter
chart.enter().append("svg") // this will only execute if the .chart did not exist yet
.attr("class", "chart")
.attr("width", 420);
// update (both new and existing charts)
chart
.attr("height", function(d) { return 20 * d.length; });
The concepts of the data join, enter(), update(), and exit() selections are explained in the Thing with Joins article. See also the 3 General Update Pattern articles.
You have to use a similar approach when you update or add new rect elements in your chart. Assuming for the moment that useData contains all accumulated data (although the useData.length = 0 might mean that is not the case):
// data join
var rects = chart.selectAll("rect")
.data(function(d) { return d; }); // use the data bound to each chart
// enter
rects.enter().append("rect");
// update
rects
.attr("y", function(d) { return y(d.yValue); }) // not sure what your data structure looks like
.attr("width", function(d) { return x(d.xValue); })
.attr("height", y.rangeBand());
// exit
rects.exit().remove();
Some suggestions how to update a path with real time data are given in Path Transitions.