Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Demo of making a D3 chart
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
This space intentionally left blank. Test
<div class="container">
<svg class="graph"></svg>
<script src=""></script>
var svg =".graph");
svg.attr("width", 120)
.attr("height", 100);
var data = [1, 2, 3];
//margin pattern:
var chartSize = {
x: 30,
y: 10,
width: 70,
height: 70
var xScale = d3.scaleLinear()
.domain([0, data.length])
.range([0, chartSize.width]);
var min = Math.min(;
var max = Math.max(;
if (min > 0) min = 0;
var yScale = d3.scaleLinear()
.domain([min, max])
.range([chartSize.height, 0]);
var xAxis = d3.axisBottom()
var yAxis = d3.axisLeft()
// .tickFormat(d => d)
.attr("transform", `translate(${chartSize.x}, ${chartSize.y + chartSize.height})`)
.attr("transform", `translate(${chartSize.x}, ${chartSize.y})`)
.attr("x", (_, i) => chartSize.x + xScale(i) + 1)
.attr("y", d => chartSize.y + yScale(d))
.attr("height", d => chartSize.height - yScale(d))
.attr("width", xScale(1) - 2);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.