- babyNameData
Using data from the US Social Security Administration, this file will generate an SVG bubble chart that displays the frequency of the occurrence of that name in a given year. The data goes from 1880-Present (2016) as of Summer 2017.
Check out the live example here.
- babyNamesInitialize(generationData)
Generates the DOM elements into specified DIVs from specified datasets.
- genMultipleBabyNameLists(generationData)
Generate baby name lists for multiple
- genBabyNameList(elementIDs, path)
Generates a list and bubble chart of baby names into the DOM
- babyNameSearchInitialize(generationData)
Initialize HTML elements needed to trigger searches
- getReturnString(maleNameResults, femaleNameResults, sizeOfSet) ⇒
Return back a friendly string that details how popular a given name was for both boys and girls
- getSexAheadString(birthCount) ⇒
Add the ordinal suffix to numbers greater than zero, otherwise return empty string
- generateBabyBubbleChart(babyData, parentDivID)
Generates the D3 SVG to display and renders the bubble chart
- bindBabyNamesToDOM(babyData, parentDivID)
Generates the D3 ordered list from the data.
- removeBabyNamesFromDOM(parentDivID)
Remove the list of names from the DOM
- removeBabyChart(parentDivID)
Remove the bubble chart containing the data regarding names for a year
Using data from the US Social Security Administration, this file will generate an SVG bubble chart that displays the frequency of the occurrence of that name in a given year. The data goes from 1880-Present (2016) as of Summer 2017.
Kind: global variable
Summary: Generate a bubble chart showing frequency of US names by year.
Requires: module:d3.v4.js, module:jquery
Since: 07.04.17
Author: Taylor White whitetc2@gmail.com
Generates the DOM elements into specified DIVs from specified datasets.
Kind: global function
Access: public
| Param | Type | Description |
|---|---|---|
| generationData | Object |
Array of JSON data structured like so: |
| generationData.id | Array.<string> |
An array of div IDs indicating where to render content [0] - The div ID to contain the ordered list [1] - The div ID to containt the bubble chart |
| generationData.path | string |
Path to the file with data to load |
| generationData.selRelated | string |
Indicates if this dataset should be relaoded when changing years |
Generate baby name lists for multiple
Kind: global function
Access: public
| Param | Type | Description |
|---|---|---|
| generationData | Object |
Array of JSON data structured like so: |
| generationData.id | Array.<string> |
An array of div IDs indicating where to render content [0] - The div ID to contain the ordered list [1] - The div ID to containt the bubble chart |
| generationData.path | string |
Path to the file with data to load |
| generationData.selRelated | string |
Indicates if this dataset should be relaoded when changing years |
Generates a list and bubble chart of baby names into the DOM
Kind: global function
Access: public
| Param | Type | Description |
|---|---|---|
| elementIDs | Array.<string> |
An array of html element IDs (length of 2) [0] - The div ID to contain the ordered list [1] - The div ID to containt the bubble chart |
| path | string |
The path to the SSA csv data for a given year |
Initialize HTML elements needed to trigger searches
Kind: global function
Access: public
| Param | Type | Description |
|---|---|---|
| generationData | Object |
Array of JSON data structured like so: |
| generationData.id | Array.<string> |
An array of div IDs indicating where to render content [0] - The div ID to contain the ordered list [1] - The div ID to containt the bubble chart |
| generationData.path | string |
Path to the file with data to load |
| generationData.searchTerm | string |
The term we are to search for |
Return back a friendly string that details how popular a given name was for both boys and girls
Kind: global function
Returns: string - A nicely formatted string detailing the popularity of a name
| Param | Type | Description |
|---|---|---|
| maleNameResults | Array.<Object> |
Contains the search result data for males born in a given year |
| femaleNameResults | Array.<Object> |
Contains the search result data for females born in a given year |
| sizeOfSet | number |
The total size of the number of names born in a given year |
Add the ordinal suffix to numbers greater than zero, otherwise return empty string
Kind: global function
Returns: - The ordinal suffix of a number
| Param | Type | Description |
|---|---|---|
| birthCount | any |
number of babies born |
Generates the D3 SVG to display and renders the bubble chart
Kind: global function
Access: public
| Param | Type | Description |
|---|---|---|
| babyData | Array.<Object> |
An array of JSONs representing the baby data |
| babyData[].Name | Object |
Name of the child being born |
| babyData[].Sex | Object |
The sex of the baby born (can be M/F). |
| babyData[].BirthCount | Object |
The number of babies born thtat year |
| parentDivID | string |
The div to containt the chart |
Generates the D3 ordered list from the data.
Kind: global function
Access: public
| Param | Type | Description |
|---|---|---|
| babyData | Array.<Object> |
The array of JSON data containing names, their sex and frequency |
| babyData[].Name | Object |
Name of the child being born |
| babyData[].Sex | Object |
The sex of the baby born (can be M/F). |
| babyData[].BirthCount | Object |
The number of babies born thtat year |
| parentDivID | string |
The div to render the ordered list into. |
Remove the list of names from the DOM
Kind: global function
Access: public
| Param | Type |
|---|---|
| parentDivID | string |
Remove the bubble chart containing the data regarding names for a year
Kind: global function
Access: public
| Param | Type | Description |
|---|---|---|
| parentDivID | string |
HTML element ID to remove data from |