JoaoGoncalves

@JoaoGoncalves·4 public vizzes

Data Visualization and Infographics with D3 :: Module 3 Exercise

A horizontal bar chart displays the percentage of Portuguese companies with websites from 2003 to 2014, with bars labeled by year and the percentage value shown on each bar. The visualization uses D3.js version 3.5.5 to load CSV data via `d3.csv`, bind it to SVG `rect` and `text` elements, and scale bar widths proportionally to the data values. The SVG canvas and bar colors are styled through CSS, with hover effects on the rectangles. The data comes from the `websitesEuro18.csv` file, which contains annual percentages for multiple European countries, though only the Portugal column is visualized.

Mar 31, 2015

Loading thumbnail…

Data Visualization and Infographics with D3 :: Module 2 Exercise

This example demonstrates how to combine static inline SVG shapes with a D3-driven data load to illustrate the contrast between hand-coded graphics and dynamic data binding. It shows a fixed composition of a circle, rectangle, polygon, and text element, while the script uses D3’s `d3.csv` to fetch `websitesEuro18.csv` and log the parsed array of JSON objects to the console. The SVG is rendered directly in the HTML with CSS styling for fills, strokes, and fonts, while the CSV data remains unused in the visualization, serving only to verify loading. The libraries used are D3 3.5.5 and standard SVG DOM APIs.

Mar 26, 2015

Loading thumbnail…

Companies with more than 10 workers with website on Euro18 Countries

This chart shows the percentage of companies with more than 10 workers that have a website across 18 European countries, comparing values from 2003 to 2014. It displays the data as a multi-series line chart, with each line representing a country’s trajectory over time. The visualization uses D3.js with the `d3.line()` generator and `d3.scaleTime()` for the x-axis, while the CSV data is loaded via `d3.csv()`. Country lines are distinguished by color, and the tooltip relies on `d3.pointer()` and `d3.select().on("mouseover")`. The rendering approach is SVG-based, with axes drawn using `d3.axisBottom()` and `d3.axisLeft()`.

Mar 26, 2015

Loading thumbnail…

Gist 9786809

This example demonstrates how to prove ownership of a GitHub account via a Keybase-signed gist. It shows the verification workflow, including the signed JSON payload, PGP signature, and command-line instructions for identity lookup and encrypted messaging. The implementation uses the Keybase API and CLI tooling, alongside cryptographic fingerprint verification, to establish a publicly auditable link between the user’s GitHub and Keybase identities. The gist’s raw text and structured metadata are rendered directly, highlighting the step-by-step authentication process without additional visualization libraries.

Mar 26, 2014