faquora

@faquora·4 public vizzes

Making a bar chart

This example shows a horizontal bar chart of population by country, ranking the ten most populous nations from China to Mexico. It uses d3.csv to load the data, d3.scaleLinear for the x-axis population scale, and d3.scaleBand for the categorical y-axis. The chart renders as SVG rectangles with steelblue fill, with d3.axisLeft and d3.axisBottom providing labeled scales. Margins and a group transform position the plot, while the population values are multiplied by 1000 to reflect full counts.

Apr 28, 2020

Loading thumbnail…

Lets make a face with d3

This example uses d3 v5 to construct a simple, stylized face entirely from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes with circular pupils, rectangular eyebrows, and a semi-circular mouth created with an arc path. The face is centered within an SVG canvas using a transform, with facial feature positions calculated relative to the center. The code relies on d3's `select` and `arc` functions, and demonstrates how to programmatically generate SVG shapes and coordinate them for a recognizable composition.

Apr 22, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in very large type, centered on a white background. It illustrates the simplest possible starting point for a web-based visualization or application, using no external libraries. The rendering relies entirely on native HTML and CSS, specifically a `<style>` block that sets the `text-align` and `font-size` properties. It serves as a bare-bones template for experiments, showing how a single file can produce a basic visual output without JavaScript or data processing.

Apr 22, 2020

Loading thumbnail…

World Map

This example displays a world map with countries rendered as light green polygons on a blue sphere. It uses D3’s `geoPath` and `geoNaturalEarth1` projection to draw geographic features, and the TopoJSON `feature` function to convert country outlines from a remote 110m dataset. The SVG output includes a background sphere and country paths, with styling applied via CSS classes.

Apr 9, 2020