michielpunt86

@michielpunt86·10 public vizzes

Customize axis

This example demonstrates a horizontal bar chart of population data for the top ten countries, with customized axes to improve readability. The y-axis displays country names using `scaleBand`, while the x-axis uses `scaleLinear` with a tick format of `format('.2s')` to abbreviate large population numbers (e.g., millions). The visualization is rendered as SVG elements, with data loaded from a CSV file and processed by multiplying population values by 1,000. The chart uses `axisLeft` and `axisBottom` to generate the axes within a margin-defined layout.

Jul 23, 2020

Loading thumbnail…

Customize axis

This example shows a horizontal bar chart of country populations using a linear scale for the x-axis and a band scale for the y-axis. The code imports `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.max`, `d3.axisLeft`, `d3.axisBottom`, and `d3.format` to load `data.csv`, compute the domain, and render SVG rectangles. The bottom axis is customized with a `.2s` tick format, abbreviating population values (e.g., 1.4M).

Jul 23, 2020

Loading thumbnail…

Customize axis

Jul 23, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the populations of the ten most populous countries, based on 2020 estimates from the United Nations World Population Prospects. The chart uses D3 v5 with SVG rendering, and the code imports `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3. Population values are loaded from a local CSV file, converted from thousands to absolute numbers, and mapped to bar widths via the linear scale, while country names position each bar along the band scale.

Jul 23, 2020

Loading thumbnail…

HTML Starter

This example presents a minimal HTML page that centers the text “Hello HTML” in the browser using a CSS style block, while also logging messages to the browser’s console via JavaScript. The page is a straightforward demonstration of the core building blocks of web development, using plain HTML tags, a `<style>` element for layout, and a `<script>` tag for client-side scripting. It serves as a bare-bones starter template for creating and testing front-end code without any external libraries or frameworks.

Jul 23, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries, using data from the United Nations World Population Prospects 2019. The visualization employs the D3.js library (version 5) to load the provided CSV file via the `csv` function, then renders the ranked bars with a custom aesthetic. While the HTML includes a root container and script references, the chart’s visual design and layout are primarily driven by styling rules, with the data processing and drawing handled through D3’s selection and projection APIs. The chart’s minimalist, stylized appearance is achieved through CSS integration.

Jul 23, 2020

Loading thumbnail…

Make a bar chart!

A bar chart displays population figures for ten countries from a static CSV dataset, ordered by size with China and India dominating the visual comparison. The SVG chart uses D3 v5’s `select` to bind the data, though the code currently only sets the chart dimensions and logs a message to the console, meaning the bars themselves are not yet rendered in this partial example.

Jul 23, 2020

Loading thumbnail…

Make a bar chart!

A horizontal bar chart displays the population of ten countries, sourced from data.csv, with China and India leading. The SVG chart is built using D3 v5, where `scaleLinear` maps population values to bar widths and `scaleBand` positions each country's bar vertically. The code reads the CSV, multiplies populations by 1000, and appends `rect` elements to the SVG, with bar height derived from the band width.

Jul 17, 2020

Loading thumbnail…

Cars report

This example displays a single car record from a small inline dataset, showing the type of the first car in the list. The page renders the text “Honda” inside a `<pre>` element, using JavaScript to parse a JSON array defined in the `cars` module and access its first object’s `type` property. The visualization relies on plain DOM manipulation via `document.getElementById` and `textContent`, with no external charting libraries. The data source is a hardcoded JSON string containing four car objects with varying fields such as year and price.

Jul 16, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal web page displaying the text “Hello HTML” in large, centered type, with a console message logged via JavaScript. It uses plain HTML, inline CSS for styling, and a script tag for basic interactivity. The code relies on standard browser APIs—the `console.log` method—and does not employ any external libraries or frameworks. The page is a bare-bones starter template, demonstrating the fundamental structure of an HTML document with embedded styling and scripting.

Jul 16, 2020