Ed190

@Ed190·4 public vizzes

fresh block

This scatterplot compares GDP and GDP per capita for 48 Sub-Saharan African nations in 2015, using data from a CSV file. Each circle represents a country, positioned by its gross domestic product on the x-axis and GDP per capita on the y-axis. The visualization highlights how most nations cluster below a $2,000 annual per-capita income, with only a few outliers like Equatorial Guinea and Seychelles reaching significantly higher values. Tooltips provide additional detail, and the chart is built with D3 v4 using SVG rendering, with an emphasis on the economic disparity across the region.

Mar 21, 2017

Loading thumbnail…

fresh block

A scatterplot shows the evolution of Gross Domestic Product (GDP) for Sub-Saharan African countries, with each point encoding GDP on the vertical axis and year on the horizontal axis, while the size of each point reflects population. The visualization filters the source CSV data to exclude missing values before plotting. It uses d3.v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.scaleSqrt` for circle area, and `d3.scaleOrdinal` for color, all styled with the Amatic SC and Roboto fonts.

Mar 14, 2017

Loading thumbnail…

fresh block

A minimal D3.js v4 template displays a static text message on a blank SVG canvas, serving as a starting point for editable visualizations. The code appends a single `<text>` element to an SVG container sized at 960 by 500 pixels, styling it with a monospace font and centered positioning. Built with Blockbuilder.org, this example demonstrates basic SVG rendering and D3 selection/append methods without any data binding or interactive features. The placeholder text explicitly invites further code modification, making it a clear foundation for users to build custom charts.

Mar 10, 2017

Loading thumbnail…

fresh block

A simple SVG bar chart displays three static vertical bars and the text “Texto planito, pero SVG!” in Spanish. The page uses D3 v4 to append a fourth rectangle via `d3.select('svg').append('rect')`, setting its position and size with `.attr()`. The chart is rendered directly in the browser from hardcoded coordinates, with no data file or external dataset. The color scheme—magenta text on a teal background—highlights the contrast between the pre-authored SVG elements and the dynamically added one.

Mar 10, 2017