carbuncle-3djs

@carbuncle-3djs·11 public vizzes

Temperature in Brussel

This visualization displays the temperature in Brussels over a seven-day period, with each hour represented as a point on a scatter plot. The data, sourced from Meteo Blue, is loaded from a CSV file and rendered as red circles using the D3.js v6 library. The code uses D3's `scaleLinear` for scaling, and `axisLeft` and `axisBottom` functions to create the axes. While the code contains references to displacement and horsepower, the actual plot correctly maps timestamps and temperature values.

Sep 28, 2020

Loading thumbnail…

Iris dataset data analysis

A scatterplot of the Iris dataset displays petal width against petal length, with each flower as a red semitransparent circle. The code uses D3 v6 modules including `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `format` to load data from the UCI Machine Learning Repository, map values to linear scales, and render axes with tick lines and labels via SVG. Axis titles and a chart title are added as text elements, while the visualization omits species encoding, showing only the raw numeric relationship.

Sep 25, 2020

Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of cars, with each point representing a vehicle. The data comes from the UCI Machine Learning Repository's Auto MPG dataset. Built with D3 v6, the visualization uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and SVG circles to plot the points. The chart includes axis labels and a title, with the data parsed from CSV and rendered with a clean, minimal styling.

Sep 25, 2020

Loading thumbnail…

Scatter plot

A scatter plot displays CO2 emissions for top-ranking countries, mapping each country's total 2018 emissions in gigatons along a horizontal linear scale against a vertical point scale of country names. The visualization encodes data points as steelblue circles, with axes, gridlines, and labels styled via CSS. Built with D3 v6, it uses `csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom`/`axisLeft` for rendering axes, while `format` converts emission values to readable units. Data originates from UCSUSA's 2018 country emissions dataset.

Sep 25, 2020

Loading thumbnail…

Country CO2 emission

A horizontal bar chart shows the top 21 countries by CO2 emissions in 2018, using data from UCSUSA. Each bar’s length encodes emissions in gigatons, with countries ranked from China (10.06 Gt) down to Kazakhstan. The visualization uses D3 v6’s `scaleBand` for the y-axis, `scaleLinear` and `max` for the x-axis, and `axisBottom` with a custom tick formatter. Cities are rendered as SVG rectangles, with axis labels and a title added via appended text elements. The CSV data is loaded using `csv`.

Sep 24, 2020

Loading thumbnail…

Country CO2 emission

A horizontal bar chart displays CO2 emissions for 21 countries, ranking from China at the top to Kazakhstan at the bottom, with bar lengths proportional to each nation’s 2018 emissions. The visualization uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to map data from the UCSUSA dataset onto SVG rectangles. Bars are styled with steelblue fills, and the chart includes labeled axes, with the y-axis listing country names and the x-axis showing emissions values in billions of metric tons.

Sep 24, 2020

Loading thumbnail…

Data as bar chart

A horizontal bar chart ranks the twenty most populous countries, showing population counts with steel-blue bars and labeled axes. Built with D3 v6, the visualization loads CSV data from Kaggle, maps populations to a linear scale and countries to a band scale, and renders the chart as SVG. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes.

Sep 24, 2020

Loading thumbnail…

Let's make a face with D3.js

This D3.js v6 visualization assembles a cartoon face from vector shapes—circles for the head and eyes, rectangles for eyebrows, an arc for the mouth, and a polyline for the nose—rendered to an SVG element. The face is centered via a translated `<g>` group, with component positions defined by fixed pixel offsets for spacing. A chained `transition().duration(2000)` animation repeatedly shifts the eyebrow group’s vertical transform, creating a blinking or raising motion. The code uses D3’s `select` and `attr` for element selection and property manipulation, alongside `arc` and `line` generators to build path geometries.

Sep 24, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shape elements—circles, rectangles, lines, and paths—composed in a static graphic. The markup defines primitive shapes with attributes like position, size, and fill, while CSS classes apply stroke and line-join styling to grouped elements. The rendering relies entirely on SVG within the HTML, with a stylesheet controlling presentation details such as stroke width and color for specific groups. It serves as a basic introduction to combining inline SVG with external CSS for shape styling and layout.

Sep 23, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates a minimal HTML-based car inventory report, listing three used vehicles with their model year, make, and price. The page shows how plain HTML elements can be styled with a CSS stylesheet, using a monospace font and a light blue background, while one list item is highlighted in red via a class selector. The code relies on standard HTML, CSS, and a small inline JavaScript snippet that logs "Hello JavaScript!" to the browser console, with no external libraries or data sources involved.

Sep 23, 2020

Loading thumbnail…

JS Starter

This example demonstrates a simple data-loading and report generation workflow. It displays a list of used cars filtered by price, showing the year, make, model, and price for each vehicle under $2,000. The code uses JavaScript Promises with a simulated two-second delay to fetch car data, then formats and renders the results as plain text in an HTML `<pre>` element. It relies on ES6 modules for importing and exporting functions, with `setTimeout` to mimic asynchronous behavior.

Sep 23, 2020