datavjs/example/chord/chord.html
2012-10-12 11:15:57 +08:00

62 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Chord Diagram</title>
<script type="text/javascript" src="../../deps/compatible.js"> </script>
<script type="text/javascript" src="../../deps/d3.js"></script>
<script type="text/javascript" src="../../deps/d3.csv.js"></script>
<script type="text/javascript" src="../../deps/d3.layout.js"></script>
<script type="text/javascript" src="../../deps/raphael.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<!-- chord -->
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
<script type="text/javascript">
seajs.config({
alias: {
'datav': '/datav.js',
'chord': '/libs/chord.js'
}
});
</script>
<STYLE type="text/css">
#chart {
border-top: 1px dashed #F00;
border-bottom: 1px dashed #F00;
padding-left: 20px;
}
.textArea {
border: 2px solid black;
color: black;
font-family: monospace;
height: 3in;
overflow: auto;
padding: 0.5em;
width: 750px;
}
</STYLE>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
seajs.use(["chord", "datav"], function (Chord, DataV) {
// DataV.changeTheme("datav");
var chord = new Chord("chart",{
width: 800
});
DataV.csv("chord.csv", function (source) {
chord.setSource(source);
chord.render();
});
});
</script>
</script>
</body>
</html>