Last active
September 19, 2016 19:25
-
-
Save cedricbellet/f04640d452f3acc895e7dda6a258cc80 to your computer and use it in GitHub Desktop.
Representation of the bitwise AND pattern
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
| . |
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
| body { | |
| background-color: #F7F7F7; | |
| text-align: center; | |
| } | |
| .title { | |
| text-align: center; | |
| margin-top: 18rem; | |
| } | |
| #svg { | |
| background-color: white; | |
| width: 700px; | |
| height: 700px; | |
| border: 1px solid black; | |
| margin: 0 auto; | |
| left: 0; | |
| right: 0; | |
| } |
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
| /*jslint node: true */ | |
| /*jshint esversion: 6 */ | |
| 'use strict'; | |
| // PARAMETERS | |
| const n = 2048; | |
| const side = 700 / n; | |
| const magma = d3.scaleSequential(function (t) { | |
| return d3.interpolateMagma(t / n); | |
| }); | |
| // FUNCTIONS | |
| /** | |
| * Generate n^2 data points for the AND operation | |
| */ | |
| function generateData(n) { | |
| let data = []; | |
| for (let i = 0; i < n; i++) { | |
| for (let j = 0; j <= i; j++) { | |
| data.push({ | |
| x: i, | |
| y: j, | |
| z: i & j, | |
| }); | |
| // Copy data to the other side of the identity | |
| if (i != j) { | |
| data.push({ | |
| x: j, | |
| y: i, | |
| z: i & j, | |
| }); | |
| } | |
| } | |
| } | |
| return data; | |
| } | |
| /** | |
| * Draw the chart | |
| */ | |
| function drawChart(data) { | |
| let svg = d3.select('#svg'); | |
| svg.selectAll('rect') | |
| .data(data) | |
| .enter() | |
| .append('rect') | |
| .attr('x', function(d) { return d.x * side }) | |
| .attr('y', function(d) { return 700 - side - d.y * side }) | |
| .attr('height', side) | |
| .attr('width', side) | |
| .attr('fill', function(d) { return magma(d.z) }); | |
| } | |
| // EXECUTION | |
| drawChart(generateData(n)); |
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> | |
| <head> | |
| <!-- Basic Information --> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" /> | |
| <title>bitwise</title> | |
| <link rel="stylesheet" href="./file.css" /> | |
| <script src="bower_components/d3/d3.min.js" type="text/javascript" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <svg id="svg"></svg> | |
| <script src="./file.js"></script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment