sjengle

Letter Count Bar Chart Template

This is a starter template for the Letter Count Bar Chart example. See that gist for the fully worked out example.

Fork this gist for a starter template to see if you can rebuild the example on your own.

sjengle

Letter Count Bar Chart

In this demo, we asynchronously load a text file, use JavaScript to count the number of times each letter appears in that file, and generate a bar chart showing the letter count in D3.js.

This is meant to be an introductory demo to expose students to HTML, CSS, JavaScript, D3.js, bl.ocks.org, and blockbuilder.org for the first time.

Videos

Below you can find videos related to this demo. Please note that some content is discussed in-class only.

sjengle

Java 11 API Hierarchy

This CSV file was generated by downloading the latest Java 11 SDK Documentation at:

https://www.oracle.com/technetwork/java/javase/documentation/index.html

Then, the directory structure was processed in Python to generate a datafile with the following format:

name	size

sjengle

Mobility Rate by College Bubble Chart

This example will demonstrate how to prototype a bubble chart in Tableau Desktop and then implement a version of that bubble chart in D3.js version 5.

The data comes from Opportunity Insights, which is a "non-partisan, not-for-profit organization based at Harvard University" that puts out public datasets produced for on their research.

We will specifically use data from the Mobility Report Cards project. The dataset is titled "Mobility Report Cards: Preferred Estimates of Access and Mobility Rates by College" and can be accessed via these direct links:

mrc_table1.csv
Codebook-MRC-Table-1.pdf

sjengle

Letter Count Bar Chart

In this demo, we asynchronously load a text file, use JavaScript to count the number of times each letter appears in that file, and generate a bar chart showing the letter count in D3.js v5.

This is meant to be an introductory demo to expose students to HTML, CSS, JavaScript, D3.js, bl.ocks.org, and blockbuilder.org for the first time.

References

This is based off the following example:

sjengle

This gist provides a D3.js friendly "Coauthorship in Network Science" graph as a JSON file. It is used in the example at:

🔗 https://bl.ocks.org/sjengle/f6f522f3969752b384cfec5449eacd98

Source: M. E. J. Newman, Finding Community Structure in Networks using the Eigenvectors of Matrices, Preprint Physics/0605087 (2006). [Data] [Paper]

Original Dataset

The original dataset was retreived from http://www-personal.umich.edu/~mejn/netdata/ under the "Data sets" heading, cited as:

sjengle

Java 8 API Hierarchy

This CSV file was generated by downloading the latest Java 8 SDK Documentation at:

http://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html

Then, the directory structure was processed in Python to generate a datafile with the following format:

name	size

sjengle

license: mit

sjengle

Built with blockbuilder.org

forked from anonymous's block: Adding Click for Tick Labels

sjengle

"RegionType","RegionName","City","State","Metro","CBSATitle","SizeRank","MarketHealthIndex","SellForGain","PrevForeclosed","ForeclosureRatio","ZHVI","MoM","YoY","ForecastYoYPctChange","StockOfREOs","NegativeEquity","Delinquency","DaysOnMarket"
"State","Alaska",,"AK",,,,9.6,85.46,,,263900,0.456794822992006,3.00546448087432,0.0544410761652141,12.2,0.133051017998153,0.0127879928929157,89
"State","Alabama",,"AL",,,,2,79.11,11.2475,5.3108,122700,0.0815660685154976,0.491400491400491,0.033716381418093,25.8,0.163747493402736,0.03344252224344,128
"State","Arkansas",,"AR",,,,4.2,77.42,6.4771,2.5227,115100,0.261324041811847,3.3213644524237,0.0291920069504779,31.5,0.146923643975339,0.030851303923143,110
"State","Arizona",,"AZ",,,,4.6,81.91,7.9186,3.357,204200,0.789733464955577,7.58693361433088,0.0365915768854064,73,0.176208332385921,0.0250151422782854,76
"State","California",,"CA",,,,7.4,88.7,6.412,2.2965,454700,0.530621269069202,6.31283610007014,0.029566747305916,56.8,0.0944519577924134,0.0339595696138096,74
"Stat