Skip to content

Instantly share code, notes, and snippets.

@emeeks
Created November 16, 2014 17:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save emeeks/72154b33488e427b0898 to your computer and use it in GitHub Desktop.
Ch. 1, Fig. 22 - D3.js in Action

This is the code for Chapter 1, Figure 22 from D3.js in Action showing how CSS rules can be applied to SVG elements.

Note that there is no D3 code or other JavaScript in this example, just vanilla SVG.

<html>
<head>
<title>D3 in Action Chapter 1 - Example 2</title>
<meta charset="utf-8" />
</head>
<style>
svg {
position: absolute;
width: 500px;
height: 500px;
border: 1px lightgray solid;
}
.inactive, .tentative {
stroke: darkgray;
stroke-width: 2px;
stroke-dasharray: 5 5;
}
.tentative {
opacity: .5;
}
.active {
stroke: black;
stroke-width: 4px;
stroke-dasharray: 1;
}
circle {
fill: red;
}
rect {
fill: darkgray;
}
</style>
<body>
<div id="vizcontainer">
<svg>
<path d="M 10,60 40,30 50,50 60,30 70,80" />
<polygon class="inactive" points="80,400 120,400 160,440 120,480 60,460"/>
<g>
<circle cy="100" cx="200" r="30"/>
<rect class="active" x="410" y="200" width="100" height="50" />
</g>
</svg>
</div>
</body>
<footer>
<script>
</script>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment