-
-
Save artbikes/ed27a14967b7ed68a842bf16114e9425 to your computer and use it in GitHub Desktop.
Draws the bitwise AND graph
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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