D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
huangy22
Full window
Github gist
barplot for education
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;} </style> </head> <body> <h1>Educational Attainment in the United States, 2015</h1> <h2>Table 1: The Educational Attainment of the Population 18 Years and Over, by Age, Sex, Race, and Hispanic Origin, 2015</h2> <p>This data set is from a study in 2015 of 242,248,000 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>A bar plot of multiple histograms of people's educational attainment at different age, including the mean, std. There is a interactive bar that allows one to change the age region. </p> <div id="tab1_edu_age"></div> <script type="text/javascript" src="table_01.js"></script> <!-- fig2 --> <p>Scatterplot for the educational attainment as a function of age. With the fitted line.</p> <div id="line_edu_age"></div> <p>Caption:</p> <!-- fig3 --> <h3>Education by Sex</h3> <p>A stacked bar plot showing the educational attainment of male and female of all age.</p> <div id="tab1_edu_sex"></div> <!-- fig4 --> <h3>Education by Race</h3> <p>A stacked bar plot showing the educational attainment of different races of all age. Multiple line plot with mean and std on the annotation.</p> <div id="tab1_edu_race"></div> <!-- tab1 --> <h3>Table: The Educational Attainment and Race</h3> <div id="corr_edu_race"></div> <h2>Table 2: Educational Attainment of the Population 25 Years and Over, by Selected Characteristics: 2015</h2> <p>This data set is from a study of 212,132,000 people at age 25 and over, including their educational attainment, marital status, household relationship, Citizenship, Nativity, Occupation, and Industray domain information. I select three interesting prospective to visualize, which are the education attainment by nativity, occupation and industry.</p> <!-- fig5 --> <h3>Education by nativity</h3> <p>Several Pie charts for different educational level with nativity information.</p> <div id="tab2_edu_nat"></div> <!-- tab2 --> <h3>Table: The Educational Attainment and Nativity</h3> <div id="corr_edu_nat"></div> <!-- fig6 --> <h3>Education by Industry and Occupation</h3> <p>Use a heat map to represent the educational level, use the occupation and industry as x and y axis. <div id="tab2_edu_occu"></div> <h1>Average/Median Monthly Income and Working Time in Preceding Four Months by Education, 2009</h1> <p></p> <div id="tab2A_Number"></div> <p>Caption:</p> <script src="table_2A.js"></script> </body>
https://d3js.org/d3.v3.js