Star
You must be signed in to star a gist
D3.js Simple Template
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
license: apache-2.0 | |
border: no | |
height: 550 |
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Simple Template</title> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
h2 { | |
margin-top: 0; | |
color: grey; | |
} | |
svg { | |
background-color: steelblue; | |
} | |
.content { | |
fill: lightsteelblue; | |
} | |
.label { | |
fill: white; | |
font-size: x-large; | |
font-weight: bolder; | |
} | |
</style> | |
</head> | |
<body> | |
<h2>A scaffold for simple visualizations</h2> | |
<svg width="800" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.js"></script> | |
<script> | |
const margin = {top: 50, right: 50, bottom: 50, left: 50}; | |
const svg = d3.select("svg"); | |
const width = +svg.attr("width") - margin.left - margin.right; | |
const height = +svg.attr("height") - margin.top - margin.bottom; | |
// content area of your visualization (note: g elements do NOT have dimensions) | |
const vis = svg.append("g") | |
.attr("transform", `translate(${margin.left},${margin.top})`); | |
// Everything below is for illustration purposes | |
// delete it and replace it with your own visualization (by appending to `vis`) | |
// -- ▼ DELETE FROM HERE ▼ -- | |
// illustrate content area dimensions (makes container g element grow accordingly) | |
const rect = vis.append("rect") | |
.attr("class", "content") | |
.attr("width", width) | |
.attr("height", height); | |
// illustrate left/right margins | |
const xScale = d3.scaleLinear() | |
.domain([margin.left, margin.left + width]) | |
.range([0, width]); | |
vis.append("g").call(d3.axisTop(xScale)); | |
// illustrate top/bottom margins | |
const yScale = d3.scaleLinear() | |
.domain([margin.top, margin.top + height]) | |
.range([0, height]); | |
vis.append("g").call(d3.axisLeft(yScale)); | |
// Tip: name your selections and work with CSS classes | |
const label = vis.append("g") | |
.attr("class", "label"); | |
const data = ["Content", "Area"]; | |
label.selectAll("text") | |
.data(data) | |
.enter() | |
.append("text") | |
.text(d => d) | |
.attr("x", width / 2) | |
.attr("y", (d, i) => height / 2 + (i * 20)) | |
.attr("text-anchor", "middle"); | |
// -- ▲ DELETE UNTIL HERE ▲ -- | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment