Skip to main content
100%

Homework 1

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

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.

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)

forked from <a href='http://bl.ocks.org/Tedables/'>Tedables</a>'s block: <a href='http://bl.ocks.org/Tedables/bb9654937115f20f0f7969f6abedb3eb'>Homework 1</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Homework 1

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.

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
77% 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
73% 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
73% match
Loading thumbnail…

Bar Chart

This bar chart visualizes educational attainment across seven age groups in the United States, with each education level represented by a cluster of colored bars. The data comes from a CSV file listing population figures in thousands. Built with D3 v4, the visualization uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the population axis, and `d3.schemeCategory10` for bar colors. SVG rendering handles the bars, axes, and legend, while the code loads the data asynchronously via `d3.csv`.

Aajayk1931
73% match
Loading thumbnail…

ice6

This visualization shows the effect of parental education level on students' math scores using a horizontal bar chart, with green rectangles encoding score magnitudes. The chart displays average math scores across different parental education categories, using a linear scale for the x-axis and a band scale for the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for axes, rendering the visualization as SVG.

SShridhar Kshirsagar
72% match
Loading thumbnail…

A8Task3

This example shows a scatter plot of age against height, with each point colored by income level: red for incomes below 60,000, yellow for 60,000–70,000, and green for above. The SVG chart uses d3.scaleLinear to map extents to pixel ranges, d3.axisLeft and d3.axisBottom for axes, and d3.csv to load a remote dataset. Dot size is fixed at 4 pixels, with axis labels styled in green.

Sshaiksajidali
72% match
Loading thumbnail…

Task-7 Q3

This scatter plot displays the relationship between age and income from a CSV dataset, with each point colored by gender using a categorical color scale. The visualization uses D3 v6 to load and parse the data, then renders circles on an SVG canvas with linear scales for both axes. Axis labels are styled in green, and the plot is sized to fill the browser window. The code demonstrates loading data via a remote URL and applying D3’s scaleLinear, scaleOrdinal, axisLeft, and axisBottom functions to construct the chart.

JJames Cruz
72% match