chrisdreece

@chrisdreece·9 public vizzes

Promotions Bars Improved

This bar chart displays headcounts for nine cities, with each vertical bar’s height proportional to the city’s population. The visualization uses D3 v6’s `select`, `csv`, and `append` APIs to load data from a local CSV file and render SVG rectangles. Bars are positioned with fixed spacing along the x-axis, while the y-axis is not scaled, resulting in a simple, unoptimized layout. The data includes city names and population figures, which are directly mapped to bar dimensions without additional axes or labels.

Jan 27, 2021

Loading thumbnail…

Promotions with SVG

This visualization displays promotional metrics for various locations, using circles positioned diagonally across an SVG canvas. Each circle's size represents the headcount at that location, scaled by dividing the value by 80. The chart is rendered with D3 v6, using selections to append circles to an SVG element and binding data loaded from a CSV file. The code also converts percentage columns by multiplying them by 10, though these transformed values are not used in the final rendering.

Jan 18, 2021

Loading thumbnail…

Promotions Bars

The visualization displays horizontal bars representing headcount across nine U.S. cities, with each bar’s width scaled proportionally to its population count. The code loads data from `locations.csv` via `d3.csv`, converts the percentage columns, and then uses D3’s `select` and `data` join to append styled `div` elements with class `bar`. Bar widths are calculated by dividing the headcount value by two and setting the result as the CSS `width` in pixels. The bars share a uniform teal background and fixed height defined in the external stylesheet.

Jan 18, 2021

Loading thumbnail…

Promotions

This example displays a simple text-based visualization of employee promotion data by location, coloring each location’s name blue for Detroit and black for all others. It loads a CSV file with location, headcount, and female eligibility/promotion percentages, scales those percentages by ten, and renders the location names using D3’s `select`, `csv`, and data join with `enter()`. The visualization uses plain paragraphs appended to the body, with text and style set via anonymous functions.

Jan 18, 2021

Loading thumbnail…

D3 Practice

This example demonstrates the process of loading and inspecting tabular data with D3, followed by adding fixed text to a web page. It uses `d3.csv` to fetch and parse the data from `food.csv`, logging the resulting array of objects to the console. The code also illustrates basic DOM manipulation by chaining `d3.select("body")`, `.append("p")`, and `.text(...)` to insert a static paragraph into the document. Though the visualization itself is minimal, the example serves as a practical exercise in understanding D3’s callback functions and method-chaining syntax for beginners.

Jan 15, 2021

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart comparing the populations of ten countries, sorted by the country name. It uses D3 v6 to load a CSV file and render SVG rectangles. The code defines linear and band scales with `scaleLinear` and `scaleBand`, and draws the y-axis using `axisLeft`. Rectangles are appended via the enter selection, with widths mapped to population values and heights set by the band's bandwidth.

Jan 14, 2021

Loading thumbnail…

experiment with functions

This example demonstrates a D3.js experiment with functions using JavaScript arrays and data transformation methods. It features an in-code JSON dataset of fictional cars with properties like make, model, year, and price, and also includes a separate CSV file with country population figures. The visualization uses D3 v6's `scaleLinear`, `scaleBand`, `max`, and `csv` APIs to log and process data, though the rendering logic is largely commented out. The code explores various programming constructs—including while and for loops—to iterate through the car data and print price values to the console.

Jan 12, 2021

Loading thumbnail…

Make a Face

A pink SVG face with blinking eyebrows and animated facial features responds to simple D3 transitions. The code builds the face by nesting grouped shapes—circles for the head, eyes, and nose, plus rectangles for the eyebrows and an arc-generated path for the mouth—within a central `<g>` element using D3 v6 selection and `arc` API methods. Eyebrows slide and stretch through chained `.transition()` calls, creating a playful, looping expression. All shapes are positioned relative to the group, keeping the face centered as it animates.

Jan 8, 2021

Loading thumbnail…

Cars Report

This example displays a text-based report of cars with a price below a specified threshold, formatted as a multi-line string in a large monospace typeface. It uses vanilla JavaScript modules, including `Array.prototype.filter` and `Array.prototype.map`, with the `formatCar` function to construct each line, and `Array.prototype.join` to combine them. The data originates from an inline JSON array of car objects, and the final message is rendered via the DOM API `document.getElementById` and `textContent`.

Jan 7, 2021