I want to update my bar chart when I select a value by radio button. This value is passed as a parameter of my query in order to obtain corresponding JSON data.
The code works fine, excluding one aspect. When I select a value by clicking any radio button, the bar chart is drawn on top of existing bar chart. I want the chart to be re-drawn each time I select a new option.
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
// define the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var compSvg = d3.select(".company");
var companies = [];
d3.json("http://localhost:8983/solr/techproducts/select?q=popularity:[10%20TO%20*]&wt=json&fl=cat&facet=true&facet.field=cat", function(error, resp) {
var results = resp.facet_counts.facet_fields.cat;
for (var i = 0; i < 5; i++) {
var value = results[i*2];
companies.push(value);
}
});
//functions for toggling between data
function change(value){
update(value);
}
function update(comp){
var query = 'cat:"' + comp + '"';
var url = "http://localhost:8983/solr/techproducts/select?q=" + encodeURIComponent(query) + "&rows=10&fl=manu,price&wt=json"
// load the data
d3.json(url, function(error, resp) {
if (error) return console.error(error);
resp.response.docs.forEach(function(d) {
d.manu = d.manu;
d.price = +d.price;
});
// scale the range of the data
x.domain(resp.response.docs.map(function(d) { return d.manu; }));
y.domain([0, d3.max(resp.response.docs, function(d) { return d.price; })]);
// add axis
compSvg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );
compSvg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 5)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price");
// Add bar chart
compSvg.selectAll("bar")
.data(resp.response.docs)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.manu); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.price); })
.attr("height", function(d) { return height - y(d.price); });
});
}
When you load the charts for the first time, everything works as expected: you have a null selection, and the enter selection creates an element for every item in the data array. You also append axes.
When you load the charts the second time with the change function, you repeat what you did to create the charts in the first place: you have a null selection, as selectAll("bar") will be empty, and the enter selection creates a new element for every item in the data array. You also append axes.
You need to use the update and exit selections to properly make this work:
After the initial data is appended you need to use an update selection to modify the bars, an enter to bring in new bars (if one dataset uses more bars than another), and an exit selection to exit unneeded bars (if one dataset uses less bars than another). There is a lot of information online on the enter, update, exit process; keep in mind there are differences between v4 and v3.
This looks like:
var data = [
[1,2,3,4,5],
[6,4,3],
[5,10,1,7,1,3]
];
var i = 0;
var width = 500;
var height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var y = d3.scale.linear().range([height, 0]);
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
update(data[0]);
timer();
function update(dataset) {
// update scales
y.domain([0,d3.max(dataset, function(d) { return d; })] );
x.domain(dataset.map(function(d,i) { return i; }) );
// Bind Data
var bars = svg.selectAll(".bars")
.data(dataset);
// Update existing bars:
bars.transition()
.attr("x",function(d,i) { return x(i); })
.attr("y",function(d) { return y(d); })
.attr("width", x.rangeBand() )
.attr("height", function(d) { return height - y(d); })
.duration(1000);
// New Bars
bars.enter()
.append("rect")
.attr("class","bars")
.attr("x",function(d,i) { return x(i); })
.attr("width", x.rangeBand() )
.attr("y",height)
.attr("height",0)
.transition()
.attr("y",function(d) { return y(d); })
.attr("height", function(d) { return height - y(d); })
.duration(1000);;
// Un-needed Bars:
bars.exit()
.transition()
.attr("height", 0)
.duration(1000)
.remove();
}
function timer() {
setTimeout(function() { update(data[i++%3]); timer() } , 1500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
A little modification may meet your need:
function change(value){
// erase all contents before update
compSvg.html("");
update(value);
}
Related
Current situation: I already have a small multiple visualization for my data. What it represents is the stress intensity over time for six different days. It plots the graphs correctly. Now I wanted to add dots on the existing graph if the person smoked at that time. I am reading a csv file which consists of date, time, stress level and whether the person smoked or not (so 1 if they did and -1 if they didn't). I am using d3 v4.
This is what I am currently getting but the red dots are obviously in the wrong spot because they are showing up places I don't even have data.
What I wanted was for the red dots to be on the graph and represent the times the user smoked.
Code:
<script>
var margin = {top: 8, right: 10, bottom: 2, left: 10},
width = 1160 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var parseDate = d3.timeParse("%H:%M:%S");
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var area = d3.area()
.x(function (d) {
return x(d.time);
})
.y0(height)
.y1(function (d) {
return y(d.stress);
});
var line = d3.line()
.x(function (d) {
return x(d.time);
})
.y(function (d) {
return y(d.stress);
});
d3.csv("6000smokedData3.csv", type, function (error, data) {
// Nest data by date.
var dates = d3.nest()
.key(function (d) {
return d.date;
})
.entries(data);
// Compute the maximum stress per date, needed for the y-domain.
dates.forEach(function (s) {
s.maxPrice = d3.max(s.values, function (d) {
return d.stress;
});
});
// Compute the minimum and maximum time across dates.
// We assume values are sorted by time.
x.domain([
d3.min(dates, function (s) {
return s.values[0].time;
}),
d3.max(dates, function (s) {
return s.values[s.values.length - 1].time;
})
]);
// Add an SVG element for each date, with the desired dimensions and margin.
var svg = d3.select("body").selectAll("svg")
.data(dates)
.enter().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 + ")");
//Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.style("fill", function (d) {
return "red";
})
.attr("cx", function (d) {
if (d.smoked == 1) {
return x(d.time);
}
})
.attr("cy", function (d) {
if (d.smoked == 1) {
return y(d.stress);
}
});
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
// Add the area path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "area")
.attr("d", function (d) {
y.domain([0, d.maxPrice]);
return area(d.values);
});
// Add the line path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "line")
.attr("d", function (d) {
y.domain([0, d.maxPrice]);
return line(d.values);
});
// Add a small label for the date name.
svg.append("text")
.attr("x", width - 6)
.attr("y", height - 6)
.style("text-anchor", "end")
.text(function (d) {
return d.key;
});
});
function type(d) {
d.stress = +d.stress;
d.time = parseDate(d.time);
d.smoked = +d.smoked;
return d;
}
</script>
Few lines of csv file:
date,time,stress,smoked
2014-08-04,11:24:28,0.026191,-1
2014-08-04,11:24:29,0.026183,-1
2014-08-04,11:24:30,0.031845,-1
2014-08-04,11:24:31,0.01235,-1
Thank you
You're drawing the dots before you set the y scale for each element. I usually like to make small multiples inside of an each loop to avoid tricky things like. It looks like the y axis is also off - they should be different on each plot.
I am trying to create a bar chart that has 'attendees' and 'coins'. The data is being read from an external file and I'd like to update the chart as the data changes (or check the file every couple seconds and update the data). I have been trying to follow along mbostock's tutorial on the general update pattern but have had a heck of a time even starting to adapt for my own chart. I didn't find any other questions/answers that dealt with transitioning data from external files, but if I missed something, please let me know. So, with that, I turn you all!
Here is my current JS code:
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 950 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatNumber = d3.format(".1f");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatNumber);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Coins:</strong> <span style='color:red'>" + d.coins + "</span>";
})
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 + ")");
svg.call(tip);
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.attendee; }));
y.domain([0, d3.max(data, function(d) { return d.coins; })]);
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", ".5em")
.style("text-anchor", "end")
.text("Coins");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.attendee); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.coins); })
.attr("height", function(d) { return height - y(d.coins); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
});
function type(d) {
d.coins = +d.coins;
return d;
}
var inter = setInterval(function() {
update();
}, 1000);
function update() {
}
I should also mention that this is the first time really trying to dig deeper with D3. I hope I am not missing something too obvious! Thank you in advance for any help, suggestions, or pushes in the right direction!
** Edit to note the bar chart is an attempt to add functionality upon the sample found here.
Edit 2: Adding .tsv here for better formatting:
attendee coins
George 35
Charlie 50
Harrison 50
Billy 45
Wally 30
Harley 40
Steven 120
Paul 30
First of all you can call the update function like this:
var inter = setInterval(updateChart, 5000);
The logic which would simulate the fetch is the following:
function fetchData() {
console.log('fetching');
return new Promise(function(resolve, reject) {
var data = [{
attendee: "Paul",
coins: Math.floor(Math.random() * 40) + 1
}, {
attendee: "Bessy the Cow",
coins: Math.floor(Math.random() * 40) + 1
}, {
attendee: "Zeke",
coins: Math.floor(Math.random() * 40) + 1
}];
setTimeout(function() { // Adding timeout to simulate latency
resolve(data);
}, 4000)
})
}
Then we create an update function which will use the newly retrieved data:
function updateChart() {
fetchData()
.then(function(data) {
// Update our y domain with new coin values
y.domain([0, d3.max(data, function(d) {
return d.coins;
})]);
// Update our axis because our y domain just changed
svg.select('g.y')
.transition()
.duration(300)
.ease("linear")
.call(yAxis);
// Create a new data join with the simuldated data
var bars = svg.selectAll('.bar').data(data);
// Remove extra elements (say new data just has 2 bars, this would remove third one)
bars.exit().remove();
// Update existing elements
bars.transition()
.duration(300)
.ease("linear")
.call(renderBar);
// Add new elements (say new data has 5 bars, this would add the additional 2)
bars.enter().append('rect')
.transition()
.duration(300)
.ease("linear")
.call(renderBar);
})
}
I created the renderBar function since we are basically repeating the same routine at adding and updating.
function renderBar(rect) {
rect.attr("class", "bar")
.attr("x", function(d) {
return x(d.attendee);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.coins);
})
.attr("height", function(d) {
return height - y(d.coins);
});
}
This plunkr shows the working code, I removed the d3.tip part:
http://plnkr.co/edit/X3vZp5sReOWBsuZrxf8D?p=preview
I have a question. How should I redo this example (http://bl.ocks.org/DStruths/9c042e3a6b66048b5bd4) which uses a .tsv file to instead utilize a script with literal data?
So far I have done the following: http://codepen.io/Balzzac/pen/MJorXw?editors=0010 , but nothing works.
My code:
var dataset = [here is 15000 raws of original data converted into JSON, using http://codebeautify.org/tsv-to-json-converter]
var margin = {top: 20, right: 200, bottom: 100, left: 50},
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("%Y%m%d").parse;
var bisectDate = d3.bisector(function(d) { return d.date; }).left;
var xScale = d3.time.scale()
.range([0, width]),
xScale2 = d3.time.scale()
.range([0, width]); // Duplicate xScale for brushing ref later
var yScale = d3.scale.linear()
.range([height, 0]);
// 40 Custom DDV colors
var color = d3.scale.ordinal().range(["#48A36D", "#56AE7C", "#64B98C", "#72C39B", "#80CEAA", "#80CCB3", "#7FC9BD", "#7FC7C6", "#7EC4CF", "#7FBBCF", "#7FB1CF", "#80A8CE", "#809ECE", "#8897CE", "#8F90CD", "#9788CD", "#9E81CC", "#AA81C5", "#B681BE", "#C280B7", "#CE80B0", "#D3779F", "#D76D8F", "#DC647E", "#E05A6D", "#E16167", "#E26962", "#E2705C", "#E37756", "#E38457", "#E39158", "#E29D58", "#E2AA59", "#E0B15B", "#DFB95C", "#DDC05E", "#DBC75F", "#E3CF6D", "#EAD67C", "#F2DE8A"]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom"),
xAxis2 = d3.svg.axis() // xAxis for brush slider
.scale(xScale2)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.rating); })
.defined(function(d) { return d.rating; }); // Hiding line value defaults of 0 for missing data
var maxY; // Defined later to update yAxis
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom) //height + margin.top + margin.bottom
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create invisible rect for mouse tracking
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("x", 0)
.attr("y", 0)
.attr("id", "mouse-tracker")
.style("fill", "white");
//for slider part-----------------------------------------------------------------------------------
var context = svg.append("g") // Brushing context box container
.attr("transform", "translate(" + 0 + "," + 410 + ")")
.attr("class", "context");
//append clip path for lines plotted, hiding those part out of bounds
svg.append("defs")
.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
//end slider part-----------------------------------------------------------------------------------
// d3.tsv("data.tsv", function(error, data)
function render(data){
color.domain(d3.keys(data[0]).filter(function(key) { // Set the domain of the color ordinal scale to be all the csv headers except "date", matching a color to an issue
return key !== "date";
}));
data.forEach(function(d) { // Make every date in the csv data a javascript date object format
d.date = parseDate(d.date);
});
var categories = color.domain().map(function(name) { // Nest the data into an array of objects with new keys
return {
name: name, // "name": the csv headers except date
values: data.map(function(d) { // "values": which has an array of the dates and ratings
return {
date: d.date,
rating: +(d[name]),
};
}),
visible: (name === "Unemployment" ? true : false) // "visible": all false except for economy which is true.
};
});
xScale.domain(d3.extent(data, function(d) { return d.date; })); // extent = highest and lowest points, domain is data, range is bouding box
yScale.domain([0, 100
//d3.max(categories, function(c) { return d3.max(c.values, function(v) { return v.rating; }); })
]);
xScale2.domain(xScale.domain()); // Setting a duplicate xdomain for brushing reference later
//for slider part-----------------------------------------------------------------------------------
var brush = d3.svg.brush()//for slider bar at the bottom
.x(xScale2)
.on("brush", brushed);
context.append("g") // Create brushing xAxis
.attr("class", "x axis1")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
var contextArea = d3.svg.area() // Set attributes for area chart in brushing context graph
.interpolate("monotone")
.x(function(d) { return xScale2(d.date); }) // x is scaled to xScale2
.y0(height2) // Bottom line begins at height2 (area chart not inverted)
.y1(0); // Top line of area, 0 (area chart not inverted)
//plot the rect as the bar at the bottom
context.append("path") // Path is created using svg.area details
.attr("class", "area")
.attr("d", contextArea(categories[0].values)) // pass first categories data .values to area path generator
.attr("fill", "#F1F1F2");
//append the brush for the selection of subsection
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("height", height2) // Make brush rects same height
.attr("fill", "#E6E7E8");
//end slider part-----------------------------------------------------------------------------------
// draw line graph
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("x", -10)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Issues Rating");
var issue = svg.selectAll(".issue")
.data(categories) // Select nested data and append to new svg group elements
.enter().append("g")
.attr("class", "issue");
issue.append("path")
.attr("class", "line")
.style("pointer-events", "none") // Stop line interferring with cursor
.attr("id", function(d) {
return "line-" + d.name.replace(" ", "").replace("/", ""); // Give line id of line-(insert issue name, with any spaces replaced with no spaces)
})
.attr("d", function(d) {
return d.visible ? line(d.values) : null; // If array key "visible" = true then draw line, if not then don't
})
.attr("clip-path", "url(#clip)")//use clip path to make irrelevant part invisible
.style("stroke", function(d) { return color(d.name); });
// draw legend
var legendSpace = 450 / categories.length; // 450/number of issues (ex. 40)
issue.append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("x", width + (margin.right/3) - 15)
.attr("y", function (d, i) { return (legendSpace)+i*(legendSpace) - 8; }) // spacing
.attr("fill",function(d) {
return d.visible ? color(d.name) : "#F1F1F2"; // If array key "visible" = true then color rect, if not then make it grey
})
.attr("class", "legend-box")
.on("click", function(d){ // On click make d.visible
d.visible = !d.visible; // If array key for this data selection is "visible" = true then make it false, if false then make it true
maxY = findMaxY(categories); // Find max Y rating value categories data with "visible"; true
yScale.domain([0,maxY]); // Redefine yAxis domain based on highest y value of categories data with "visible"; true
svg.select(".y.axis")
.transition()
.call(yAxis);
issue.select("path")
.transition()
.attr("d", function(d){
return d.visible ? line(d.values) : null; // If d.visible is true then draw line for this d selection
})
issue.select("rect")
.transition()
.attr("fill", function(d) {
return d.visible ? color(d.name) : "#F1F1F2";
});
})
.on("mouseover", function(d){
d3.select(this)
.transition()
.attr("fill", function(d) { return color(d.name); });
d3.select("#line-" + d.name.replace(" ", "").replace("/", ""))
.transition()
.style("stroke-width", 2.5);
})
.on("mouseout", function(d){
d3.select(this)
.transition()
.attr("fill", function(d) {
return d.visible ? color(d.name) : "#F1F1F2";});
d3.select("#line-" + d.name.replace(" ", "").replace("/", ""))
.transition()
.style("stroke-width", 1.5);
})
issue.append("text")
.attr("x", width + (margin.right/3))
.attr("y", function (d, i) { return (legendSpace)+i*(legendSpace); }) // (return (11.25/2 =) 5.625) + i * (5.625)
.text(function(d) { return d.name; });
// Hover line
var hoverLineGroup = svg.append("g")
.attr("class", "hover-line");
var hoverLine = hoverLineGroup // Create line with basic attributes
.append("line")
.attr("id", "hover-line")
.attr("x1", 10).attr("x2", 10)
.attr("y1", 0).attr("y2", height + 10)
.style("pointer-events", "none") // Stop line interferring with cursor
.style("opacity", 1e-6); // Set opacity to zero
var hoverDate = hoverLineGroup
.append('text')
.attr("class", "hover-text")
.attr("y", height - (height-40)) // hover date text position
.attr("x", width - 150) // hover date text position
.style("fill", "#E6E7E8");
var columnNames = d3.keys(data[0]) //grab the key values from your first data row
//these are the same as your column names
.slice(1); //remove the first column name (`date`);
var focus = issue.select("g") // create group elements to house tooltip text
.data(columnNames) // bind each column name date to each g element
.enter().append("g") //create one <g> for each columnName
.attr("class", "focus");
focus.append("text") // http://stackoverflow.com/questions/22064083/d3-js-multi-series-chart-with-y-value-tracking
.attr("class", "tooltip")
.attr("x", width + 20) // position tooltips
.attr("y", function (d, i) { return (legendSpace)+i*(legendSpace); }); // (return (11.25/2 =) 5.625) + i * (5.625) // position tooltips
// Add mouseover events for hover line.
d3.select("#mouse-tracker") // select chart plot background rect #mouse-tracker
.on("mousemove", mousemove) // on mousemove activate mousemove function defined below
.on("mouseout", function() {
hoverDate
.text(null) // on mouseout remove text for hover date
d3.select("#hover-line")
.style("opacity", 1e-6); // On mouse out making line invisible
});
function mousemove() {
var mouse_x = d3.mouse(this)[0]; // Finding mouse x position on rect
var graph_x = xScale.invert(mouse_x); //
//var mouse_y = d3.mouse(this)[1]; // Finding mouse y position on rect
//var graph_y = yScale.invert(mouse_y);
//console.log(graph_x);
var format = d3.time.format('%b %Y'); // Format hover date text to show three letter month and full year
hoverDate.text(format(graph_x)); // scale mouse position to xScale date and format it to show month and year
d3.select("#hover-line") // select hover-line and changing attributes to mouse position
.attr("x1", mouse_x)
.attr("x2", mouse_x)
.style("opacity", 1); // Making line visible
// Legend tooltips // http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html
var x0 = xScale.invert(d3.mouse(this)[0]), /* d3.mouse(this)[0] returns the x position on the screen of the mouse. xScale.invert function is reversing the process that we use to map the domain (date) to range (position on screen). So it takes the position on the screen and converts it into an equivalent date! */
i = bisectDate(data, x0, 1), // use our bisectDate function that we declared earlier to find the index of our data array that is close to the mouse cursor
/*It takes our data array and the date corresponding to the position of or mouse cursor and returns the index number of the data array which has a date that is higher than the cursor position.*/
d0 = data[i - 1],
d1 = data[i],
/*d0 is the combination of date and rating that is in the data array at the index to the left of the cursor and d1 is the combination of date and close that is in the data array at the index to the right of the cursor. In other words we now have two variables that know the value and date above and below the date that corresponds to the position of the cursor.*/
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
/*The final line in this segment declares a new array d that is represents the date and close combination that is closest to the cursor. It is using the magic JavaScript short hand for an if statement that is essentially saying if the distance between the mouse cursor and the date and close combination on the left is greater than the distance between the mouse cursor and the date and close combination on the right then d is an array of the date and close on the right of the cursor (d1). Otherwise d is an array of the date and close on the left of the cursor (d0).*/
//d is now the data row for the date closest to the mouse position
focus.select("text").text(function(columnName){
//because you didn't explictly set any data on the <text>
//elements, each one inherits the data from the focus <g>
return (d[columnName]);
});
};
//for brusher of the slider bar at the bottom
function brushed() {
xScale.domain(brush.empty() ? xScale2.domain() : brush.extent()); // If brush is empty then reset the Xscale domain to default, if not then make it the brush extent
svg.select(".x.axis") // replot xAxis with transition when brush used
.transition()
.call(xAxis);
maxY = findMaxY(categories); // Find max Y rating value categories data with "visible"; true
yScale.domain([0,maxY]); // Redefine yAxis domain based on highest y value of categories data with "visible"; true
svg.select(".y.axis") // Redraw yAxis
.transition()
.call(yAxis);
issue.select("path") // Redraw lines based on brush xAxis scale and domain
.transition()
.attr("d", function(d){
return d.visible ? line(d.values) : null; // If d.visible is true then draw line for this d selection
});
};
}; // End Data callback function
function findMaxY(data){ // Define function "findMaxY"
var maxYValues = data.map(function(d) {
if (d.visible){
return d3.max(d.values, function(value) { // Return max rating value
return value.rating; })
}
});
return d3.max(maxYValues);
}
render(dataset);
date should be a string. Thanks to:
https://github.com/d3/d3/issues/2543
I am trying to combine severeal D3.js examples based on example. I managed to get mouseover for each multiples chart in part working (values are not displayed at mouse pointer yet but via console.log). By checking those values I realized that my line paths at the upper two charts are off in relation to the Y-Axis, also causing the mouseover focus to be in the wrong place. I am new to D3, so I am still having trouble to pin down the problem beeing caused by domain/scale/axis etc. You can see the example here
This is my code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
//shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.area {
//fill: #e7e7e7;
fill: transparent;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
stroke: steelblue;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 8, right: 10, bottom: 20, left: 30},
width = 960 - margin.left - margin.right,
height = 138 - margin.top - margin.bottom;
var parseDate = d3.time.format("%b %Y").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",.2f"),
formatCurrency = function(d) { return formatValue(d); };
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.price); });
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });
var xAxis = d3.svg.axis()
.scale(x) // x is the d3.time.scale()
.orient("bottom") // the ticks go below the graph
.ticks(4); // specify the number of ticks
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(4);
d3.csv("stocks_chart2.csv", type, function(error, data) {
// Nest data by symbol.
var symbols = d3.nest()
.key(function(d) { return d.symbol; })
.entries(data);
// Compute the maximum price per symbol, needed for the y-domain.
symbols.forEach(function(s) {
s.maxPrice = d3.max(s.values, function(d) { return d.price; });
});
// Compute the minimum and maximum date across symbols.
// We assume values are sorted by date.
x.domain([
d3.min(symbols, function(s) { return s.values[0].date; }),
d3.max(symbols, function(s) { return s.values[s.values.length - 1].date; })
]);
// Add an SVG element for each symbol, with the desired dimensions and margin.
var svg = d3.select("body").selectAll("svg")
.data(symbols)
.enter().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 + ")");
// Add the area path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "area")
.attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });
// Add the line path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "line")
.attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
// Add a small label for the symbol name.
svg.append("text")
.attr("x", width - 6)
.attr("y", height - 6)
.style("text-anchor", "end")
.text(function(d) { return d.key; });
svg.append('g') // create a <g> element
.attr('class', 'x axis') // specify classes
.attr("transform", "translate(0," + height + ")")
.call(xAxis); // let the axis do its thing
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("Value");
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var date, index;
date = x.invert(d3.mouse(this)[0]);
index = 0;
var focus = svg.selectAll(".focus");
focus.attr("transform", function(d) {
index = bisectDate(d.values, date, 0, d.values.length - 1);
console.log(index, d.values[index].symbol, d.values[index].date, d.values[index].price);
return "translate(" + x(d.values[index].date) + "," + y(d.values[index].price) + ")"
});
focus.selectAll("text", function(d) {
return formatCurrency(d.values[index].price);
});
}
});
function type(d) {
d.price = +d.price;
d.date = parseDate(d.date);
return d;
}
</script>
How do I assign the correct Y-Axis to each individual multiples chart causing the line path and mouseover values to be at the correct position? Any help would be greatly appreciated! Thank you!
This is an interesting problem. The example you link to uses a single y scale and yAxis for all 4 sub-plots. In your situation, though, your data has a very different domain for each sub-plot and when you add the dynamic mouse over a shared scale just won't work. So, my solution would be to create a different y scale and yAxis for each subplot.
...
// variable to hold our scales
var ys = {};
var area = d3.svg.area()
.x(function(d) {
return x(d.date);
})
.y0(height)
.y1(function(d) {
return ys[d.symbol](d.price); //<-- call the y function matched to our symbol
});
var line = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d, i) {
return ys[d.symbol](d.price); //<-- call the y scale function matched to our symbol
});
...
// for each symbol create our scale
symbols.forEach(function(s) {
var maxPrice = d3.max(s.values, function(d) {
return d.price;
});
ys[s.key] = d3.scale.linear() //<-- create a scale for each "symbol" (ie Sensor 1, etc...)
.range([height, 0])
.domain([0, maxPrice]);
});
...
// build 4 y axis
var axisGs = svg.append("g"); //<-- create a collection of axisGs
axisGs
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
axisGs.each(function(d, i) { //<-- for each axisG create an axis with it's scale
var self = d3.select(this);
self.call(
d3.svg.axis()
.scale(ys[d.key])
.orient("left")
.ticks(4)
);
});
...
// adjust mouseover to use appropriate scale
focus.attr("transform", function(d) {
index = bisectDate(d.values, date, 0, d.values.length - 1);
console.log(index, d.values[index].symbol, d.values[index].date, d.values[index].price);
return "translate(" + x(d.values[index].date) + "," + ys[d.key](d.values[index].price) + ")"; //<-- finally in our mouse move use the appropriate scale
});
Fully working code here.
As far as best practices are concerned when you are dealing with n number of datasets you have to go for n number of y scales and their corresponding y axis. It is good for seperation of concern and keeps the visulization intact. here you can see the example.
http://grafitome.github.io/advanced-charts.html#(first chart)
I have a json object that I am trying to visualize with D3.js. I want the x axis to represent the date in the json object which is stored as a string and the y axis to represent sales projections which is also a number in a string i.e "85,000.00"
example of my json object:
[{"Num":78689,"Client":"Health Services" ,"TotalEstSales":"85,000,000.00","Date ":"2/15/2015","RFP Receipt Date":null,"Exp. Proposal Due Date":"3/6/2015","Proposal Submission Date":null,"estAwardDate":"4/15/2015","Procurement Type":"New - Incumbent","Bid Type":"Standalone Contract"}]
and my d3 code:
// Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.date; }
function y(d) { return d.TotalEstSales; }
function radius(d) { return parseFloat(d.TotalEstSales);}
function color(d) { return d.region; }
function key(d) { return d.Title;}
// Chart dimensions.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5},
width = 960 - margin.right,
height = 500 - margin.top - margin.bottom;
// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.log().domain([300, 1e5]).range([0, width]),
yScale = d3.scale.linear().domain([10000, 85000000]).range([height, 0]),
radiusScale = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),
colorScale = d3.scale.category10();
// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
yAxis = d3.svg.axis().scale(yScale).orient("left");
// Create the SVG container and set the origin.
var svg = d3.select("#chart").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 + ")");
// Add the x-axis.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the y-axis.
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add an x-axis label.
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text("Data of RFP");
// Add a y-axis label.
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Award amount");
// Add the year label; the value is set on transition.
var label = svg.append("text")
.attr("class", "year label")
.attr("text-anchor", "end")
.attr("y", height - 24)
.attr("x", width)
.text(2015);
// Load the data.
d3.json("rfpdata.json", function(data) {
// A bisector since many nation's data is sparsely-defined.
// var bisect = d3.bisector(function(d) { return d[0]; });
// Add a dot per nation. Initialize the data at 1800, and set the colors.
var dot = svg.append("g")
.attr("class", "dots")
.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.style("fill", function(d) { return colorScale(color(d)); })
.call(position)
.sort(order);
// Add a title.
dot.append("title")
.text(function(d) { return d.Client; })
// Positions the dots based on data.
function position(dot) {
dot .attr("cx", function(d) { return xScale(x(d)); })
// .attr("cy", function(d) { return yScale(y(d)); })
.attr("r", function(d) { return radiusScale(radius(d)); });
}
// Defines a sort order so that the smallest dots are drawn on top.
function order(a, b) {
return radius(b) - radius(a);
}
// After the transition finishes, you can mouseover to change the year.
function enableInteraction() {
var yearScale = d3.scale.linear()
.domain([1800, 2009])
.range([box.x + 10, box.x + box.width - 10])
.clamp(true);
// Cancel the current transition, if any.
function mouseover() {
label.classed("active", true);
}
function mouseout() {
label.classed("active", false);
}
function mousemove() {
displayYear(yearScale.invert(d3.mouse(this)[0]));
}
}
// this is the function needed to bring in data
// Interpolates the dataset for the given (fractional) year.
function interpolateData(date) {
return data.map(function(d) {
return {
title: d.Title,
client: d.Client,
sales: parseFloat(d.TotalEstSales),
sales: interpolateValues(d.TotalEstSales, date),
};
});
}
// Finds (and possibly interpolates) the value for the specified year.
function interpolateValues(values, date) {
var i = bisect.left(values, date, 0, values.length - 1),
a = values[i];
if (i > 0) {
var b = values[i - 1],
t = (date - a[0]) / (b[0] - a[0]);
return a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
});
I am not sure what I am doing wrong but the data is not displaying? Am i properly parsing the date string? This was a graph available on the d3 site. I want a bubble graph where the radius changes depending on the size of the sale and the date is on the x axis.
#all Update:
I was able to make the proper adjustment for date on the xaxis here:
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).tickFormat(d3.time.format("%m/%d")),
yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(23, d3.format(" ,d"));
d3.time.format was what I was looking for. Once data was loaded I needed to parse the date:
month = data.Date;
parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.Date = parseDate(d.Date);
});
// update Dates here when new report comes in monthly
xScale.domain([parseDate("1/1/2015"),parseDate("6/1/2015")]);
obviously, using "Date" as a name column in the excel file was not idea for "Date" in js(because it is an oject).