Brazil's funds alpha

Developer
Rafael Abensur
Size
4,276 Kb
Views
22,264
  1. Brazil's funds alpha Previews
  2. Brazil's funds alpha HTML Codes
  3. Brazil's funds alpha CSS Codes
  4. Brazil's funds alpha JS Codes

How do I make an brazil's funds alpha?

This graph shows the alpha (A measure of performance on a risk-adjusted basis) of Brazil's funds.. What is a brazil's funds alpha? How do you make a brazil's funds alpha? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.

Brazil's funds alpha Previews
IQ Test

Brazil's funds alpha - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Brazil's funds alpha</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="alpha-de-fundos"> <table class="alpha-de-fundos__table"> <tr> <th>Nome</th> <th>CNPJ</th> <th>Alpha</th> </tr> <tr> <td id="name">-</td> <td id="cnpj">-</td> <td id="alphaValue">-</td> </tr> </table> <div class="alpha-de-fundos__svg" id="alpha"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Brazil's funds alpha - Script Codes CSS Codes

.alpha-de-fundos { width: 100%;
}
.alpha-de-fundos__svg { width: inherit; text-align: center;
}
.alpha-de-fundos .axis path,
.alpha-de-fundos .axis line { fill: none; stroke: #bfbfbf; stroke-width: 1px; shape-rendering: crispEdges;
}
.alpha-de-fundos .axis text { font-family: monospace; font-size: .875rem; fill: #666;
}
.alpha-de-fundos .dot { stroke: #000; stroke-opacity: .7; fill-opacity: .7;
}
.alpha-de-fundos__table { margin: 0 auto; width: 80%; table-layout: fixed;
}
.alpha-de-fundos__table tr:first-of-type { border-bottom: 1px solid #e5e5e5;
}
.alpha-de-fundos__table tr:last-of-type { height: 2.5rem;
}
.alpha-de-fundos__table th, .alpha-de-fundos__table td { padding: .5rem 1rem;
}
.alpha-de-fundos__table th:first-of-type, .alpha-de-fundos__table td:first-of-type { padding-left: 0;
}
.alpha-de-fundos__table th:last-of-type, .alpha-de-fundos__table td:last-of-type { padding-right: 0;
}
.alpha-de-fundos__table th { padding-bottom: 0;
}
.alpha-de-fundos__table th { color: #666; font-size: .75rem; font-family: Helvetica; margin: 0 2rem; text-align: right;
}
.alpha-de-fundos__table th:first-of-type { text-align: left; width: 60%; max-width: 60%;
}
.alpha-de-fundos__table td { color: #666; font-size: .875rem; font-weight: bold; text-align: right; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.alpha-de-fundos__table td:first-of-type { text-align: left; width: 60%; max-width: 60%;
}

Brazil's funds alpha - Script Codes JS Codes

var $name = $("#name"), $cnpj = $("#cnpj"), $alpha = $("#alphaValue");
var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 800 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, padding = 2, radius = 3;
var x = d3.scale.linear() .range([0, width]);
var y = d3.scale.linear() .range([height, 0]);
var color = d3.scale.linear() .range(['#f05350','#2bd2a3']);
var formatPercent = d3.format(".0p");
var xAxis = d3.svg.axis() .scale(x) .ticks(4) .tickSize(-height) .tickPadding(8) .orient("bottom");
var yAxis = d3.svg.axis() .scale(y) .tickValues([0]) .tickSize(-width) .tickPadding(5) .orient("left");
var svg = d3.select("#alpha").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr('viewBox','0 0 '+ (width + margin.left + margin.right) +' '+ (height + margin.top + margin.bottom) +' ') .attr('preserveAspectRatio','xMaxYMax') .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/alpha.json", function(error, data) { var xVar = "alpha", yVar = "alpha"; var extent = d3.max(data, function(d, i) { return i; }); xAxis .tickValues([extent/4, extent/2, 3*extent/4]) .tickFormat(function (d) { return d/extent*100 + "%"; }); data.sort(function (a, b) { return a.alpha - b.alpha; }); data.forEach(function(d) { d[xVar] = +d[xVar]; d[yVar] = +d[yVar]; }); var force = d3.layout.force() .nodes(data) .size([width, height]) .on("tick", tick) .charge(-3) .gravity(0) .chargeDistance(6); y.domain(d3.extent(data, function(d) { return d[xVar]; })).nice(); x.domain(d3.extent(data, function(d, i) { return i; })); color.domain(d3.extent(data, function(d) { return d.alpha; })) // Set initial positions data.forEach(function(d) { d.x = x(d[xVar]); d.y = y(d[yVar]); d.color = color(d.alpha); d.radius = radius; }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end"); var node = svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", radius) .attr("cx", function(d, i) { return x(i); }) .attr("cy", function(d) { return y(d[yVar]); }) .style("fill", function(d) { return d.color; }) .on('mouseover', function(d) { $name.html(d.name); $cnpj.html(d.cnpj); $alpha.html(d.alpha).css('color', d.color); d3.select(this) .attr("r", radius*2); }) .on("mouseout", function (d) { d3.select(this) .attr("r", radius); }); force.start(); function tick(e) { node.each(moveTowardDataPosition(e.alpha)); node.each(collide(e.alpha)); node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } function moveTowardDataPosition(alpha) { return function(d, i) { d.x += (x(i) - d.x) * 0.1 * alpha; d.y += (y(d[yVar]) - d.y) * 0.1 * alpha; }; } // Resolve collisions between nodes. function collide(alpha) { var quadtree = d3.geom.quadtree(data); return function(d) { var r = d.radius + radius + padding, nx1 = d.x - r, nx2 = d.x + r, ny1 = d.y - r, ny2 = d.y + r; quadtree.visit(function(quad, x1, y1, x2, y2) { if (quad.point && (quad.point !== d)) { var x = d.x - quad.point.x, y = d.y - quad.point.y, l = Math.sqrt(x * x + y * y), r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding; if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l; d.y -= y *= l; quad.point.x += x; quad.point.y += y; } } return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); }; }
});
Brazil's funds alpha - Script Codes
Brazil's funds alpha - Script Codes
Home Page Home
Developer Rafael Abensur
Username abensur
Uploaded September 12, 2022
Rating 3
Size 4,276 Kb
Views 22,264
Do you need developer help for Brazil's funds alpha?

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!

Rafael Abensur (abensur) Script Codes
Name
Pocker Mortys dataviz
Tesseract experiments
D3.js with CSS sprites
React Loader
Algorithm practice
Isocubes
D3.js Brazil Economic Underwater
Food Seasons
Chart tooltip example
Amadurou Logo Animation
Create amazing captions with AI!

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!