Skip to main content
100%

Homework 1

✓ Published0🌍 Public
TTedables
Last edited Feb 9, 2017
Created on Feb 7, 2017

This interactive D3.js visualization demonstrates the relationship between a person's highest level of education and their total income, using bar charts and histograms generated from CSV data. The visualization features tooltips that display data points on hover, with a red dashed line marking the mean income. Built with D3.v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to render responsive SVG charts, while also incorporating a scatterplot of cereal nutritional data with color-coded manufacturers.

AI-generated description

These visulizations are built on top of the Scatterplot and Bar chart examples presented on Piazza. This was originally forked from <a href='http://bl.ocks.org/asielen/'>asielen</a>'s block: <a href='http://bl.ocks.org/asielen/50a527004cb79facf219'>Reusable Line Chart v2</a>, an implementation of a reusable responsive multiline chart, but it largely wasn't used

Contents:

  • Reusable modular design
  • Responsive design, chart size adjusts with screen size
  • Customizable options
    • Chart Size
    • Margins
    • Div Selector
    • Chart Colors
    • Axis labels
  • Toggleable series (click on the legend to toggle series)
mit Licensed

Similar vizzes

Loading thumbnail…

Homework 1

This example presents a series of interactive charts exploring the relationship between education level and income, using data from Table_2A.csv and Table_2J.csv. One view is a bar chart of median income by education level, annotated with a red dashed line for the mean and a green linear regression line. Another is a line chart showing months worked over the last four months by education level, using a steelblue path. The code uses D3 v4’s `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to render SVG graphics.

TTedables
87% match
Loading thumbnail…

Line Chart - Income

This line chart displays average income by highest education level, from elementary school through doctorate degrees, using data from the U.S. Census Bureau’s Survey of Income and Program Participation. The visualization pairs a black polyline with colored dots at each data point, making the upward trend in earnings with advanced education clear. Built with D3 v4, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path, while circles are added via `enter().append("circle")`. The chart renders as SVG with axes from `d3.axisBottom` and `d3.axisLeft`.

Aajayk1931
76% match
Loading thumbnail…

Assignment q3

This visualization shows the average reading score for students grouped by their parents' highest level of education, from some high school through master's degrees. The D3.v7 line chart uses d3.scalePoint and d3.scaleLinear for axes, with d3.mean aggregation to compute the averages. Interactive tooltips appear on hover for each data point. The chart renders as an SVG, sourced from the "StudentsPerformance 2.csv" file, highlighting the relationship between parental education and student performance in reading.

BBhargav Reddy
74% match
Loading thumbnail…

Final Project V1

This interactive scatter plot visualizes the Human Development Index dataset, allowing users to compare inequality-adjusted income against inequality in education percentages. The visualization uses React with D3 v5 scales and rendering via SVG, featuring dropdown menus to switch between different data attributes. Data loads asynchronously from a CSV file using d3.csv, with axes rendered through custom React components and tooltips provided by SVG circle titles.

Llubin-liu
74% match
Loading thumbnail…

Final Project

This visualization displays seven bar and scatter plots comparing countries by education enrollment, minimum wage, GDP, and labor force participation, with each figure highlighting factors like tertiary education rates or primary enrollment levels. Built with D3 v7, the charts load CSV data and render SVG elements including axes, bars, circles, legends, and hover interactions that change element colors. The scatter plot encodes labor force participation through circle radius, while bar charts use color-coded categories with underlined titles for each figure.

BBibek Lamsal
74% match
Loading thumbnail…

csce5320finalfinalproject

This example presents two side-by-side bar charts ranking the top ten countries by GDP per capita and by gross primary education enrollment. The charts use D3.js version 6 to load CSV data from remote GitHub sources and render scalable vector graphics (SVG). Each bar chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for ticks. Interactive tooltips appear on bar mouseover, showing the country name and the corresponding metric value.

Ssriharshakondakindi@gmail.com
74% match
Loading thumbnail…

Lesson 3

This visualization shows a comparison of student heights in a horizontal bar chart, with each bar colored by eye color (black, blue, or brown). The data comes from a CSV file about students. Two charts are rendered side-by-side, one with bars sorted by height and the other sorted by student name. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, and `axisLeft` to load and display the data as SVG rectangles, with manual legend circles and text. Custom colors are applied directly via conditional fill attributes.

AAditya Gudal
73% match
Loading thumbnail…

Irregular Histogram

This irregular histogram visualizes income distribution by adjusting the height of each bar to represent the quotient of people per income unit, a technique aligned with standard histogram normalization. The visualization loads data from an `income.csv` file and renders in SVG using the D3.js v3 library, employing `d3.scale.linear` for both axes and `d3.svg.axis` for tick marks. Each bin’s width is derived from the varying income ranges (e.g., 8.8, 30, 49.9), and the first bin is discarded to anchor the scale. The chart uses a steelblue fill for the rect elements and displays clear axis labels.

Mmbostock
73% match