Skip to content

Instantly share code, notes, and snippets.

@lvngd
Created November 20, 2020 17:33
Show Gist options
  • Save lvngd/10334c4717e419a059626a5a99cb4a39 to your computer and use it in GitHub Desktop.
Save lvngd/10334c4717e419a059626a5a99cb4a39 to your computer and use it in GitHub Desktop.
How to build a pictogram grid in D3.js. Demo with SVG circles.
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v4.js"></script>
</head>
<body>
<div id='grid-container'>
<div id='grid-chart'></div>
</div>
</body>
<script>
var drawGraph = function(){
//number of circles to color in to visualize percent
var percentNumber = 92;
//variables for the font family, and some colors
var fontFamily = "helvetica";
var twitterFill = "#4D908E";
var twitterFillActive = "#adf7b6";
var svgBackgroundColor = '#264653';
//width and height of the SVG
const width = 500;
const height = 500;
//create an svg with width and height
var svg = d3.select('#grid-chart')
.append('svg')
.attr("width", width)
.attr("height", height)
.style('background-color', svgBackgroundColor);
//10 rows and 10 columns
var numRows = 10;
var numCols = 10;
//x and y axis scales
var y = d3.scaleBand()
.range([0,250])
.domain(d3.range(numRows));
var x = d3.scaleBand()
.range([0, 250])
.domain(d3.range(numCols));
//the data is just an array of numbers for each cell in the grid
var data = d3.range(numCols*numRows);
//container to hold the grid
var container = svg.append("g")
.attr("transform", "translate(135,130)");
container.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("id", function(d){return "id"+d;})
.attr('cx', function(d){return x(d%numCols);})
.attr('cy', function(d){return y(Math.floor(d/numCols));})
.attr('r', 12)
.attr('fill', function(d){return d < percentNumber ? twitterFillActive : twitterFill;})
.style('stroke', 'black');
}
//call function to draw the graph
drawGraph();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment