how to define data structure of D3 to draw pie ring - d3.js

I am a D3 newer and wrote a program to draw a pie ring.
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pie ring</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var dataset=[{name:A,value:5},{name:C,value:10},{name:F,value:13}];
var pie=d3.layout.pie(dataset);
var h=600;
var w=600;
var outerRadius=w/2;
var innerRadius=w/3;
var arc=d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var color=d3.scale.category10();
var arcs=svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class","arc")
.attr("transform","translate("+outerRadius+","+outerRadius+")");//translate(a,b)
arcs.append("path")
.attr("fill",function(d,i){
return color(i);
})
.attr("d",arc);
arcs.append("text")
.attr("transform",function(d){
return "translate("+arc.centroid(d)+")";
})
.attr("text-anchor","middle")
.text(function(d){
return d.name + ":" + d.value;
});
</script>
</body>
</html>
But failed, I don't know that how to define data structure and don't know how to pie dataset. pie(dataset) or pie(function(d){return d.value} ); could you help me to correct it
the javascript console told me that A is not defined. This A is the value of the name of the dataset. I don't know if the only request is digital value or digital array for pie ring.

Few problems here. It's telling you A isn't defined because it's not. You're using plain text instead of a string, so it thinks A is a variable, not a label. Even if you resolved that, there would be some other issues with the structure.
Copied almost straight from the d3 pie chart example here, I put in your data and it works a charm.
Here's the code, but I also strongly recommend going over the tutorial so you can see how it's supposed to work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pie ring</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var w = 600;
var h = 600;
var outerRadius=w/2;
var innerRadius=w/3;
color = d3.scale.category20c();
data = [{"label":"A", "value":5},
{"label":"C", "value":10},
{"label":"F", "value":13}];
var vis = d3.select("body")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
var arc = d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);
var pie = d3.layout.pie()
.value(function(d) { return d.value; });
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc);
arcs.append("svg:text")
.attr("transform", function(d) {
d.innerRadius = innerRadius;
d.outerRadius = outerRadius;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d, i) { return data[i].label; });
</script>
</body>
</html>

Related

How to nest a d3.arc inside another?

I'm attempting to nest an arc generated using d3.arc perfectly inside another arc.
I can do this by drawing "on my own":
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
function arc_position(x, y, radius, angle) {
return {
x: x + (radius * Math.cos(angle)),
y: y + (radius * Math.sin(angle))
};
}
function describe_arc(x, y, radius, startAngle, endAngle) {
var s = arc_position(x, y, radius, endAngle);
var e = arc_position(x, y, radius, startAngle);
var sweep = e - s <= 180 ? '0' : '1';
var d = [
'M', s.x, s.y,
'A', radius, radius, 0, sweep, 0, e.x, e.y
].join(' ');
return d;
}
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g");
var s = arc_position(250, 250, 200, Math.PI/2);
var e = arc_position(250, 250, 200, (Math.PI * 3)/2);
svg.append("path")
.style("fill", "none")
.style("stroke", "orange")
.style("stroke-width", "20px")
.attr("d", describe_arc(250,250,180,(Math.PI * 3)/2, Math.PI/2));
svg.append("path")
.style("fill", "none")
.style("stroke", "orange")
.style("stroke-width", "20px")
.attr("d", "M" + (s.x + 30) + "," + s.y + "L" + (e.x + 30) + "," + e.y);
svg.append("path")
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "20px")
.attr("d", describe_arc(250,250,200,(Math.PI * 3)/2, Math.PI/2));
svg.append("path")
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "20px")
.attr("d", "M" + (s.x + 10) + "," + s.y + "L" + (e.x + 10) + "," + e.y);
</script>
</body>
</html>
But I can't figure out a methodology using d3.arc:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform","translate(250,250)");
var arc = d3.arc()
.innerRadius(0)
.outerRadius(200)
.startAngle(0)
.endAngle(Math.PI);
svg.append("path")
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "20px")
.attr("d", arc());
arc.outerRadius(200 - 40);
svg.append("path")
.style("fill", "none")
.style("stroke", "orange")
.style("stroke-width", "20px")
.attr("d", arc())
.attr("transform", "translate(20,0)")
</script>
</body>
</html>
Any ideas?
I don't think that there is a good way to do this just using d3.arc because that is meant for drawing sections of circles and you're trying to draw a partial ellipse.
You can get close by generating the angle offset using the stroke width and the radius of the inner arc as offsetAngle = sin(stroke width / inner radius). The arc's startAngle is the offsetAngle and the endAngle is Math.PI - offsetAngle.
Unfortunately, that will generate a path which includes the center point of the circle. You can hack together something that works by just removing the L0,0 from the generated path (innerArc().replace("L0,0","")) and this will give you what you want, albeit in an ugly fashion.
Because it is a fairly simple path, it is probably best to use your own path generator to do this instead.
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform","translate(250,250)");
var outerRadius = 200;
var stroke = 20;
var innerRadius = outerRadius - stroke;
var innerAngle = Math.sin(stroke/innerRadius);
var outerArc = d3.arc()
.innerRadius(0)
.outerRadius(outerRadius)
.startAngle(0)
.endAngle(Math.PI);
var innerArc = d3.arc()
.innerRadius(0)
.outerRadius(innerRadius)
.startAngle(innerAngle)
.endAngle(Math.PI - innerAngle);
svg.append("path")
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", stroke)
.attr("d", outerArc());
svg.append("path")
.style("fill", "none")
.style("stroke", "orange")
.style("stroke-width", stroke)
.attr("d", innerArc().replace("L0,0",""));
</script>
</body>
</html>
(This is not an answer, but just a comment, which I chose to disguise as an answer because I need the S.O. snippet)
I believe that Paul S is right, and he deserves the big prize of the green tick: what you're trying to paint in the inner (orange) path is not an arc of a circumference, but an ellipse instead. And, as the docs say,
The arc generator produces a circular or annular sector
, which will not work for creating an elliptic sector.
You can easily see that in the following demo: using a for loop, we draw arcs with decreasing outer radius. The only way to perfectly fill the internal space of each arc is if the next, smaller arch has the same center of the precedent, bigger one:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform","translate(250,250)");
var arc = d3.arc()
.innerRadius(0)
.outerRadius(200)
.startAngle(0)
.endAngle(Math.PI);
var color = d3.scaleOrdinal(d3.schemeCategory10);
for(var i = 0; i<11; i++){
svg.append("path")
.style("stroke", color(i))
.style("fill", "none")
.style("stroke-width", "20px")
.attr("d", arc());
arc.outerRadius(200 - 20*i);
};
</script>
</body>
</html>
There is an even easier way to visualize that. Let's create a single arc, with a huge stroke:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform","translate(250,250)");
var arc = d3.arc()
.innerRadius(0)
.outerRadius(150)
.startAngle(0)
.endAngle(Math.PI);
svg.append("path")
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "100px")
.attr("d", arc());
</script>
</body>
</html>
Look at the blue arc: it is a semicircle. Now look at the white space inside it: it's clearly not a semicircle. The blue thing is a semicircle, but the space inside it is not.
So, as d3.arc() right now doesn't have the option to set two different focal points, the options are creating your own function (as you did) or hacking the path (as Paul S did).
You draw second arc with outer radius R - 2 * strokewidth and center shifted by strokewidth.
But smaller arc should have the same center as larger one and outer radius R - strokewidth

svg bar chart fails to render on plnkr

Not sure if this is a plnkr issue or an issue with my code.. although the console is not showing any errors.
I am writting a little svg script and it does not render.
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 14, 20, 25];
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function(d, i) {
return i * (w/dataset.length);
})
.attr('y', function(d) {
return h - (d);
})
.attr("width", w/ dataset.length - padding)
.attr("height", function(d) {
return d;
});
Plnkr here:
http://plnkr.co/edit/X7KomlmOVS6C0zhNL19b
Run it inside a document.ready or wait till the window is loaded. http://plnkr.co/edit/TmFWndyCgLk7GYEng7XP
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
</body>
</html>
and in the JS
$(document).ready(function(){
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 14, 20, 25];
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
console.log('running the plnkr');
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function(d, i) {
return i * (w/dataset.length);
})
.attr('y', function(d) {
return h - (d * 4);
})
.attr("width", w/ dataset.length - padding)
.attr("height", function(d) {
return d * 4;
});
});

The xAxis(date): Undefined is not a function

I'm having a problem while getting the xAxis done. I'm a newby using D3 and I just got lost by using the D3 Date method. Could anyone help me to figure it out the problem that is causing the undefined is not a function. I will really appreciate the help, here is my code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<h1>Hello worlds</h1>
<div id="wrapper"></div>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
scripts.js
var height = 800,
width = 500,
padding = 50;
var vizz = d3.select('#wrapper')
.append('svg')
.attr('height', height + padding * 2)
.attr('width', width + padding * 2)
.append('g')
.attr('id', 'visual')
.attr('transform', 'translate(' + padding + ',' + padding + ')');
var yScale = d3.scale.linear().range([height, 0]);
var xScale = d3.time.scale().range([0, width]);
var parseTime = d3.time.format("%Y%m%D");
var xAxis = d3.svg.axis().scale(xScale).orient("botom").tricks(8);
var yAxis = d3.svg.axis().scale(yScale).orient("left").tricks(20);
d3.csv('data/climate_data.csv', function(data){
yDomain = d3.extent(data, function(element){
return parseInt(element.TMAX)
});
xDomain = d3.extent(data, function(element){
return parseTime.parse(element.DATE)
});
yScale.domain(yDomain);
xScale.domain(xDomain);
dots = vizz.selectAll('circle')
.data(data)
.enter()
.append('circle');
dots.attr('r', function (d){
return d.TMAX / 100; })
.attr('cx', function(d) {return Math.max(0 + padding, Math.random() * width - padding)})
.attr('cy', function(d) {
return yScale(d.TMAX);
});
});
data/climate_data.csv
STATION,STATION_NAME,ELEVATION,LATITUDE,LONGITUDE,DATE,PRCP,TMAX,TMIN,TOBS
GHCND:USC00356749,PORTLAND KGW TV OR US,48.5,45.51667,-122.68333,19730801,0,294,133,217
GHCND:USC00356749,PORTLAND KGW TV OR US,48.5,45.51667,-122.68333,19730802,0,300,128,217
GHCND:USC00356749,PORTLAND KGW TV OR US,48.5,45.51667,-122.68333,19730803,0,289,133,172
To give the scale a suggestion for the number of ticks, you can call the function scale.ticks(). See also https://github.com/mbostock/d3/wiki/SVG-Axes#ticks

Integrating d3 with meteor? Trying to draw pie charts

I'm trying to draw pie charts in Meteor, but I'm very new to both d3 and Meteor and am not really understanding what is going on.
The following d3 code to draw pie charts from a csv file works for me outside of Meteor:
<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<style>
body {
font: 30px "Montserrat";
text-transform:uppercase;
}
svg {
padding: 10px 0 0 10px;
}
.arc {
stroke: #fff;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var radius = 150,
padding = 10;
var color = d3.scale.ordinal()
.range(["#f65c55","#c8e7ec"]);
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Criteria"; }));
data.forEach(function(d) {
d.ages = color.domain().map(function(name) {
return {name: name, population: +d[name]};
});
});
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.attr("width", radius * 2)
.attr("height", radius * 2)
.selectAll("g")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 50 + ")"; });
legend.append("rect")
.attr("width", 40)
.attr("height", 40)
.style("fill", color);
legend.append("text")
.attr("x", 50)
.attr("y", 20)
.attr("dy", ".35em")
.attr("font-size","20px")
.text(function(d) { return d; });
var svg = d3.select("body").selectAll(".pie")
.data(data)
.enter().append("svg")
.attr("class", "pie")
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
svg.selectAll(".arc")
.data(function(d) { return pie(d.ages); })
.enter().append("path")
.attr("class", "arc")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.name); });
svg.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.Criteria; });
});
</script>
I also have a Meteor template as follows that I want to draw these charts in:
<div class="tab-pane active" id="playback">
{{> playback}}
</div>
However, when I try and follow web tutorials to integrate the two, the graphs don't get drawn. Can anyone help me understand why? Thanks in advance!
EDIT: forgot to mention, data.csv looks like this:
Criteria,Disapproval, Approval
Too Fast,1,2
Too Slow,5,6
Clarity,2,3
Legibility,202070,343207
The first line is for the legend, and the rest are for 4 separate graphs.
You have to make sure that the template is rendered before you access the DOM elements by code. So put your D3 code inside a template rendered method, like this:
Template.playback.rendered = function() {
// your D3 code
}
or on the body tag e.g.:
UI.body.rendered = function() {
// your D3 code
}
Template.chart.rendered = function(){
Deps.autorun(function () {
//d3 codeing here!!
}
}
It's working for me. If you're coding without Deps.autorun() it's will not render.
Oh!! one morething at html page in you case maybe .
However for my case I using nvd3.org http://nvd3.org/livecode/index.html#codemirrorNav. And this I hope you will clearify.

Drawing D3 Rectangles

I am a beginner with D3 and JS in general.
I am trying to do a simple rectangle visualisation with a small csv file as a source.
price, units
80.67, 100
80.87, 99
79.34, 47
File, csv are in the same folder.
I am using Python's SimpleHTTPServer to serve locally in this folder.
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Data</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// load csv from the same directory
d3.csv("test.csv", function (data){
return {
price: +data.price, // convert to number with +
units: +data.units, // convert to number with +
};
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function (d) { return d.price; })
.attr("height", 48)
.attr("y", function (d) { return d.units; })
.attr("fill", "blue");
canvas.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill", "white")
.attr("y", function (d) { return d.units + 24; })
.text( function (d) { return d.units;})
});
</script>
</body>
I am getting no errors, just a blank page.
What is wrong with this code?
The first thing you do in your callback is to return. None of the code after that is being executed. I'm referring to
return {
price: +data.price, // convert to number with +
units: +data.units, // convert to number with +
};
which should probably be
data.forEach(function(d) {
d.price = +d.price;
d.units = +d.units;
});
The signature of the callback should also be function(error, data) instead of function(data).

Resources