Skip to content

Instantly share code, notes, and snippets.

@sspboyd
Forked from netzwerg/.block
Created April 19, 2021 20:42
  • 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 sspboyd/a07627d06df6075c92dd01b8dde6f56f to your computer and use it in GitHub Desktop.
D3.js Simple Template
license: apache-2.0
border: no
height: 550
<!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