-
-
Save Jedius/5419485 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.js | |
| node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var express = require('express') | |
| , http = require('http') | |
| var app = express(); | |
| app.configure(function(){ | |
| app.use(express.static(__dirname)); | |
| }); | |
| http.createServer(app).listen(3000, function(){ | |
| console.log("listen 3000"); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| age | population | |
|---|---|---|
| <5 | 2704659 | |
| 5-13 | 4499890 | |
| 14-17 | 2159981 | |
| 18-24 | 3853788 | |
| 25-44 | 14106543 | |
| 45-64 | 8819342 | |
| ≥65 | 612463 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .arc path { | |
| stroke: #fff; | |
| } | |
| </style> | |
| <body> | |
| <!-- <script type="text/javascript" src="d3.js"></script> --> | |
| <script type="text/javascript" src="https://raw.github.com/Jedius/d3/master/d3.min.js"></script> | |
| <!-- <script src="http://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 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", function(error, data) { | |
| data.forEach(function(d) { | |
| d.population = +d.population; | |
| }); | |
| 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(" + arc.centroid(d) + ")"; }) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", "middle") | |
| .text(function(d) { return d.data.age; }); | |
| d3.select(".arc path") | |
| .fill('aqua') // Task 11 | |
| d3.select(".arc text") | |
| .move('50px','-85px') // Task 12 | |
| .font('Arial') // Task 13 | |
| .fontSize('20px') // Task 14 | |
| .fill('green') // Task 15 | |
| .text('hello') // Task 17 | |
| d3.select('svg') | |
| .bColor('#eee') // Task 16 | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "application-name", | |
| "version": "0.0.1", | |
| "private": true, | |
| "scripts": { | |
| "start": "node app" | |
| }, | |
| "dependencies": { | |
| "express": "3.1.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment