Christopher Repka

@crepka·10 public vizzes

Hello VizHub!

This example visualizes country data from the World Bank API, displaying each country's ID and name. The code loads a JSON file containing country metadata, including region, income level, and capital city information. Using d3.json to fetch the data, it logs the first country's ID to the console, demonstrating the basic data loading workflow. The visualization serves as a simple foundation for building more complex geographic or demographic visualizations with D3.js v5.

Oct 8, 2018

Loading thumbnail…

Map D3

This map displays the counties of the United States using a natural Earth projection. The visualization draws each county as a separate SVG path, with white fill and black borders. The code loads TopoJSON data from a remote source, converts it to GeoJSON using the `topojson.feature` API, and renders it with `d3.geoPath` and `d3.geoNaturalEarth1`. It utilizes the D3 v5 library and appends all shapes within a single SVG container.

Sep 24, 2018

Loading thumbnail…

Map D3 Cheap Tricks

This map visualizes world countries in gold on a near-opaque black sphere, with country names from the World Atlas TSV file shown as hover tooltips. Built with D3.js and TopoJSON, the example uses `geoMercator` for the map projection and `geoPath` to generate SVG paths for each country from the 50m GeoJSON dataset. A zoom interaction is implemented via D3's `zoom` event, enabling pan and scale transformations on the `g` element. The code also demonstrates map interactions by filling countries with crimson on mouse hover.

Sep 23, 2018

Loading thumbnail…

Map D3

A yellow circle with black outline, two eyes, eyebrows, and an arc-shaped mouth form a simple face. The visualization uses D3 v5 to build the SVG scene, with `select`, `arc`, and `transition` APIs for rendering and animation. The left eyebrow animates via a chained `transition` call, while all shapes are positioned relative to a centered group. The example demonstrates basic SVG drawing and animation with D3’s declarative method chaining in a minimal framework.

Sep 21, 2018

Loading thumbnail…

Hello VizHub!

This example visualizes a simple dataset from a CSV file, displaying two fictional people with attributes like name, race, gender, and occupation. The code loads the data asynchronously with `d3.csv()` and logs it to the browser console, while the page itself only contains a static message div. The visualization uses D3 v5 alongside a minimal SVG element that is selected but not currently populated with any data-driven shapes or marks. The rendering approach focuses solely on demonstrating data loading without producing a visible chart.

Sep 21, 2018

Loading thumbnail…

Hello VizHub!

This example displays the text “Hello World!” centered on a dark page. It uses an ES6 module to export the message string, which is then imported and displayed in the `index.js` file. The page’s styling is handled by CSS, which imports the Ubuntu font from Google Fonts and sets a large font size, gray background, and light text color. The visualization serves as a minimal template, relying on HTML, JavaScript, and CSS without additional libraries.

Sep 21, 2018

Loading thumbnail…

Cars Report

This example displays a plain-text report of cars priced under $2,800, initially showing a "Loading..." message. It fetches a hardcoded JSON array of car objects via a promise, then filters and formats each entry using custom `formatCar` and `generateReport` functions, joining them with newlines. The result is rendered inside an HTML `<pre>` element styled with CSS, using vanilla JavaScript with no external visualization libraries.

Sep 21, 2018

Loading thumbnail…

Hello VizHub!

This example displays a minimal D3.js setup that loads a small CSV dataset containing names, races, genders, and occupations. It initializes an SVG canvas and reads the data file using the `csv` function. The code logs the parsed data to the console but does not yet render any visual elements. The visualization relies on D3 v5, with the HTML page wired to load the `bundle.js` script and a separate stylesheet for presentation.

Sep 12, 2018

Loading thumbnail…

HTML Cars Report

This example displays a simple text-based report of used cars, listing three vehicles with their model years and prices. The HTML page is rendered with a larger font size for readability. It uses no external libraries, relying only on standard HTML elements like an unordered list to present the data statically. The page contains a title, a heading, and the car entries, with the data hardcoded directly in the markup rather than being generated dynamically.

Sep 7, 2018

Loading thumbnail…

Cars Report

This example, titled Cars Report, displays a large, centered “Hello World!” message on a dark background with a simplistic layout. The visualization is built with a plain HTML page that loads a compiled JavaScript bundle, using the Ubuntu font from Google Fonts for styling. The code does not include any data sources or charting libraries; instead, it relies on static text and a straightforward CSS setup. The project appears to be a minimal placeholder or starting point, with no interactive or dynamic elements beyond the initial message.

Sep 6, 2018