xhoumba

@xhoumba·13 public vizzes

Choropleth Map

A choropleth map colors world countries by economic classification using a sequential ordinal scale and the Spectral color scheme. The visualization, built with D3 v5 and TopoJSON, renders countries as SVG paths via d3.geoPath with a Natural Earth projection, supporting zoom and pan. A custom color legend displays the categorical color scale, while country data is joined from the World Atlas TopoJSON and TSV datasets using Promises.

Mar 12, 2020

Loading thumbnail…

Let's make a map with D3.js!

A world map is rendered using D3.js, with countries filled in light green against a blue sphere. The example demonstrates a basic geographic visualization workflow, loading TopoJSON data from the World Atlas and converting it to GeoJSON features. The code uses `d3.json`, `d3.geoPath`, `d3.geoNaturalEarth1`, and the TopoJSON `feature` method to project and draw the paths as SVG elements. The map is static, showing only country boundaries and the projected Earth sphere.

Mar 12, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data for San Francisco, with time on the x-axis and degrees Celsius on the y-axis. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for grid lines and labels, and a `line` generator with `curveBasis` for the smooth maroon temperature curve. Data is loaded from a CSV file hosted by Data Canvas via `csv`, and the SVG output includes styled tick marks and a title.

Mar 12, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between MPG and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, with each circle representing a vehicle. The chart uses a blue, semi-transparent point encoding to reveal density and patterns across the axes, labeled “MPG” and “Weight.” Built with D3 v5, the code employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick rendering, and `csv` to load and parse the data. The SVG rendering includes custom margins, tick lines, and axis labels styled via CSS.

Mar 12, 2020

Loading thumbnail…

Making a Bar Chart 4

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Customized axes include formatted tick labels (converting billions to ‘B’) and removed domain lines. The data is loaded from a CSV file and multiplied by 1000 to represent actual population figures.

Mar 12, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized, including removing domain lines, adjusting tick sizes, and formatting tick labels with `d3.format` to abbreviate large numbers. The chart uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes, all rendered as SVG with a steelblue fill for the bars.

Mar 12, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates a D3.js visualization that dynamically resizes an SVG graphic to match its container’s dimensions. The page’s CSS fixes the chart div to fill the viewport, and the `redraw` function reads `clientWidth` and `clientHeight` to update the SVG’s width and height attributes. It then draws two green, semi-transparent diagonal lines forming an X, whose endpoints are recalculated on every resize. The code uses the browser’s `resize` event listener to invoke `redraw`, alongside D3’s data join for efficient line updates.

Mar 12, 2020

Loading thumbnail…

TEST2 Let's make a face with D3.js!

A smiling face drawn with SVG circles and an arc path animates its rectangular eyebrows upward and downward in a looping two-second transition. Using D3.js v5, the example demonstrates fundamental DOM selection and manipulation with `select`, `append`, and `attr`, while the mouth is generated via the `arc` generator. The code builds the face from absolute coordinates and applies a chained `transition` to the eyebrow group, showcasing data-free, direct SVG updates and timed animation without scales or data binding.

Mar 12, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS 2

This example displays a static collection of SVG shapes, including circles, rectangles, lines, and a path, arranged in a blue-filled group with nested translations and scales. It demonstrates how SVG elements inherit fill and stroke styles from parent `<g>` tags, while individual shapes can override these attributes with inline values or CSS classes. The visualization uses raw SVG markup with CSS rules defined in an external stylesheet, where the `.lines` class applies red strokes and custom path styling. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support.

Mar 12, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS 2

This example demonstrates how SVG shapes and CSS classes can be combined to create colorful, layered graphics. It shows circles, rectangles, lines, and a path arranged with nested transforms, using fill and stroke attributes to assign colors. The code relies on native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while a separate stylesheet defines the `.lines` class for stroke width, red color, and the path’s teal stroke. A `<g>` element uses a scale transform and global fill, with local overrides for specific shapes.

Mar 12, 2020

Loading thumbnail…

Cars Report2

This example shows a text-based report of used cars under $2,000, generated asynchronously from JSON data. It displays a loading message before printing each car as a formatted line with year, make, model, and price. The code uses ES6 modules, `JSON.parse`, a Promise with `setTimeout`, and `Array.filter` to select cars below the price threshold. It then applies `Array.map` with the custom `formatCar` function. The output appears in a large `<pre>` element updated via `document.getElementById().textContent`.

Mar 12, 2020

Loading thumbnail…

Cars Report2

This example demonstrates how JavaScript objects and arrays can be used to generate a text-based car report. It filters a hardcoded list of five cars by price, formats each matching entry with the `formatCar` function, and displays the result in a `<pre>` element. The code uses `JSON.parse` to load the car data, a `Promise` with `setTimeout` to simulate asynchronous fetching via `getCars`, and `Array.filter` and `Array.map` to process the data before rendering the output as plain text.

Mar 12, 2020

Loading thumbnail…

TEST HTML Cars Report

This example demonstrates an asynchronous JavaScript data pipeline that loads a hardcoded JSON array of used cars and generates a text report filtering by price. The code uses ES6 modules with `import`/`export` statements, a `Promise`-based `getCars` function with a simulated 2-second delay, and array methods such as `filter`, `map`, and `join`. The result is rendered into an HTML `<pre>` element via `document.getElementById` and `textContent`, starting with a “Loading…” placeholder before the report appears.

Mar 12, 2020