This pie chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .arc text { | |
| font: 10px sans-serif; | |
| text-anchor: middle; | |
| } | |
| .arc path { | |
| stroke: #fff; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scale.ordinal() | |
| .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
| var arc = d3.svg.arc() | |
| .outerRadius(radius - 10) | |
| .innerRadius(0); | |
| var labelArc = d3.svg.arc() | |
| .outerRadius(radius - 40) | |
| .innerRadius(radius - 40); | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function(d) { return d.population; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| d3.csv("data.csv", type, function(error, data) { | |
| if (error) throw error; | |
| var g = svg.selectAll(".arc") | |
| .data(pie(data)) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| g.append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { return color(d.data.age); }); | |
| g.append("text") | |
| .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) | |
| .attr("dy", ".35em") | |
| .text(function(d) { return d.data.age; }); | |
| }); | |
| function type(d) { | |
| d.population = +d.population; | |
| return d; | |
| } | |
| </script> |
Is it a browser security issue? If so, you'll need to do one of two things:
Host the directory containing your files. If you have Python installed, then you can navigate to the directory with the files and use python -m SimpleHTTPServer
OR store the CSV data as a string and use d3.csv.parse (https://github.com/mbostock/d3/wiki/CSV#parse). You will need to replace the newlines with '\n' because JavaScript won't parse multi-line string literals.
The first option is definitely preferable.
You'll run into the same security issue with other ways of getting data into d3. See https://github.com/mbostock/d3/wiki/Requests.
hi,
i'm new to using d3... can you please tell me how to run the above ? i tried using the index.html and csv file ... do i need anything else to run your code ?
thanks,
Sneha