69 lines
2.0 KiB
HTML
69 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>D3.js Examples</h1>
|
|
<h2>Simple SVG Examples</h2>
|
|
<svg width="300" height="300">
|
|
<rect width="100" height="200" x="100" y="100"></rect>
|
|
</svg>
|
|
|
|
<svg width="500" height="500">
|
|
<line x1="0" y1="300" x2="400" y2="100" stroke="#ffffff"></line>
|
|
</svg>
|
|
|
|
<svg width="500" height="500">
|
|
<circle r="100" cx="100" cy="100"></circle>
|
|
</svg>
|
|
|
|
<svg width="500" height="500">
|
|
<ellipse rx="100" ry="150" cx="100" cy="150"></ellipse>
|
|
</svg>
|
|
|
|
<svg width="500" height="500">
|
|
<text x="250" y="25">Text Goes here</text>
|
|
</svg>
|
|
<hr>
|
|
<h2>SVGs with text</h2>
|
|
<svg width="500" height="500">
|
|
<circle r="100" cx="250" cy="250"></circle>
|
|
<text x="200" y="200" stroke="#fff">Text Goes Here</text>
|
|
</svg>
|
|
<svg width="500" height="500">
|
|
<g>
|
|
<rect width="300" height="100" x="100" y="200"></rect>
|
|
<text x="200" y="250" stroke="#fff">Text Goes Here</text>
|
|
</g>
|
|
</svg>
|
|
<h2>SVG with D3js (easier)</h2>
|
|
<script src="./plainSVGwithD3.js"></script>
|
|
<hr>
|
|
<h2>Bar Graph (no labels)</h2>
|
|
<script src="./barGraph.js"></script>
|
|
<hr>
|
|
<h2>Data Binding</h2>
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
<script src="./dataBinding.js"></script>
|
|
<hr>
|
|
<h2>Data Binding 2</h2>
|
|
<script src="./dataBinding2.js"></script>
|
|
<hr>
|
|
<h2>Data Loading (CSV)</h2>
|
|
<script src="./dataLoading.js"></script>
|
|
<hr>
|
|
<h2>DOM Manipulation</h2>
|
|
<script src="./domManipulation.js"></script>
|
|
<hr>
|
|
<h2>DOM Selection</h2>
|
|
<p>Second Paragraph</p>
|
|
<p>First Paragraph</p>
|
|
<script src="./domSelection.js"></script>
|
|
<hr>
|
|
</body>
|
|
</html> |