Pocker Mortys dataviz
How do I make an pocker mortys dataviz?
Scatterplot visualization for the game Pocket Mortys. What is a pocker mortys dataviz? How do you make a pocker mortys dataviz? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.
Pocker Mortys dataviz - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pocker Mortys dataviz</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css'>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/nouislider.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="row"> <div class="col s12"> <div class="row main"> <div class="col s12 m3 l2 controls"><a class="btn-floating btn-small teal controls__toggle" id="toggleControls"><i class="material-icons">settings</i></a> <div class="controls__type"> <h6>Type</h6> <p> <input id="normal" type="checkbox" checked="checked"/> <label for="normal">Normal</label> </p> <p> <input id="rock" type="checkbox" checked="checked"/> <label for="rock">Rock</label> </p> <p> <input id="paper" type="checkbox" checked="checked"/> <label for="paper">Paper</label> </p> <p> <input id="scissors" type="checkbox" checked="checked"/> <label for="scissors">Scissors</label> </p> </div> <div class="controls__badges"> <h6>Badges</h6> <div id="badgesNumber"></div> </div> </div> <div class="col s12 m9 l10"> <h6>Chart</h6> <div class="radar" id="radar"></div> <div class="chart" id="chart"></div> </div> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/nouislider.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/radarChart.js'></script> <script src="js/index.js"></script>
</body>
</html>
Pocker Mortys dataviz - Script Codes CSS Codes
body { margin-top: 44px;
}
h6 { color: rgba(128, 128, 128, 0.75); font-weight: 300;
}
label { color: #666;
}
.radar { position: absolute; width: 140px; height: 140px; -webkit-transform: translate(60px, 30px); transform: translate(60px, 30px);
}
.chart { width: 100%; height: 350px; border: 1px solid rgba(128, 128, 128, 0.5); position: relative;
}
.chart__voronoi { fill: none; stroke: none; pointer-events: all;
}
.chart__voronoi:hover + circle { fill: red;
}
.chart__dot { pointer-events: none; stroke: #000; stroke-opacity: .7; fill-opacity: .7;
}
.chart__label { fill: #222; font-size: 15px; font-family: Roboto;
}
.chart__axis path,
.chart__axis line { fill: none; stroke: #ccc; shape-rendering: crispEdges; pointer-events: none;
}
.chart__axis text { fill: #666; font-weight: 300; font-size: 0.75rem;
}
.chart__mortys { position: absolute; left: 0; top: 0; bottom: 0; right: 0; pointer-events: none;
}
.chart__mortys img { max-width: 13px; position: absolute;
}
@media only screen and (min-width: 601px) { .chart__mortys img { max-width: 18px; }
}
@media only screen and (max-width: 600px) { .controls { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); position: absolute; left: 0 !important; top: 0; width: 100%; background: #fff; padding: 1.5rem 0.75rem !important; z-index: 1; opacity: 1; -webkit-transform: translate(0, -115%); transform: translate(0, -115%); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } .controls__type p { display: inline-block; margin: 0 1rem 0 0; } .controls__badges { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 0.75rem; } .controls__badges h6 { margin-bottom: 0.75rem; } .controls__toggle { position: absolute; right: calc(5% - 0.75rem); bottom: calc(-15% + -0.75rem); -webkit-transform: translate(0, 100%) rotate(-90deg); transform: translate(0, 100%) rotate(-90deg); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; cursor: pointer; z-index: 2; pointer-events: all; } .controls__toggle .material-icons { position: relative; -webkit-transition: color 1s ease; transition: color 1s ease; top: 1px; left: 0.5px; } .controls--active { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .controls--active .controls__toggle { -webkit-transform: translate(0, 100%) rotate(180deg); transform: translate(0, 100%) rotate(180deg); } .controls--active .material-icons { color: #13534d; }
}
@media only screen and (min-width: 601px) { .controls { -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; } .controls__toggle { display: none; } .controls__type p { margin-left: 0.75rem; } .controls__badges h6 { margin-top: 1rem; margin-bottom: 0.75rem; } .controls__badges > div { margin-left: 1rem; margin-right: 0.75rem; }
}
.mortyicon-002, .mortyicon-031, .mortyicon-038, .mortyicon-044, .mortyicon-051,
.mortyicon-001, .mortyicon-003, .mortyicon-005, .mortyicon-006, .mortyicon-009,
.mortyicon-010, .mortyicon-011, .mortyicon-012, .mortyicon-013, .mortyicon-014,
.mortyicon-015, .mortyicon-016, .mortyicon-017, .mortyicon-018, .mortyicon-019,
.mortyicon-020, .mortyicon-021, .mortyicon-022, .mortyicon-023, .mortyicon-024,
.mortyicon-025, .mortyicon-026, .mortyicon-027, .mortyicon-028, .mortyicon-029,
.mortyicon-030, .mortyicon-032, .mortyicon-033, .mortyicon-034, .mortyicon-035,
.mortyicon-036, .mortyicon-037, .mortyicon-039, .mortyicon-040, .mortyicon-041,
.mortyicon-042, .mortyicon-043, .mortyicon-045, .mortyicon-046, .mortyicon-047,
.mortyicon-048, .mortyicon-049, .mortyicon-050, .mortyicon-052, .mortyicon-053,
.mortyicon-054, .mortyicon-055, .mortyicon-056, .mortyicon-057, .mortyicon-058,
.mortyicon-059, .mortyicon-060, .mortyicon-061, .mortyicon-062, .mortyicon-063,
.mortyicon-064, .mortyicon-065, .mortyicon-066, .mortyicon-067, .mortyicon-068,
.mortyicon-069, .mortyicon-070, .mortyicon-071, .mortyicon-072, .mortyicon-073,
.mortyicon-074, .mortyicon-075, .mortyicon-076, .mortyicon-077, .mortyicon-078,
.mortyicon-079, .mortyicon-080, .mortyicon-081, .mortyicon-082, .mortyicon-083,
.mortyicon-084, .mortyicon-085, .mortyicon-086, .mortyicon-087, .mortyicon-088,
.mortyicon-089, .mortyicon-090, .mortyicon-091, .mortyicon-092, .mortyicon-093,
.mortyicon-094, .mortyicon-095, .mortyicon-096, .mortyicon-097, .mortyicon-098,
.mortyicon-099, .mortyicon-100, .mortyicon-101, .mortyicon-102, .mortyicon-103,
.mortyicon-104, .mortyicon-105, .mortyicon-106, .mortyicon-107, .mortyicon-108,
.mortyicon-109, .mortyicon-110, .mortyicon-111, .mortyicon-112, .mortyicon-113,
.mortyicon-114, .mortyicon-115, .mortyicon-116, .mortyicon-117, .mortyicon-118,
.mortyicon-119, .mortyicon-120, .mortyicon-121, .mortyicon-122, .mortyicon-123,
.mortyicon-124, .mortyicon-125, .mortyicon-126, .mortyicon-127, .mortyicon-128,
.mortyicon-129, .mortyicon-130, .mortyicon-131, .mortyicon-132, .mortyicon-133,
.mortyicon-134, .mortyicon-135, .mortyicon-136, .mortyicon-137, .mortyicon-138,
.mortyicon-139, .mortyicon-140, .mortyicon-141, .mortyicon-142, .mortyicon-008,
.mortyicon-004, .mortyicon-007 { max-width: 24px; background-size: 100% 100%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/morty-spritesheet.png"); -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s;
}
.mortyicon-002 { background-position: 0 0%; background-size: 100%;
}
.mortyicon-031 { background-position: 0 0.7633%; background-size: 100%;
}
.mortyicon-038 { background-position: 0 1.5266%; background-size: 100%;
}
.mortyicon-044 { background-position: 0 2.2899%; background-size: 100%;
}
.mortyicon-051 { background-position: 0 3.0532%; background-size: 100%;
}
.mortyicon-001 { background-position: 0 3.814441%; background-size: 107.777778%;
}
.mortyicon-003 { background-position: 0 4.523388%; background-size: 107.777778%;
}
.mortyicon-005 { background-position: 0 5.232334%; background-size: 107.777778%;
}
.mortyicon-006 { background-position: 0 5.941281%; background-size: 107.777778%;
}
.mortyicon-009 { background-position: 0 6.650227%; background-size: 107.777778%;
}
.mortyicon-010 { background-position: 0 7.359174%; background-size: 107.777778%;
}
.mortyicon-011 { background-position: 0 8.068121%; background-size: 107.777778%;
}
.mortyicon-012 { background-position: 0 8.777067%; background-size: 107.777778%;
}
.mortyicon-013 { background-position: 0 9.486014%; background-size: 107.777778%;
}
.mortyicon-014 { background-position: 0 10.19496%; background-size: 107.777778%;
}
.mortyicon-015 { background-position: 0 10.903907%; background-size: 107.777778%;
}
.mortyicon-016 { background-position: 0 11.612854%; background-size: 107.777778%;
}
.mortyicon-017 { background-position: 0 12.3218%; background-size: 107.777778%;
}
.mortyicon-018 { background-position: 0 13.030747%; background-size: 107.777778%;
}
.mortyicon-019 { background-position: 0 13.739693%; background-size: 107.777778%;
}
.mortyicon-020 { background-position: 0 14.44864%; background-size: 107.777778%;
}
.mortyicon-021 { background-position: 0 15.157586%; background-size: 107.777778%;
}
.mortyicon-022 { background-position: 0 15.866533%; background-size: 107.777778%;
}
.mortyicon-023 { background-position: 0 16.57548%; background-size: 107.777778%;
}
.mortyicon-024 { background-position: 0 17.284426%; background-size: 107.777778%;
}
.mortyicon-025 { background-position: 0 17.993373%; background-size: 107.777778%;
}
.mortyicon-026 { background-position: 0 18.702319%; background-size: 107.777778%;
}
.mortyicon-027 { background-position: 0 19.411266%; background-size: 107.777778%;
}
.mortyicon-028 { background-position: 0 20.120213%; background-size: 107.777778%;
}
.mortyicon-029 { background-position: 0 20.829159%; background-size: 107.777778%;
}
.mortyicon-030 { background-position: 0 21.538106%; background-size: 107.777778%;
}
.mortyicon-032 { background-position: 0 22.247052%; background-size: 107.777778%;
}
.mortyicon-033 { background-position: 0 22.955999%; background-size: 107.777778%;
}
.mortyicon-034 { background-position: 0 23.664946%; background-size: 107.777778%;
}
.mortyicon-035 { background-position: 0 24.373892%; background-size: 107.777778%;
}
.mortyicon-036 { background-position: 0 25.082839%; background-size: 107.777778%;
}
.mortyicon-037 { background-position: 0 25.791785%; background-size: 107.777778%;
}
.mortyicon-039 { background-position: 0 26.500732%; background-size: 107.777778%;
}
.mortyicon-040 { background-position: 0 27.209679%; background-size: 107.777778%;
}
.mortyicon-041 { background-position: 0 27.918625%; background-size: 107.777778%;
}
.mortyicon-042 { background-position: 0 28.627572%; background-size: 107.777778%;
}
.mortyicon-043 { background-position: 0 29.336518%; background-size: 107.777778%;
}
.mortyicon-045 { background-position: 0 30.045465%; background-size: 107.777778%;
}
.mortyicon-046 { background-position: 0 30.754412%; background-size: 107.777778%;
}
.mortyicon-047 { background-position: 0 31.463358%; background-size: 107.777778%;
}
.mortyicon-048 { background-position: 0 32.172305%; background-size: 107.777778%;
}
.mortyicon-049 { background-position: 0 32.881251%; background-size: 107.777778%;
}
.mortyicon-050 { background-position: 0 33.590198%; background-size: 107.777778%;
}
.mortyicon-052 { background-position: 0 34.299145%; background-size: 107.777778%;
}
.mortyicon-053 { background-position: 0 35.008091%; background-size: 107.777778%;
}
.mortyicon-054 { background-position: 0 35.717038%; background-size: 107.777778%;
}
.mortyicon-055 { background-position: 0 36.425984%; background-size: 107.777778%;
}
.mortyicon-056 { background-position: 0 37.134931%; background-size: 107.777778%;
}
.mortyicon-057 { background-position: 0 37.843878%; background-size: 107.777778%;
}
.mortyicon-058 { background-position: 0 38.552824%; background-size: 107.777778%;
}
.mortyicon-059 { background-position: 0 39.261771%; background-size: 107.777778%;
}
.mortyicon-060 { background-position: 0 39.970717%; background-size: 107.777778%;
}
.mortyicon-061 { background-position: 0 40.679664%; background-size: 107.777778%;
}
.mortyicon-062 { background-position: 0 41.388611%; background-size: 107.777778%;
}
.mortyicon-063 { background-position: 0 42.097557%; background-size: 107.777778%;
}
.mortyicon-064 { background-position: 0 42.806504%; background-size: 107.777778%;
}
.mortyicon-065 { background-position: 0 43.51545%; background-size: 107.777778%;
}
.mortyicon-066 { background-position: 0 44.224397%; background-size: 107.777778%;
}
.mortyicon-067 { background-position: 0 44.933344%; background-size: 107.777778%;
}
.mortyicon-068 { background-position: 0 45.64229%; background-size: 107.777778%;
}
.mortyicon-069 { background-position: 0 46.351237%; background-size: 107.777778%;
}
.mortyicon-070 { background-position: 0 47.060183%; background-size: 107.777778%;
}
.mortyicon-071 { background-position: 0 47.76913%; background-size: 107.777778%;
}
.mortyicon-072 { background-position: 0 48.478077%; background-size: 107.777778%;
}
.mortyicon-073 { background-position: 0 49.187023%; background-size: 107.777778%;
}
.mortyicon-074 { background-position: 0 49.89597%; background-size: 107.777778%;
}
.mortyicon-075 { background-position: 0 50.604916%; background-size: 107.777778%;
}
.mortyicon-076 { background-position: 0 51.313863%; background-size: 107.777778%;
}
.mortyicon-077 { background-position: 0 52.02281%; background-size: 107.777778%;
}
.mortyicon-078 { background-position: 0 52.731756%; background-size: 107.777778%;
}
.mortyicon-079 { background-position: 0 53.440703%; background-size: 107.777778%;
}
.mortyicon-080 { background-position: 0 54.149649%; background-size: 107.777778%;
}
.mortyicon-081 { background-position: 0 54.858596%; background-size: 107.777778%;
}
.mortyicon-082 { background-position: 0 55.567543%; background-size: 107.777778%;
}
.mortyicon-083 { background-position: 0 56.276489%; background-size: 107.777778%;
}
.mortyicon-084 { background-position: 0 56.985436%; background-size: 107.777778%;
}
.mortyicon-085 { background-position: 0 57.694382%; background-size: 107.777778%;
}
.mortyicon-086 { background-position: 0 58.403329%; background-size: 107.777778%;
}
.mortyicon-087 { background-position: 0 59.112276%; background-size: 107.777778%;
}
.mortyicon-088 { background-position: 0 59.821222%; background-size: 107.777778%;
}
.mortyicon-089 { background-position: 0 60.530169%; background-size: 107.777778%;
}
.mortyicon-090 { background-position: 0 61.239115%; background-size: 107.777778%;
}
.mortyicon-091 { background-position: 0 61.948062%; background-size: 107.777778%;
}
.mortyicon-092 { background-position: 0 62.657009%; background-size: 107.777778%;
}
.mortyicon-093 { background-position: 0 63.365955%; background-size: 107.777778%;
}
.mortyicon-094 { background-position: 0 64.074902%; background-size: 107.777778%;
}
.mortyicon-095 { background-position: 0 64.783848%; background-size: 107.777778%;
}
.mortyicon-096 { background-position: 0 65.492795%; background-size: 107.777778%;
}
.mortyicon-097 { background-position: 0 66.201742%; background-size: 107.777778%;
}
.mortyicon-098 { background-position: 0 66.910688%; background-size: 107.777778%;
}
.mortyicon-099 { background-position: 0 67.619635%; background-size: 107.777778%;
}
.mortyicon-100 { background-position: 0 68.328581%; background-size: 107.777778%;
}
.mortyicon-101 { background-position: 0 69.037528%; background-size: 107.777778%;
}
.mortyicon-102 { background-position: 0 69.746475%; background-size: 107.777778%;
}
.mortyicon-103 { background-position: 0 70.455421%; background-size: 107.777778%;
}
.mortyicon-104 { background-position: 0 71.164368%; background-size: 107.777778%;
}
.mortyicon-105 { background-position: 0 71.873314%; background-size: 107.777778%;
}
.mortyicon-106 { background-position: 0 72.582261%; background-size: 107.777778%;
}
.mortyicon-107 { background-position: 0 73.291208%; background-size: 107.777778%;
}
.mortyicon-108 { background-position: 0 74.000154%; background-size: 107.777778%;
}
.mortyicon-109 { background-position: 0 74.709101%; background-size: 107.777778%;
}
.mortyicon-110 { background-position: 0 75.418047%; background-size: 107.777778%;
}
.mortyicon-111 { background-position: 0 76.126994%; background-size: 107.777778%;
}
.mortyicon-112 { background-position: 0 76.835941%; background-size: 107.777778%;
}
.mortyicon-113 { background-position: 0 77.544887%; background-size: 107.777778%;
}
.mortyicon-114 { background-position: 0 78.253834%; background-size: 107.777778%;
}
.mortyicon-115 { background-position: 0 78.96278%; background-size: 107.777778%;
}
.mortyicon-116 { background-position: 0 79.671727%; background-size: 107.777778%;
}
.mortyicon-117 { background-position: 0 80.380673%; background-size: 107.777778%;
}
.mortyicon-118 { background-position: 0 81.08962%; background-size: 107.777778%;
}
.mortyicon-119 { background-position: 0 81.798567%; background-size: 107.777778%;
}
.mortyicon-120 { background-position: 0 82.507513%; background-size: 107.777778%;
}
.mortyicon-121 { background-position: 0 83.21646%; background-size: 107.777778%;
}
.mortyicon-122 { background-position: 0 83.925406%; background-size: 107.777778%;
}
.mortyicon-123 { background-position: 0 84.634353%; background-size: 107.777778%;
}
.mortyicon-124 { background-position: 0 85.3433%; background-size: 107.777778%;
}
.mortyicon-125 { background-position: 0 86.052246%; background-size: 107.777778%;
}
.mortyicon-126 { background-position: 0 86.761193%; background-size: 107.777778%;
}
.mortyicon-127 { background-position: 0 87.470139%; background-size: 107.777778%;
}
.mortyicon-128 { background-position: 0 88.179086%; background-size: 107.777778%;
}
.mortyicon-129 { background-position: 0 88.888033%; background-size: 107.777778%;
}
.mortyicon-130 { background-position: 0 89.596979%; background-size: 107.777778%;
}
.mortyicon-131 { background-position: 0 90.305926%; background-size: 107.777778%;
}
.mortyicon-132 { background-position: 0 91.014872%; background-size: 107.777778%;
}
.mortyicon-133 { background-position: 0 91.723819%; background-size: 107.777778%;
}
.mortyicon-134 { background-position: 0 92.432766%; background-size: 107.777778%;
}
.mortyicon-135 { background-position: 0 93.141712%; background-size: 107.777778%;
}
.mortyicon-136 { background-position: 0 93.850659%; background-size: 107.777778%;
}
.mortyicon-137 { background-position: 0 94.559605%; background-size: 107.777778%;
}
.mortyicon-138 { background-position: 0 95.268552%; background-size: 107.777778%;
}
.mortyicon-139 { background-position: 0 95.977499%; background-size: 107.777778%;
}
.mortyicon-140 { background-position: 0 96.686445%; background-size: 107.777778%;
}
.mortyicon-141 { background-position: 0 97.395392%; background-size: 107.777778%;
}
.mortyicon-142 { background-position: 0 98.104338%; background-size: 107.777778%;
}
.mortyicon-008 { background-position: 0 98.676414%; background-size: 110.227273%;
}
.mortyicon-004 { background-position: 0 99.3529%; background-size: 112.790698%;
}
.mortyicon-007 { background-position: 0 100%; background-size: 112.790698%;
}
Pocker Mortys dataviz - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
console.clear();
var pokemortyDex = function () { function pokemortyDex(options) { _classCallCheck(this, pokemortyDex); try { this.sliderId = options.sliderId; this.dataURL = options.dataURL; this.controlsToggle = options.controlsToggle; this.mortySpritesheet = options.mortySpritesheet; this.chartWrapperId = options.chartWrapperId; this.filterObject = { badges: [0, 45], type: { rock: true, paper: true, scissors: true, normal: true } }; } catch (err) { return console.log('Missing options: ' + err); } } pokemortyDex.prototype.init = function init() { this.renderUI(); this.fetch(); }; pokemortyDex.prototype.createChart = function createChart() { var _this = this; var chartWrapper = document.querySelector(this.chartWrapperId); this.config = { m: { t: 20, r: 20, b: 30, l: 40 }, w: chartWrapper.offsetWidth - 20 - 40, h: chartWrapper.offsetHeight - 20 - 30, padding: 1, radius: chartWrapper.offsetWidth * 0.01 }; this.y = d3.scaleLinear().range([this.config.h, 0]); this.x = d3.scaleLinear().range([0, this.config.w]); this.radar = d3.select('#radar').append('svg').attr('width', 140).attr('height', 140).append('g'); this.svg = d3.select(this.chartWrapperId).append('svg').attr('class', 'chart__svg').attr('width', this.config.w + this.config.m.l + this.config.m.r).attr('height', this.config.h + this.config.m.t + this.config.m.b).append('g').attr('transform', 'translate(' + this.config.m.l + ',' + this.config.m.t + ')'); this.mortys = d3.select(this.chartWrapperId).append('div').attr('class', 'chart__mortys').append('div').style('transform', 'translate( ' + this.config.m.l + 'px,' + this.config.m.t + 'px)').style('width', this.config.w + 'px').style('height', this.config.h + 'px'); this.x.domain(d3.extent(this.data, function (d) { return d.Total; })); this.y.domain(d3.extent(this.data, function (d) { return d.XP; })); this.svg.append('g').attr('transform', 'translate(' + this.config.w / 2 + ', 0)').append('text').attr('class', 'chart__label').style('text-anchor', 'middle'); this.svg.append('g').attr('class', 'chart__x chart__axis').attr('transform', 'translate(0, ' + this.config.h + ')').call(d3.axisBottom(this.x)).append('text').attr('class', 'chart__label').attr('x', this.config.w).attr('y', -6).style('text-anchor', 'end').text('Total'); this.svg.append('g').attr('class', 'chart__y chart__axis').call(d3.axisLeft(this.y)).append('text').attr('class', 'chart__label').attr('transform', 'rotate(-90)').attr('y', 6).attr('dy', '.7em').style('text-anchor', 'end').text('Base XP'); this.nodes = this.svg.append('g').attr('class', 'chart__nodes'); this.updateChart(); d3.select(window).on("resize", function () { $(_this.chartWrapperId).html(''); _this.createChart(); }); }; pokemortyDex.prototype.updateChart = function updateChart() { var _this2 = this; var typeCondition = false; var t = d3.transition().duration(750); var filteredData = this.data.filter(function (d, i) { var badgeCondition = d.Badges >= _this2.filterObject.badges[0] && d.Badges <= _this2.filterObject.badges[1]; switch (d.Type) { case 'Rock': typeCondition = _this2.filterObject.type.rock; break; case 'Paper': typeCondition = _this2.filterObject.type.paper; break; case 'Scissors': typeCondition = _this2.filterObject.type.scissors; break; case 'Normal': typeCondition = _this2.filterObject.type.normal; break; default: break; } if (badgeCondition && typeCondition) { return d; } }); this.x.domain(d3.extent(filteredData, function (d) { return d.Total; })); this.y.domain(d3.extent(filteredData, function (d) { return d.XP; })); filteredData.forEach(function (d) { d.x = _this2.x(d.Total); d.y = _this2.y(d.XP); d.radius = _this2.config.radius; }); this.nodes.selectAll('*').remove(); this.mortys.selectAll('*').remove(); var radarChartOptions = { w: 100, h: 100, levels: 2, maxValue: d3.max(this.data, function (d) { return d.Total; }) / 4, roundStrokes: true, color: d3.scaleOrdinal(d3.schemeCategory20c) }; this.cells = this.nodes.selectAll('g').data(filteredData).enter().append('g'); this.simulation = d3.forceSimulation(this.data).force('x', d3.forceX(function (d) { return d.x; }).strength(1)).force('y', d3.forceY(function (d) { return d.y; }).strength(1)).force('collide', d3.forceCollide(this.config.radius * 1.5)).stop(); for (var i = 0; i < 100; ++i) { this.simulation.tick(); }var voronoiW = [-this.config.m.l, -this.config.m.t], voronoiH = [+this.config.w + this.config.m.r, this.config.h + this.config.m.t]; this.cells.data(d3.voronoi().extent([voronoiW, voronoiH]).x(function (d) { return d.x; }).y(function (d) { return d.y; }).polygons(filteredData)); this.cells.append('path').attr('class', 'chart__voronoi').attr('d', function (d) { return 'M' + d.join('L') + 'Z'; }).on('mouseenter', function (d, si) { var i = d.data['#'];i = '.mortyicon-' + (i <= 999 ? ("00" + i).slice(-3) : i); var radarData = []; d3.select(i).style('transform', 'scale(3)'); d3.select(i).style('z-index', '2'); d3.select('.chart__label').text(d.data['Name']); radarData.push([{ axis: 'ATK', value: d.data['ATK'] }, { axis: 'DEF', value: d.data['DEF'] }, { axis: 'SPD', value: d.data['SPD'] }, { axis: 'HP', value: d.data['HP'] }]); d3.select("#radar").html(''); RadarChart("#radar", radarData, radarChartOptions); }).on('mouseleave', function (d) { var i = d.data['#'];i = '.mortyicon-' + (i <= 999 ? ("00" + i).slice(-3) : i); d3.select(i).style('transform', 'scale(1)'); d3.select(i).style('z-index', '1'); }); // this.cells.append('circle').attr('class', 'chart__dot') // .attr('r', d => d.data.radius) // .attr('cx', d => d.data.x).attr('cy', d => d.data.y); this.mortys.selectAll('img').data(filteredData).enter().append('img').attr('src', this.mortySpritesheet).attr('class', function (d) { var i = d['#']; return 'mortyicon-' + (i <= 999 ? ("00" + i).slice(-3) : i); }).attr('style', function (d, i) { var l = d.x - 6, t = d.y - 7; return 'left: ' + l + 'px; top: ' + t + 'px;'; }); }; pokemortyDex.prototype.fetch = function fetch() { var _this3 = this; d3.json(this.dataURL, function (err, data) { if (err) { return console.log(err); } _this3.data = data.data; _this3.createChart(); }); }; pokemortyDex.prototype.renderUI = function renderUI() { var _this4 = this; var slider = document.querySelector(this.sliderId); var controlsToggle = $(this.controlsToggle); noUiSlider.create(slider, { start: [0, 45], connect: true, step: 1, range: { 'min': 0, 'max': 45 }, format: wNumb({ decimals: 0 }) }); controlsToggle.on('click', function (ev) { ev.currentTarget.parentNode.classList.toggle('controls--active'); }); slider.noUiSlider.on('change', function (values, handle) { _this4.updateFilterObject('badges', values); }); ['#normal', '#rock', '#paper', '#scissors'].forEach(function (id) { $(id).on('change', function (ev) { _this4.updateFilterObject(id.replace('#', ''), ev.currentTarget.checked); }); }); }; pokemortyDex.prototype.updateFilterObject = function updateFilterObject(input, values) { this.filteredData = this.data; if (this.data) { switch (input) { case 'badges': this.filterObject.badges = [+values[0], +values[1]]; break; case 'rock': case 'paper': case 'scissors': case 'normal': this.filterObject.type[input] = values; break; case 'rare': this.filterObject.rare = values; break; default: break; } } this.updateChart(); }; return pokemortyDex;
}();
var pkmydex = new pokemortyDex({ sliderId: '#badgesNumber', chartWrapperId: '#chart', controlsToggle: '#toggleControls', dataURL: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/mortys.json', mortySpritesheet: ['data:image/png;base64,', 'iVBORw0KGgoAAAANSUhEUgAAAGEAAABhAQMAAAD8yF3gAAAAA1BMVEX///+', 'nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRQDkAAAVOAAF3d96LAAAAAElFTkSuQmCC'].join('')
});
pkmydex.init();
Developer | Rafael Abensur |
Username | abensur |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 13,940 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Tesseract experiments | 3,557 Kb |
Algorithm practice | 5,620 Kb |
Divinding circle | 2,390 Kb |
React Loader | 9,370 Kb |
Isocubes | 4,776 Kb |
A Pen by Rafael Abensur | 5,301 Kb |
Food Seasons | 6,522 Kb |
D3.js Brazil Economic Underwater | 4,368 Kb |
Roundout Ribbon | 2,907 Kb |
Pocker Mortys dataviz | 13,940 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Twitch TV | Natester13 | 4,488 Kb |
MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!