This is in relation to my previous questions "Problems creating Sankey diagrams using d3.js (1 and 2)
Here I'm trying to replicate the example provided by Malcolm Maclean in his book "D3 Tips and Tricks" his implementation of "sankey-formatted-json" works, mine doesn't:>)
My test dataset (TestDrive_ext'json) is
{
"nodes":[
{"node":0,"name":"node0"},
{"node":1,"name":"node1"},
{"node":2,"name":"node2"},
{"node":3,"name":"node3"},
{"node":4,"name":"node4"},
{"node":5,"name":"node5"},
{"node":6,"name":"node6"},
{"node":7,"name":"node7"},
{"node":8,"name":"node8"},
{"node":9,"name":"node9"},
{"node":10,"name":"node10"},
{"node":11,"name":"node11"},
{"node":12,"name":"node12"},
{"node":13,"name":"node13"},
{"node":14,"name":"node14"},
{"node":15,"name":"node15"},
{"node":16,"name":"node16"},
{"node":17,"name":"node17"}
],
"links":[
{"source":3,"target":0,"value":1},
{"source":3,"target":1,"value":2},
{"source":5,"target":1,"value":1},
{"source":0,"target":2,"value":1},
{"source":3,"target":2,"value":1},
{"source":4,"target":2,"value":1},
{"source":16,"target":2,"value":1},
{"source":4,"target":3,"value":4},
{"source":7,"target":3,"value":1},
{"source":12,"target":3,"value":1},
{"source":10,"target":4,"value":1},
{"source":12,"target":4,"value":1},
{"source":13,"target":4,"value":1},
{"source":1,"target":5,"value":1},
{"source":16,"target":5,"value":1},
{"source":13,"target":6,"value":1},
{"source":14,"target":6,"value":1},
{"source":0,"target":7,"value":1},
{"source":2,"target":7,"value":1},
{"source":12,"target":7,"value":1},
{"source":4,"target":8,"value":1},
{"source":16,"target":10,"value":1},
{"source":11,"target":12,"value":1},
{"source":15,"target":12,"value":1},
{"source":7,"target":13,"value":2},
{"source":11,"target":13,"value":1},
{"source":6,"target":14,"value":2},
{"source":0,"target":15,"value":2},
{"source":6,"target":15,"value":3},
{"source":9,"target":15,"value":1},
{"source":12,"target":15,"value":3},
{"source":4,"target":16,"value":1},
{"source":5,"target":16,"value":1},
{"source":9,"target":16,"value":1},
{"source":10,"target":16,"value":1},
{"source":1,"target":17,"value":1},
{"source":6,"target":17,"value":1}
]}
The code copied from Malcolm's example is
<!DOCTYPE html>
<meta charset="utf-8">
<title>SANKEY Experiment</title>
<style>
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
</style>
<body>
<p id="chart">
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="js/sankey.js"></script>
<script>
var units = "Widgets";
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 700 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + " " + units; },
color = d3.scale.category20();
// append the svg canvas to the page
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 + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
// load the data
d3.json("data/TestDrive_ext.json", function(error, graph) {
sankey
.nodes(graph.nodes)
.links(graph.links)
.layout(32);
// add in the links
var link = svg.append("g").selectAll(".link")
.data(graph.links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; });
// add the link titles
link.append("title")
.text(function(d) {
return d.source.name + " → " +
d.target.name + "\n" + format(d.value); });
// add in the nodes
var node = svg.append("g").selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", function() {
this.parentNode.appendChild(this); })
.on("drag", dragmove));
// add the rectangles for the nodes
node.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) {
return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function(d) {
return d3.rgb(d.color).darker(2); })
.append("title")
.text(function(d) {
return d.name + "\n" + format(d.value); });
// add in the title for the nodes
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// the function for moving the nodes
function dragmove(d) {
d3.select(this).attr("transform",
"translate(" + d.x + "," + (
d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
) + ")");
sankey.relayout();
link.attr("d", path);
}
});
</script>
</body>
</html>
Again, this doesn't throw any errors in the Javascript console but the diagram doesn't render but as I said previously Malcolm's does
A jsFiddle, which I don't really understand how to interpret, is available at http://jsfiddle.net/Dzy82f/z6bEx/
Once more, any insights that would help me understand where I'm going wrong would be much appreciated
Many thanks
Julian
Related
I have a data in csv like this:
date,partner,units
2012-05-01,team1,34.12
2012-04-30,team1,45.56
2012-04-27,team2,67.89
2012-04-26,team1,78.54
2012-04-25,team2,89.23
2012-04-24,team2,99.23
2012-04-23,team2,101.34
I want to plot two lines (one for team1, one for team2 using this data), but I am just getting a scatterplot using the following complete d3 code, is my filtering wrong?
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
#line1 {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
#line2 {
fill: none;
stroke: red;
stroke-width: 2px;
}
</style>
<input type="button" onclick="hideLine()">
<input type="button" onclick="showLine()">
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%Y-%m-%d");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the 1st line
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.units); });
// define the 2nd line
var valueline2 = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.units); });
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 + ")");
// Get the data
d3.csv("data1.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.units = +d.units;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
m = d3.max(data, function(d) {
var m = d.units;
return m;
});
console.log("Max:", m);
y.domain([0,m]);
// Add the valueline path.
svg.append("path")
.data([data])
.filter(function(d) { return d.partner == 'team1'; })
.attr("id", "line1")
.attr("d", valueline);
console.log("DATA", data)
svg.selectAll(".point")
.data(data)
.enter()
.append("circle")
.attr("class", "point")
.attr("cx", function (d, i) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.units);
})
.attr("r", 4)
.on("mouseover", function(d) { console.log(d.units) });
// Add the valueline2 path.
svg.append("path")
.data([data])
.filter(function(d) { return d.partner == 'team2'; })
.attr("id", "line2")
.style("stroke", "red")
.attr("d", valueline2)
.on("mouseover", function(d) {console.log(d)});
// 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));
});
function hideLine() {
console.log("Hideline");
d3.select("#line2").attr("style", "opacity:0");
}
function showLine() {
console.log("ShowLine");
d3.select("#line2").attr("style", "opacity:1");
}
</script>
</body>
Yes, your filter is wrong. You are wrapping your data in another [] which means the filter is only operating on the outer array.
Do this instead:
svg.append("path")
.datum(data.filter(function(d) { return d.partner == 'team1'; }))
.attr("id", "line1")
.attr("d", valueline);
Working example here.
I have been trying to learn enough about d3.drag to integrate it into a sankey diagram for v4 similar to this example.
The start point was Mikes circle dragging example here which I tried to integrate with the object+text drag implementation here.
Tragically I can't quite work out how to grab the 'g' element using d3.drag.
There have been several iterations over the past few days, but I think the closest I have come is the example below which will only grab a specific rectangle for dragging (I suspect I may have butchered the use of 'this').
var margin = {top: 10, right: 10, bottom: 30, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var rectangles = d3.range(20).map(function() {
return {
x: Math.round(Math.random() * (width)),
y: Math.round(Math.random() * (height))
};
});
var color = d3.scaleOrdinal(d3.schemeCategory20);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var group = svg.append("g")
.data(rectangles)
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
group.selectAll("rect")
.data(rectangles)
.enter().append("rect")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("height", 60)
.attr("width", 30)
.style("fill", function(d, i) { return color(i); });
group.selectAll("text")
.data(rectangles)
.enter().append("text")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("text-anchor", "start")
.style("fill", "steelblue")
.text("Close");
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).select("text").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
d3.select(this).select("rect").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("active", false);
}
.active {
stroke: #000;
stroke-width: 2px;
}
.rect {
pointer-events: all;
stroke: none;
stroke-width: 40px;
}
<script src="//d3js.org/d3.v4.min.js"></script>
I tried to implement the code per the answer here which is a close analog, but the changes involved with moving from the force diagram defeated me as well.
Any guidance appreciated. I feel like I'm missing something fundamental.
I tweaked your code a little. I grouped both rectangles and text and added the drag attribute to the group. So, when we drag, both text and rectangle move in sink.
var margin = {top: 10, right: 10, bottom: 30, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var rectangles = d3.range(10).map(function() {
return {
x: Math.round(Math.random() * (width)),
y: Math.round(Math.random() * (height))
};
});
var color = d3.scaleOrdinal(d3.schemeCategory20);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var group = svg.selectAll('g')
.data(rectangles).enter().append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
group.append("rect")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("height", 60)
.attr("width", 30)
.style("fill", function(d, i) { return color(i); });
group.append("text")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("text-anchor", "start")
.style("fill", "steelblue")
.text("Close");
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).select("text").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
d3.select(this).select("rect").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("active", false);
}
.active {
stroke: #000;
stroke-width: 2px;
}
.rect {
pointer-events: all;
stroke: none;
stroke-width: 40px;
}
<script src="//d3js.org/d3.v4.min.js"></script>
Hope this helps.
You can also try this alternative way of grouping and moving groups.
var margin = {top: 10, right: 10, bottom: 30, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var rectangles = d3.range(10).map(function() {
return {
x: Math.round(Math.random() * (width)),
y: Math.round(Math.random() * (height))
};
});
var color = d3.scaleOrdinal(d3.schemeCategory20);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var group = svg.selectAll('g')
.data(rectangles)
.enter().append("g")
.attr("transform",function(d) {
return "translate(" + (margin.left + d.x) + "," + (margin.top + d.y) + ")"
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
group.append("rect")
.attr("height", 60)
.attr("width", 30)
.style("fill", function(d, i) { return color(i); });
group.append("text")
.attr("text-anchor", "start")
.style("fill", "steelblue")
.text("Close");
function dragstarted(d) {
d._drag = {
distance:0,
threshold:2,
initiated: false
};
}
function dragged(d) {
if (!d._drag.initiated) {
d._drag.initiated = true;
d3.select(this).raise().classed("active", true);
}
d._drag.distance += d3.event.dx * d3.event.dx + d3.event.dy * d3.event.dy;
d.x = d3.event.x;
d.y = d3.event.y;
d3.select(this).attr('transform', 'translate('+[d.x,d.y]+')');
}
function dragended(d) {
if (d._drag.distance < d._drag.threshold) {
d3.select(window).on('click.drag', null);
return;
}
d3.select(this).classed("active", false);
}
.active {
stroke: #000;
stroke-width: 2px;
}
.rect {
pointer-events: all;
stroke: none;
stroke-width: 40px;
}
<script src="//d3js.org/d3.v4.min.js"></script>
I am trying to make a bar chart out of some grouped data. This is dummy data, but the structure is basically the same. The data: election results includes a bunch of candidates, organized into the districts they were running in, and the total vote count:
district,candidate,votes
Dist 1,Leticia Putte,3580
Dist 2,David Barron,1620
Dist 2,John Higginson,339
Dist 2,Walter Bannister,2866
[...]
I'd like to create a bar or column chart (either, honestly, though my end goal is horizontal) that groups the candidates by district.
Mike Bostock has an excellent demo but I'm having trouble translating it intelligently for my purposes. I started to tease it out at https://jsfiddle.net/97ur6cwt/6/ but my data is organized somewhat differently -- instead of rows, by group, I have a column that sets the category. And there might be just one candidate or there might be a few candidates.
Can I group items if the groups aren't the same size?
My answer is similar to #GerardoFurtado but instead I use a d3.nest to build a domain per district. This removes the need for hardcoding values and cleans it up a bit:
y0.domain(data.map(function(d) { return d.district; }));
var districtD = d3.nest()
.key(function(d) { return d.district; })
.rollup(function(d){
return d3.scale.ordinal()
.domain(d.map(function(c){return c.candidate}))
.rangeRoundBands([0, y0.rangeBand()], pad);
}).map(data);
districtD becomes a map of domains for your y-axis which you use when placing the rects:
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", function(d,i) {
return color(d.district);
})
.attr("x", 0)
.attr("y", function(d) { return y0(d.district) + districtD[d.district](d.candidate); })
.attr("height", function(d){
return districtD[d.district].rangeBand();
})
.attr("width", function(d) {
return x(d.votes);
});
I'm off to a meeting but the next step is to clean up the axis and get the candidate names on there.
Full running code:
var url = "https://gist.githubusercontent.com/amandabee/edf73bc0bbe131435c952f5ed47524a6/raw/99febb9971f76e36af06f1b99913fcaa645ecb3e/election.csv"
var m = {top: 10, right: 10, bottom: 50, left: 110},
w = 800 - m.left - m.right,
h = 500 - m.top - m.bottom,
pad = .1;
var x = d3.scale.linear().range([0, w]);
y0 = d3.scale.ordinal().rangeRoundBands([0, h], pad);
var color = d3.scale.category20c();
var yAxis = d3.svg.axis()
.scale(y0)
.orient("left");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(d3.format("$,.0f"));
var svg = d3.select("#chart").append("svg")
.attr("width", w + m.right + m.left + 100)
.attr("height", h + m.top + m.bottom)
.append("g")
.attr("transform",
"translate(" + m.left + "," + m.top + ")");
// This moves the SVG over by m.left(110)
// and down by m.top (10)
d3.csv(url, function(error, data) {
data.forEach(function(d) {
d.votes = +d.votes;
});
y0.domain(data.map(function(d) { return d.district; }));
districtD = d3.nest()
.key(function(d) { return d.district; })
.rollup(function(d){
console.log(d);
return d3.scale.ordinal()
.domain(d.map(function(c){return c.candidate}))
.rangeRoundBands([0, y0.rangeBand()], pad);
})
.map(data);
x.domain([0, d3.max(data, function(d) {
return d.votes;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "middle");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", function(d,i) {
return color(d.district);
})
.attr("x", 0)
.attr("y", function(d) { return y0(d.district) + districtD[d.district](d.candidate); })
.attr("height", function(d){
return districtD[d.district].rangeBand();
})
.attr("width", function(d) {
return x(d.votes);
});
svg.selectAll(".label")
.data(data)
.enter().append("text")
.text(function(d) {
return (d.votes);
})
.attr("text-anchor", "start")
.attr("x", function(d) { return x(d.votes)})
.attr("y", function(d) { return y0(d.district) + districtD[d.district](d.candidate) + districtD[d.district].rangeBand()/2;})
.attr("class", "axis");
});
.axis {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>
An alternate version which sizes the bars the same and scales the outer domain appropriately:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<style>
.label {
font: 10px sans-serif;
}
.axis {
font: 11px sans-serif;
font-weight: bold;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var url = "https://gist.githubusercontent.com/amandabee/edf73bc0bbe131435c952f5ed47524a6/raw/99febb9971f76e36af06f1b99913fcaa645ecb3e/election.csv"
var m = {
top: 10,
right: 10,
bottom: 50,
left: 110
},
w = 800 - m.left - m.right,
h = 500 - m.top - m.bottom,
pad = .1, padPixel = 5;
var x = d3.scale.linear().range([0, w]);
var y0 = d3.scale.ordinal();
var color = d3.scale.category20c();
var yAxis = d3.svg.axis()
.scale(y0)
.orient("left");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(d3.format("$,.0f"));
var svg = d3.select("#chart").append("svg")
.attr("width", w + m.right + m.left + 100)
.attr("height", h + m.top + m.bottom)
.append("g")
.attr("transform",
"translate(" + m.left + "," + m.top + ")");
// This moves the SVG over by m.left(110)
// and down by m.top (10)
d3.csv(url, function(error, data) {
data.forEach(function(d) {
d.votes = +d.votes;
});
var barHeight = h / data.length;
y0.domain(data.map(function(d) {
return d.district;
}));
var y0Range = [0];
districtD = d3.nest()
.key(function(d) {
return d.district;
})
.rollup(function(d) {
var barSpace = (barHeight * d.length);
y0Range.push(y0Range[y0Range.length - 1] + barSpace);
return d3.scale.ordinal()
.domain(d.map(function(c) {
return c.candidate
}))
.rangeRoundBands([0, barSpace], pad);
})
.map(data);
y0.range(y0Range);
x.domain([0, d3.max(data, function(d) {
return d.votes;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "middle");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", function(d, i) {
return color(d.district);
})
.attr("x", 0)
.attr("y", function(d) {
return y0(d.district) + districtD[d.district](d.candidate);
})
.attr("height", function(d) {
return districtD[d.district].rangeBand();
})
.attr("width", function(d) {
return x(d.votes);
});
var ls = svg.selectAll(".labels")
.data(data)
.enter().append("g");
ls.append("text")
.text(function(d) {
return (d.votes);
})
.attr("text-anchor", "start")
.attr("x", function(d) {
return x(d.votes)
})
.attr("y", function(d) {
return y0(d.district) + districtD[d.district](d.candidate) + districtD[d.district].rangeBand() / 2;
})
.attr("class", "label");
ls.append("text")
.text(function(d) {
return (d.candidate);
})
.attr("text-anchor", "end")
.attr("x", -2)
.attr("y", function(d) {
return y0(d.district) + districtD[d.district](d.candidate) + districtD[d.district].rangeBand() / 2;
})
.style("alignment-baseline", "middle")
.attr("class", "label");
});
</script>
</body>
</html>
This is a partial solution: https://jsfiddle.net/hb13oe4v/
The main problem here is creating a scale for each group with a variable domain. Unlike Bostock's example, you don't have the same amount of bars(candidates) for each group(districts).
So, I had to do a workaround. First, I nested the data in the most trivial way:
var nested = d3.nest()
.key(function(d) { return d.district; })
.entries(data);
And then created the groups accordingly:
var district = svg.selectAll(".district")
.data(nested)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(0," + y(d.key) + ")"; });
As I couldn't create an y1 (x1 in Bostock's example) scale, I had to hardcode the height of the bars (which is inherently bad). Also, for centring the bars in each group, I created this crazy math, that puts one bar in the center, the next under, the next above, the next under and so on:
.attr("y", function(d, i) {
if( i % 2 == 0){ return (y.rangeBand()/2 - 10) + (i/2 + 0.5) * 10}
else { return (y.rangeBand()/2 - 10) - (i/2) * 10}
})
Of course, all this can be avoided and coded way more elegantly if we could set a variable scale for each group.
I have this code below.
My original data has a lot more different kinds of data which make a big graph with lots of scatterplot points and the legend get big and a lot of times I need to deselect all the legens one by one to see one data that I need. I want a button that will deselect all the squares at once and then select the once I need. Is that possible. I cannot figure it out.
<!DOCTYPE html>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body { font: 10px sans-serif;
}
.axis path,
.axis line { fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot { stroke: #000;
stroke-width: 0px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 160px;
height: 28px;
padding: 2px;
font: 8px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
}
</style>
<body>
<script src="d3.js"></script>
<script src="d3.min.js"></script>
<div id="graphContainer1" class="graphContainer1">
</div>
<div id="graphContainer2" class="graphContainer2">
</div>
<script>
if(!(window.console && console.log)) {
console = {
log: function(){},
debug: function(){},
info: function(){},
warn: function(){},
error: function(){}
};
}
// set start of report (where to filter data on)
var dtReportStart = new Date();
//dtReportStart.setMonth(dtReportStart.getMonth() - 1); //************************ hour
dtReportStart.setDate(dtReportStart.getDate() - 14); // adjusted report to show only 2 weeks for TAR ************************ hour
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 100, left: 150},
width = 1800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom,
legend_delta = 15;
var yScaleSize = 20;
// setup fill color
var cValue = function(d) { return d.jobtype;};
var color = d3.scale.category20b();
// add the tooltip area to the webpage
var tooltip = d3.select("body").select("#graphContainer1" ).append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Parse the date / time ************************ hour
var parseDate = d3.time.format("%Y-%m-%d %H:%M").parse;
// setup x
var xValue = function(d) { return d.date_time;}; // data -> value
var xScale = d3.time.scale()
.range([0, width]);
// xScale = d3.time.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// setup y
var yValue = function(d) { return d.average_jobtime;}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
// Define the axes
var xAxis = d3.svg.axis().scale(xScale)
.orient("bottom")
.ticks(d3.time.hour, 12) //************************ hour
.tickFormat(d3.time.format("%Y-%m-%d %H:%M")); //************************ hour
var yAxis = d3.svg.axis().scale(yScale)
.orient("left")
.ticks(10);
function do_graph(graph_title,filetoUse,gcid) {
console.log ('doing graph')
// Adds the svg canvas
var svg = d3.select("body").select("#graphContainer" + gcid )
.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.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "20px")
.style("font-weight", "bold")
.text(graph_title + " - average job duration per hour" ); //************************ hour
// Get the data
console.log (filetoUse)
d3.csv(filetoUse, function(error, data) {
data=data.filter(function(row) {
return parseDate(row['date_time']) >= dtReportStart;
})
data.forEach(function(d) {
d.average_jobtime = +d.average_jobtime;
d.jobtype = d.jobtype;
d.date_time = parseDate(d.date_time);
});
// Scale the range of the data
xScale.domain(d3.extent(data, function(d) { return d.date_time; }));
xScale.nice(d3.time.hour, 12); //************************ hour
//yScale.domain([0,1+d3.max(data, function(d) { return d.average_jobtime; })]);
yScale.domain([0,yScaleSize]);
//console.log("test :" + d3.max(data, function(d) { return d.average_jobtime; }) )
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", height-6)
.style("text-anchor", "end")
.text("Time");
svg.select(".x.axis")
.selectAll("text")
.attr("transform"," translate(-13,50) rotate(-90)"); // To rotate the texts on x axis. Translate y position a little bit to prevent overlapping on axis line.
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("average_jobtime (seconds)");
svg.selectAll(".dot" )
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 2)
.attr("id" , function(d) { return d.jobtype; } )
.attr("cx", xMap )
.attr("cy", yMap )
.style("fill", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(50)
.style("opacity", 0);
tooltip.transition()
.duration(20)
.style("opacity", .9);
tooltip.html(d.jobtype + ": " + yValue(d) +"<br/> (" + xValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
});
// draw legend
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-1680," + i * legend_delta + ")"; })
// .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
;
// draw legend empty rectangles
legend.append("rect")
.attr("x", width - legend_delta-2)
.attr("width", legend_delta-2 )
.attr("height", legend_delta-2)
.attr("border", 1)
.style("stroke", 'black')
.style("stroke-width", 1)
.style("fill", 'white')
;
// draw legend colored rectangles
legend.append("rect")
.attr("class", "fade_rectangle" )
.attr("x", width - legend_delta-2)
.attr("id" , function(d) { return d; } )
.attr("width", legend_delta-2)
.attr("height", legend_delta-2)
.style("fill", color)
.style("stroke", 'black')
.style("stroke-width", 1)
.style("opacity", 1)
.on("click", function (d, i) {
// register on click event
console.log ('opacity:' + this.style.opacity );
var lVisibility = this.style.opacity
console.log ('lVisibility:' + lVisibility );
filterGraph(d, lVisibility);
});
// draw legend text
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d;})
;
});
// Method to filter graph
function filterGraph( aType, aVisibility) {
console.log( "jobtype :" + aType + ",vis:" + aVisibility );
// change lthe visibility of the node
// if all the links with that node are invisibile, the node should also be invisible
// otherwise if any link related to that node is visibile, the node should be visible
newOpacity = 1 - aVisibility ;
console.log( "newOpacity :" + newOpacity);
// Hide or show the elements
d3.selectAll("#" + aType).style("opacity", newOpacity);
}
}
console.log ('start')
do_graph('PILOT 0' ,'test.csv','1');
console.log ('end')
</script>
</body>
test.csv:
20150723_080028,xxxMio,0,12246,Job finished JobReport,369,60736,61106
20150723_080136,pppMio,1,12331,Job finished JobReport,773,44959,45733
20150723_080141,tttMio,0,12421,Job finished JobReport,570,46836,47407
20150723_080238,fffMio,1,12531,Job finished JobReport,427,53571,53999
20150723_080304,xxxMio,0,12596,Job finished JobReport,257,52017,52275
20150723_080355,pppMio,1,12681,Job finished JobReport,777,43932,44710
20150723_080358,tttMio,0,12771,Job finished JobReport,569,43565,44135
Say I had a button with id of toggle:
<button id="toggle">Toggle All</button>
Then the code would be as simple as:
d3.select('#toggle')
.on("click", function(d){
var o = d3.select('.fade_rectangle').style('opacity') === "1" ? "0" : "1";
d3.selectAll('.dot')
.style('opacity', o);
d3.selectAll('.fade_rectangle')
.style('opacity', o);
});
This would use the first legend item to determine the state for all elements.
Working example.
I am trying to brush a vertical tree layout.
But the selections are not working.
Please help me with respect to selection of the classed node.
I am very new to D3 and not able to understand this.
Here is my style sheet
.node {
stroke: black;
stroke-width: 1px;
}
.node .selected {
stroke: red;
}
.node text { font: 10px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
.brush .extent {
fill-opacity: .1;
stroke: #fff;
shape-rendering: crispEdges;
Here is my code
var margin = {top: 140, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 100; });
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
nodeEnter.append("circle")
.attr("r", 10)
.style("fill", "#fff");
nodeEnter.append("text")
.attr("y", function(d) {
return d.children || d._children ? -18 : 18; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", diagonal);
}
var brush = svg.append("g")
.attr("class", "brush")
.call(d3.svg.brush()
.x(d3.scale.identity().domain([0, 1000]))
.y(d3.scale.identity().domain([0, 1000]))
.on("brush",function(){
var extent =d3.event.target.extent();
console.log(extent);
svg.selectAll(".node")
.classed("selected",function(d){
// return true;
return extent[0][1] <= d.x && d.x < extent[1][0]
&& extent[0][1] <= d.y && d.y < extent[1][1];
});
})