Connor Bailey

@cobailey8·6 public vizzes

Making a bar chart

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the UN’s World Population Prospects 2017. The data is loaded from a CSV file and rendered as SVG rectangles. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to generate the axes.

Dec 8, 2019

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays the populations of the ten most populous countries using 2018 estimates from the World Population Prospects 2017 dataset. The chart uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render SVG axes and rectangles. Population values are converted from thousands and scaled to bar widths, with country names positioned on the y-axis.

Dec 7, 2019

Loading thumbnail…

Let's make a face with D3.js

A smiling face made from yellow SVG shapes reacts as its eyebrows repeatedly raise and lower. D3.js v5 positions circles for the eyes, rectangles for the brows, and an arc-generated path for the mouth within a grouped coordinate system. Chained `transition().duration()` calls animate the eyebrow group’s transform attribute, cycling its vertical offset to create the expression. No external data is loaded; all geometry is defined through hardcoded constants and D3’s `arc` helper.

Dec 5, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a basic “Hello VizHub” message displayed prominently in large, centered text against a dark blue background. It showcases the minimal setup required for a D3.js project, using D3’s `select` API to target a DOM element and set its text content. The message itself is imported from a separate ES6 module, illustrating modular code organization. The page’s styling is handled entirely through CSS, using an imported Google Font (`Ubuntu`) and a simple color scheme. The visualization is static, with no data processing or dynamic rendering.

Dec 5, 2019

Loading thumbnail…

JS Practice

This example demonstrates how to display a single data value on a webpage using JavaScript. It loads a hardcoded array of car objects from `cars.js`, parses it with `JSON.parse`, and retrieves the `make` property of the first car. The result is inserted into the page’s DOM via `document.getElementById` and assigned to `textContent`. The page uses a large pre-styled element with a custom Ubuntu font and a dark blue background from `styles.css`.

Dec 5, 2019

Loading thumbnail…

JS Practice

This example demonstrates a minimal VizHub project that displays a static text message on a styled web page. It shows how to combine D3.js, ES6 modules, and custom CSS within a single visualization. The code uses `d3.select` to target the `#message` div and set its text content to a string imported from a separate module. The page renders “Hello VizHub!” in large Ubuntu font against a dark blue background, with no dynamic data or interaction. The source includes an HTML shell, a JavaScript entry point, and a modular message file.

Dec 5, 2019