D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
huangy22
Full window
Github gist
Homework 1 for Visualization
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.js"></script> <title>Education attainment and Income</title> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } html, body {overflow: auto;} p {text-indent: 30px; margin-left: 30px; margin-right: 30px;} h1{text-indent: 20px; margin-left: 5px; margin-right: 5px;} h2{text-indent: 30px; margin-left: 5px; margin-right: 5px;} h3{text-indent: 40px; margin-left: 5px; margin-right: 5px;} svg {margin-left:auto; margin-right:auto; display: block;} line {stroke:#ddd;shape-rendering: crispEdges; } .axis {shape-rendering: crispEdges;} .axis line{stroke:#000; stroke-width:1;} .axis path{stroke:#000; stroke-width:1;} .domain {fill:none; stroke:#000; stroke-width:1.5;} .axis .minor{fill:none; stroke-width:1;} .axis text{font:sans-serif; font-size: 12pt; font-weight: bold;} .button { background-color: #4CAF50; /* Green */ color: white; padding: 10px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; } table { font-size: 10pt; font-family: arial, sans-serif; border-collapse: collapse; width: 80%; margin-left: 40px; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } /* style sheet for "A4" printing */ @media print and (width: 21cm) and (height: 29.7cm) { @page { margin: 3cm; } } </style> </head> <body> <h1>Average/Median Monthly Income and Working Time in the Preceding Four Months by Education, 2009 (Table 2A, 2J)</h1> <p>This dataset includes the information of the average and median income level and working time in people with different education level at age 18 and over.</p> <p>Data source: US Census Bureau, Survey of Income and Program Participation, 2008 Panel. For more information on sampling and nonsampling error see https://www.sipp.census.gov/sipp/source.html</p> <h2>Statistics and Correlations</h2> <p>This table shows the statistics(mean, standard deviation, min, max, 25%, 50%, 75% quantile) of the numeric variables.</p> <div id="table_statistics"> </div> <script type="text/javascript"charset="utf-8"> d3.text("stat_2A_2J.csv", function(data) { var parsedCSV = d3.csv.parseRows(data); var container = d3.select("#table_statistics") .append("table") .selectAll("tr") .data(parsedCSV).enter() .append("tr") .selectAll("td") .data(function(d) { return d; }).enter() .append("td") .text(function(d) { return d; }); }); </script> <p>The following table shows the correlation between the numeric variables. The total income, full-time earning, all-job earning, and working time all have strong positive correlation with each other. While the number of people has a relatively weak negative correlation with the other variables.</p> <div id="table_correlations"></div> <script type="text/javascript"charset="utf-8"> d3.text("corr_2A_2J.csv", function(data) { var parsedCSV = d3.csv.parseRows(data); var container = d3.select("#table_correlations") .append("table") .selectAll("tr") .data(parsedCSV).enter() .append("tr") .selectAll("td") .data(function(d) { return d; }).enter() .append("td") .text(function(d) { return d; }); }); </script> <h2>Visualizations</h2> <h3>The number of people with different Education Attainment</h3> <p>This plot shows the number of people (in thousands) with different education attainment in the study. The number of people is in thousands. From the figure, we can see that high school graduate has the highest population, while Bachelor degree is the second highest.</p> <div id="bar_edu_number"></div> <script type="text/javascript" src="plot_2AJ_edu_number.js"></script> <!-- <p>Caption:</p> --> <h3>Monthly Income, Full time job Earnings, Earnings for all jobs by Education (Interactive)</h3> <p>In the following plot, it shows the monthly income, full-time earnings, and all-job earnings with both average(mean) and median value. The monthly incomes and earnings are in US dollars. Earnings apply to employed population only, while Monthly income includes all kinds of incomes. Both the average value and median are shown in the following figures. The median value is generally lower than the average, indicating that there are some outliers with much higher incomes/earnings in the sample. Thus the median value is a more representative statistic than the average value. </p> <p>Press the button to see the plot for the corresponding variable:</p> <p><g> <button class="button" id="button-0" onClick="Plot_edu_income.plot(0)">Monthly Income Mean</button> <button class="button" id="button-1" onClick="Plot_edu_income.plot(1)">Monthly Income Median</button> <button class="button" id="button-2" onClick="Plot_edu_income.plot(2)">Full-time job Earning Mean</button> <button class="button" id="button-3" onClick="Plot_edu_income.plot(3)">Full-time job Earning Median</button> <button class="button" id="button-4" onClick="Plot_edu_income.plot(4)">All job Earning Mean</button> <button class="button" id="button-5" onClick="Plot_edu_income.plot(5)">All job Earning Median</button> </g></p> <div id="line_edu_income"></div> <script type="text/javascript" src="plot_2AJ_edu_income.js"></script> <h3>The line of regression for Median Monthly Income by Education</h3> <p>The total income, full-time earning, and all-job earning have the same trend among different education levels. Since the three variables strongly correlate with each other, we can choose one variable, for example the total income and study its relation with education level. The following plot shows the linear regression of income as a function of education level, indicating a positive correlation between income and education.</p> <div id="line_edu_income_2"></div> <script type="text/javascript" src="plot_2AJ_edu_income_2.js"></script> <h3>Working time by Education</h3> <p>The following plot shows the average time of having a job in the last four months as a function of the education level. The plot also shows a linear regression of the curve, featuring a positive correlation as well.</p> <div id="line_edu_working"></div> <script type="text/javascript" src="plot_2AJ_edu_work.js"></script> <h3>The line of regression for Months Worked by Income level</h3> <p>From the correlation table we already see that the months of having a job and the income level are positively correlated. Here we plot the months worked as a function of the median of monthly income and its linear regression. The result confirms the positive correlation observed from the correlation table.</p> <div id="line_income_working"></div> <script type="text/javascript" src="plot_2AJ_income_work.js"></script> <h1>Educational Attainment in the United States, 2015 (Table 1)</h1> <p>This data set is from a study in 2015 of people at age 18 and over, including the data of their educational attainment, sex, age, race and hispanic origin. From this data set, we could learn about how people's educational status depend on their age, sex and race.</p> <!-- fig1 --> <h3>Education by Age</h3> <p>The following bar plot is the histograms of people's educational attainment at different age. The number of people has been normalized respect to the total number of people in the selected age range.</p> <p>Press the button to see the plot for the corresponding age range:</p> <p><g> <button class="button" id="button-0" onClick="Plot_edu_age_1.plot(0)">Total</button> <button class="button" id="button-1" onClick="Plot_edu_age_1.plot(1)">18-24</button> <button class="button" id="button-2" onClick="Plot_edu_age_1.plot(2)">25-29</button> <button class="button" id="button-3" onClick="Plot_edu_age_1.plot(3)">30-34</button> <button class="button" id="button-4" onClick="Plot_edu_age_1.plot(4)">35-39</button> <button class="button" id="button-5" onClick="Plot_edu_age_1.plot(5)">40-44</button> <button class="button" id="button-6" onClick="Plot_edu_age_1.plot(6)">45-49</button> <button class="button" id="button-7" onClick="Plot_edu_age_1.plot(7)">50-54</button> <button class="button" id="button-8" onClick="Plot_edu_age_1.plot(8)">55-59</button> <button class="button" id="button-9" onClick="Plot_edu_age_1.plot(9)">60-64</button> <button class="button" id="button-10" onClick="Plot_edu_age_1.plot(10)">65-69</button> <button class="button" id="button-11" onClick="Plot_edu_age_1.plot(11)">70-74</button> <button class="button" id="button-12" onClick="Plot_edu_age_1.plot(12)">>=79</button> </g></p> <div id="bar_edu_age"></div> <script type="text/javascript" src="plot_01_edu_age_1.js"></script> <!-- fig2 --> <h3>The correlation between the Education Attainment and Age</h3> <p>From the above bar plots, we can clearly see that the education attainment of people at different age are changing with a pattern. In order to study the correlation in detail, I first change the education level to a numeric score from 1 to 15, and then calculate the average education score in different age range from the histogram. I also change the age range variable to a average age variable.</p> <p>The following plot shows the educational score as a function of age, along with the lines of regression. From the scatterplot, we can see that the correlation is not linear, but rather a bell shape curve. Thus I tried linear, quadratic, and cubic fit for the data.</p> <div id="line_edu_age"></div> <script type="text/javascript" src="plot_01_edu_age_2.js"></script> <p></p> <!-- fig3 --> <h3>Education by Sex</h3> <p>The following is a bar plot showing the educational attainment of male and female at all ages over 18. The education level in female and male are nearly equal with a slightly higher rate of female with professional Degree and Doctoral degree. This is a quite interesting observation.</p> <div id="bar_edu_sex"></div> <script type="text/javascript" src="plot_01_edu_sex.js"></script> <!-- fig4 --> <h3>Education by Race</h3> <p>This is a grouped bar plot showing the educational attainment of different races at all ages over 18.</p> <div id="bar_edu_race"></div> <script type="text/javascript" src="plot_01_edu_race.js"></script> </body>
https://d3js.org/d3.v3.js