Basic bar graph of frequency of letters in a piece of text

Developer
Rich Williams
Size
3,636 Kb
Views
12,144
  1. Basic bar graph of frequency of letters in a piece of text Previews
  2. Basic bar graph of frequency of letters in a piece of text HTML Codes
  3. Basic bar graph of frequency of letters in a piece of text CSS Codes
  4. Basic bar graph of frequency of letters in a piece of text JS Codes

How do I make an basic bar graph of frequency of letters in a piece of text?

First basic attempt at bar graph of frequency of letters in a piece of text. Will animate this later maybe using d3 to do some cool graphics.. What is a basic bar graph of frequency of letters in a piece of text? How do you make a basic bar graph of frequency of letters in a piece of text? This script and codes were developed by Rich Williams on 07 December 2022, Wednesday.

Basic bar graph of frequency of letters in a piece of text Previews
IQ Test

Basic bar graph of frequency of letters in a piece of text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic bar graph of frequency of letters in a piece of text</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.0/css/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" ng-app="wordMapChart" ng-controller="wordMapController"> <div class="row"> <div class="large-12 columns"> <h1>The Letter Counter <small>write some text in the textfield&hellip;</small></h1> </div> </div> <div class="row"> <div class="large-12 columns"> <label> <textarea rows="10" ng-model="graphModel" class="graph-model">For Miles by Thrice
I know one day, all our scars will disappear, like the stars at dawn
and all of our pain, will fade away when morning comes
and on that day when we look backwards we will see, that everything is changed
and all of our trials, will be as milestones on the way
and as long as we live, every scar is a bridge to someone's broken heart
and there's no greater love, than that one shed his blood for his friends
on that day all of the scales will swing to set all the wrongs to right
all of our tears, and all of our fears will take to flight
but until then all of our scars will still remain, but we've learned that if we'll
open the wounds and share them then soon they start to heal
as long as we live, every scar is a bridge to someone's broken heart
and there's no greater love, than that one shed his blood for his friends
we must see that every scar is a bridge, and as long as we live
we must open up these wounds
when some one stands in your shoes and will shed his own blood
there's no greater love. we must open up our wounds</textarea> </label> </div> </div> <div class="row"> <div class="large-12 columns"> <div class="bar-group graph-results"> </div> </div> </div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js'></script>
<script src='https://code.jquery.com/jquery-1.11.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic bar graph of frequency of letters in a piece of text - Script Codes CSS Codes

.container { padding: 20px;
}
.bar-group { display: table; min-height: 200px; background-color: #f2f2f2; width: 100%; padding: 50px 5px 0;
}
.bar { display: table-cell; vertical-align: bottom; padding-right: 2px;
}
.inner { background-color: #0078a0; position: relative; cursor: pointer; -webkit-transition: background-color 200ms ease-out; -moz-transition: background-color 200ms ease-out; -ms-transition: background-color 200ms ease-out; -o-transition: background-color 200ms ease-out; transition: background-color 200ms ease-out;
}
.inner:hover { background-color: #007095;
}
.inner-text { text-align: center; width: 100%; position: absolute; top: -40px; line-height: 18px; font-size: 18px;
}

Basic bar graph of frequency of letters in a piece of text - Script Codes JS Codes

/*angular.module("wordMapChart", []) .controller("wordMapController", ["$scope", function ($scope) {
// $scope.list = $scope $scope.list = "test";
}]);*/
// gonna do this in angular later somehow...
(function () { var graphModel = $(".graph-model"), graphResults = $(".graph-results"); var data = {}; graphModel.on("keyup", function () { // update data data = updateData($(this).val()); // display data displayData(); }); // trigger on init graphModel.trigger("keyup"); function displayData () { // clear html graphResults.empty(); var barHTML = "<div class=\"bar\"><div class=\"inner\"><span class=\"inner-text\"></span></div></div>"; // generate html for ( var i in data ) { var height = data[i] * 3; var bar = $(barHTML); bar.find(".inner").css("height", height + "px").find(".inner-text").html(i + "<br /><small>" + data[i] + "</small>"); graphResults.append(bar); } } function updateData (str) { // clean up string (remove non-letters) str = str.toLowerCase().replace(/[^a-z]/g, ""); var arr = str.split("").sort(), obj = {}, i = 0, len = arr.length; for ( ; i < len; i ++ ) { var letter = arr[i]; if ( !obj[letter] ) { obj[letter] = 1; } else { obj[letter] += 1; } } return obj; }
}());
Basic bar graph of frequency of letters in a piece of text - Script Codes
Basic bar graph of frequency of letters in a piece of text - Script Codes
Home Page Home
Developer Rich Williams
Username toneworm
Uploaded December 07, 2022
Rating 3
Size 3,636 Kb
Views 12,144
Do you need developer help for Basic bar graph of frequency of letters in a piece of text?

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!

Rich Williams (toneworm) Script Codes
Name
Chooser
Impossible typing test
Horrible looking fadey transition tabs
Slidey boxes
Bouncing balls
Woll Smoth Tronslotor
Meter timer game
D3 animation test
D3 touchstart mousedown test
D3 simple interaction test
Create amazing Facebook ads 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!