I'm creating a line chart based on https://github.com/mbostock/d3/blob/master/examples/line/line.html .
var data = [
{x: 0, y: 3},
{x: 1, y: 4},
{x: 2, y: 5}
];
var margin = {top: 10, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
line.interpolate('monotone');
var svg = d3.select("#chart").append("svg")
.datum(data)
.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("path")
.attr("class", "line")
.attr("d", line);
How do I remove the last element from the path (i.e. delete a line segment)? Similar examples for removing elements involve changing the data array, and re-initializing via exit. In the case of 'circles' this looks something like:
data.shift();
var circles = svg.selectAll(".dot").data(data);
circles.exit().remove();
However this approach doesn't work with path. Any ideas?
Replace data.shift() with data = data.splice(0, data.length - 1)
array.splice(index , howMany[, element1[, ...[, elementN]]])
You could remove the last data element before passing it to d3. Your code would be clearer if you moved the call to .data() further down to where the paths are appended, as it is used only there, i.e. something like
data.shift();
svg.selectAll("path").data(data).enter()
.append("path")
.attr("class", "line")
.attr("d", line);
Related
I am currently trying to draw a map of the US with the counties-albers-10m.json file found on the topojson repo. I initially got a solid rectangle and, after changing fill to none, I am getting specks here and there. Going through stack, I found that the winding order may be wrong so I incorporated turf.js, but nothing is really changing. Here is the code:
var margin = {top: 0, left: 0, right: 0, bottom: 0},
height = 600 - margin.top - margin.bottom,
width = 1200 - margin.left - margin.right;
var svg = d3.select("#map")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top +")");
d3.json("counties-albers-10m.json").then(function(data) {
console.log(data);
var projection = d3.geoAlbersUsa();
var path = d3.geoPath()
.projection(projection);
var counties = topojson.feature(data, data.objects.counties).features
console.log(counties)
counties.forEach(function(feature) {
feature.geometry = turf.rewind(feature.geometry, {reverse:true});
})
svg.selectAll(".county")
.data(counties)
.enter().append("path")
.attr("class", "county")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", path);
})
The dreaded black box
I'm using Polymer to render some d3 charts. When the Polymer is initially rendered I only draw a graph with axes and no data, since the data comes later once the API calls succeed. However, when I get around to selecting the 'rect' elements in the svg, calling data() on that fails. Here's my code:
dataChanged: function() {
var data = this.data;
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = this.width - margin.left - margin.right,
height = this.height - margin.top - margin.bottom;
// format the data
data.forEach(function(d) {
d.date = d3.isoParse(d.date);
});
// set the ranges
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.date; }))
.rangeRound([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var svg = d3.select(this.$.chart).transition();
var histogram = d3.histogram()
.value(function(d) { return d.date; })
.domain(x.domain())
.thresholds(x.ticks(d3.timeMonth));
var bins = histogram(data);
y.domain([0, d3.max(bins, function(d) { return d.length; })]);
svg.selectAll("rect")
.data(bins)
.enter().append("rect")
.attr("class", "bar")
.attr("x", 1)
.attr("transform", function(d) {
return "translate(" + x(d.x0) + "," + y(d.length) + ")";
})
.attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
.attr("height", function(d) { return height - y(d.length); });
svg.select(".xAxis")
.duration(300)
.call(d3.axisBottom(x));
svg.select(".yAxis")
.duration(300)
.call(d3.axisLeft(y));
},
ready: function() {
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = this.width - margin.left - margin.right,
height = this.height - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleTime()
.domain([new Date(2010, 6, 3), new Date(2012, 0, 1)])
.rangeRound([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
// Add the SVG to my 'chart' div.
var svg = d3.select(this.$.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","xAxis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.attr("class","yAxis")
.call(d3.axisLeft(y));
}
ready() gets called upon rendering, dataChanged() when the parent component passes a chunk of data down. Everything works fine until svg.selectAll("rect").data(bins) is called when it crashes with Uncaught TypeError: svg.selectAll(...).data is not a function. bins has the right data in it, so that's not empty. I know that there are no rect elements for it to select, but in the example I followed here there are no rect elements prior to them being appended by this call anyway, so I'm confused as to why this doesn't work.
What's the purpose of this line:
var svg = d3.select(this.$.chart).transition();
This would make svg a transition, your code is implying it should be selection. So, just drop it the .transition:
var svg = d3.select(this.$.chart);
...
svg.selectAll("rect")
.data(bins)
...
I have been challenge to recreate the image below using HTML/CSS/JS without using any img files. I was thinking that I could make the shapes with and CSS but I know this is probably the most stupid way to do it.
Do any of you have suggestions how to approach this? Maybe a HTML5 canvas? I see the pattern is made of two layers, one with triangles and the top layer with circles. How would I approach this if I wanted to have the triangles and the circles randomly generated?
Thanks
You could definitely achieve this by using the canvas element, but have you thought about using d3.js ?
D3.js is a library which is capable of manipulating documents based on data.
Since all the elements within your picture have an exact position within a cartesian coordinate system you would just have to provide the data and then it would be fairly simple to append the elements to your document.
You could be very precise by using the exact coordinates of each element. Take a look at the snippet and i am sure you will get the idea. The D3 way of selecting an manipulating elements is very similar to what jQuery does, so if you are familiar with jQuery you will like D3js.
Hope this helps you out.
var margin = { top: 50, right: 50, bottom: 50, left: 50},
w = 300 - margin.left - margin.right,
h = 600 - margin.top - margin.bottom,
circleRadii = 15,
triData = [{x: 20, y: 30}, {x: 50, y: 120}, {x: 140, y: 160}],
circleData = [{x: 10, y: 10}, {x: 40, y: 80}, {x: 160, y: 70}];
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tri = svg.selectAll(".point")
.data(triData)
.enter().append("path")
.attr("class", "point")
.attr("stroke", "none")
.attr("fill", "rgba(30,110,160,.5)")
.attr("d", d3.svg.symbol().type("triangle-up").size(1024*2))
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
var circles = svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
var circleAttr = circles
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", circleRadii)
.style("fill", "rgba(10,100,0,.5)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I'm trying to display single bars in D3. I have a data of the type:
data = [
"value1": 1,
"value2": 2,
"value3": 3,
]
Because the y scale is not the same, I'm trying to display three different bar-charts, each one of them just with a bar. I don't need x-axis.
As you can see in this fiddle: http://jsfiddle.net/GPk7s/, The bar is not showing up, although if you inspect the source code, it has been added. I think it is because I'm not providing a x range, but I don't know how, because I don't really have one.
I just want a bar whose height is related to the range I provide (in the fiddle example this is [10, 30]).
I copy here the code just in case:
var margin = {
top: 50,
right: 0,
bottom: 100,
left: 30
},
width = 200 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var data = [{ "Value": 22.5 } ];
var yRange = d3.scale.linear().range([height, 0]);
yRange.domain([10, 30]);
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 + ")");
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return yRange(d.Value);
})
.attr("height", function (d) {
return height - yRange(d.Value);
})
.attr("y", function (d) {
return yRange(d.Value) + 3;
})
.attr("dy", ".75em")
.text(function (d) {
return d.Value;
});
Thanks for your help!
There are two problems with what you are doing:
1) Your rectangle doesn't have a width. I added this:
...
.attr("class", "bar")
.attr("width", 10)
.attr("y", function (d) {
...
2) Your data is not an array. D3 expects arrays of data to be provided with the .data() method, and you have data = {Value : 22.5} (effectively). I changed it to this:
...
var data = [{'Value' : 22.5}];
...
Updated fiddle is here.
I have the following code which plots a line path based on sine function:
var data = d3.range(40).map(function(i) {
return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4};
});
var margin = {top: 10, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var line = d3.svg.line()
.interpolate('linear')
.x(function(d){ return x(d.x) })
.y(function(d){ return y(d.y) });
var svg = d3.select("body").append("svg")
.datum(data)
.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("path")
.attr("class", "line")
.attr("d", line);
svg.selectAll('.point')
.data(data)
.enter().append("svg:circle")
.attr("cx", function(d, i){ return x(d.x)})
.attr("cy", function(d, i){ return y(d.y)})
.attr('r', 4);
What I want to do is to plot it smoothly from the first node to last node. I also want to have a smooth transition between two consecutive nodes and not just putting the whole line at once. Simply like connecting the dots using a pencil.
Any help would be really appreciated.
You can animate paths quite easily with stroke-dashoffset and and path.getTotalLength()
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
http://bl.ocks.org/4063326