Mercurial Mercurial > periplus / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
toolkit/javascript/d3/examples/area/area-radial.html
author Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
Wed, 16 Apr 2014 14:59:23 +0200
changeset 50 f68ecaf5265e
parent 47 c0b4a8b5a012
permissions -rw-r--r--
add visualisation dossiers + general editing

<!DOCTYPE html>
<html>
  <head>
    <title>Area Chart (Radial)</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

.area {
  fill: lightsteelblue;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var r = 960 / 2,
    data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; });

var svg = d3.select("body").append("svg:svg")
    .data([data])
    .attr("width", r * 2)
    .attr("height", r * 2)
  .append("svg:g")
    .attr("transform", "translate(" + r + "," + r + ")");

svg.append("svg:path")
    .attr("class", "area")
    .attr("d", d3.svg.area.radial()
    .innerRadius(r / 2)
    .outerRadius(function(d) { return r * d; })
    .angle(function(d, i) { return i / 180 * Math.PI; }));

svg.append("svg:path")
    .attr("class", "line")
    .attr("d", d3.svg.line.radial()
    .radius(function(d) { return r * d; })
    .angle(function(d, i) { return i / 180 * Math.PI; }));

    </script>
  </body>
</html>
periplus