B

bicyclecode

@bicyclecode·23 public vizzes

Loading thumbnail…

Untitled

Three smoothed lines trace accelerometer and gyroscope readings from a wearable sensor, mapping z-axis rotation against z-axis acceleration, x-axis rotation against x-axis acceleration, and y-axis rotation against y-axis acceleration. The chart uses `d3.scaleLinear`, `d3.line` with `curveBasis`, and D3 v6 axes to render the paths as blue, red, and green strokes against a grid. Data comes from two CSV files, `sensor.csv` and `sensor2.csv`, capturing movement over time. Axis labels and a title describe the comparison of movement interpretations.

Loading thumbnail…

Untitled

This scatterplot visualizes accelerometer data from a car’s movement, plotting x-axis acceleration against y-axis acceleration as green circles with blue outlines. The chart uses d3.csv to load the dataset, then d3.scaleLinear and d3.extent to map values, with axes generated via d3.axisLeft and d3.axisBottom. The title and axis labels appear in Roboto Mono, while the overall layout uses margins and an SVG container. Data originates from the UCI Machine Learning Repository.

Loading thumbnail…

Untitled

This chart visualizes UK onshore oil exploration data from 2000 to 2020, plotting the number of exploration wellbores per year as a red spline curve over a blue-gridded Cartesian coordinate system. The visualization uses the D3 v6 library for data binding, scaling via `scaleLinear`, and rendering an SVG line path. The data is loaded from a local CSV file, with missing values (dashes) parsed as `NaN`. The chart includes labeled axes, a graph title, and uses the `Roboto Mono` and `Xanh Mono` fonts for styling.

Loading thumbnail…

Untitled

A dynamic bowl of fruit demonstrates D3 v6 data joins and transitions. Five circles representing apples render in an SVG, updating as fruits are removed or changed to lemons over timed intervals. Using `selection.data` with key functions, `enter`, `merge`, and `exit` selections animate position, radius, and color via `transition().duration()`. A `scaleOrdinal` maps fruit types to fill colors and radii. Clicking a circle logs to the console, though no visible selection occurs.

Loading thumbnail…

Untitled

A D3 v6 demonstration shows a bowl of fruit rendered as SVG circles and text labels, with apples and lemons distinguished by color and size via `d3.scaleOrdinal`. The code uses the general update pattern to handle entering, updating, and exiting elements, animating radius changes with `transition().duration()`. Timed `setTimeout` calls remove fruits, change an apple’s type to a lemon, and filter the array, illustrating how data joins update the visualization.

Loading thumbnail…

Untitled

A bowl of fruit demonstrates animated updates to a D3 data join. Apples and lemons are drawn as circles using `d3.scaleOrdinal` for color and size, with fruits entering, exiting, and changing type over time. The code uses `selection.data`, `merge`, and `transition` to smoothly move, resize, and remove circles. D3 v6 is loaded from a CDN, and the visualization runs on an SVG in a minimal HTML page.

Loading thumbnail…

Untitled

A bowl of fruit demonstrates the general update pattern for SVG groups in D3 version 6. An array of apples renders as green circles with labels, then a series of timed browser callbacks removes items, replaces an apple with a yellow lemon, and filters the array, showing how enter, update, and exit transitions handle each change. The code uses `selection.selectAll`, `groups.enter()`, and `.merge()` from the `d3` module, with `scaleOrdinal` mapping fruit types to colors and radii.

Loading thumbnail…

Untitled

This visualization charts world population by year using a smooth area chart. The SVG renders a filled region with a curved baseline, generated via D3’s `area()` with `curveBasis`. Time-scaled years appear on the x-axis, while a linear scale maps population values, formatted in billions. The chart includes axis labels and a title, and loads data from a CSV file. D3 v6 commands like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` are used to construct the axes and path.

Loading thumbnail…

Untitled

This visualization shows a week of temperature readings in San Francisco as a smooth red area chart over time. The data comes from a CSV file hosted on VizHub, parsed with `d3.csv` and rendered as SVG using D3 v6. It uses `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.area` with `curveBasis` to generate the curved filled path, and `d3.axisBottom` and `d3.axisLeft` with gridlines. The chart includes labeled axes and a title.

Loading thumbnail…

Untitled

Three line charts show temperature and accelerometer readings (a_x, a_y, a_z) collected from a smartphone sensor over a single week, with temperature plotted on the x-axis and each accelerometer axis on the y-axis. The visualization uses D3 v6 to scale and axis the data, then draws the series using `d3.line()` with blue, red, and green strokes. Sensor data comes from a CSV file, and the temperature values are normalized from raw integers via a formula in the code.

Loading thumbnail…

Untitled

A scatterplot charts the relationship between the number of operational kites and new oil wells per year, using data from the UCI Machine Learning Repository. Points show a downward trend as kite count increases. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `extent` for domains, and `axisBottom`/`axisLeft` for axes. Custom tick formatting converts large numbers, and CSS styles the circles with green fills and semi-transparency.

Loading thumbnail…

Untitled

A line chart displays daily temperature readings in San Francisco over one week, with time on the x-axis and temperature on the y-axis. The red curved line, generated using `d3.line` with `curveBasis`, connects the data points, while labeled axes and grid lines provide context. The visualization uses D3 v6 to load CSV data from VizHub, scales via `scaleTime` and `scaleLinear`, and renders axes with `axisBottom` and `axisLeft`. The SVG chart includes a title, axis labels, and a clean, grid-backed design.

Loading thumbnail…

Untitled

This visualization shows temperature readings in San Francisco over one week, plotting each measurement as a circular point along a time-based x-axis and a linear temperature y-axis. The chart includes labeled axes for time and temperature, with a title displayed above the plot. The code uses D3 v6 methods such as `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, and renders the data as SVG circles. The data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Loading thumbnail…

Untitled

This scatter plot visualizes forest fire data from the UCI Machine Learning Repository, plotting temperature against the Fine Fuel Moisture Code. Each circle represents a recorded fire, with the x-axis showing fuel moisture and the y-axis showing temperature. The visualization uses D3.js v6 with SVG rendering. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and the `csv` function to load the forestfires.csv dataset. The code maps the FFMC and temp columns through the `extent` function to establish the scales.

Loading thumbnail…

Untitled

This scatter plot shows the relationship between miles per gallon (x-axis) and vehicle weight (y-axis) for a dataset of cars from the UCI Machine Learning Repository. Each circle represents a car, with the SVG visualization rendered using d3.v6. The code uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.extent for data domains, with circles colored green and semi-transparent.

Loading thumbnail…

Untitled

Ten countries with the largest populations appear as red circles positioned along a point scale, with circle centers mapped by population on a linear x-axis. The chart uses D3 v6’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to render SVG elements, including grid lines and titles. Population values from `data.csv` are multiplied by 1,000 and labeled with a custom tick formatter. Fonts are set via Google Fonts, and the layout uses fixed margins and an SVG viewport.

Loading thumbnail…

Untitled

This chart displays the populations of the ten most populous countries, ordered along the y-axis with bars scaled by population value. The code loads data from a CSV file and uses D3 v6’s `csv`, `scaleLinear`, `scaleBand`, and `axisBottom` functions. Each bar's width maps to the population, with the x-axis formatted in billions. The SVG is rendered with a dotted green outline on rectangles and custom font styling.

Loading thumbnail…

Customising Axes

A bar chart displays new COVID-19 cases by English region on August 12, 2020, using data from coronavirus.data.gov.uk. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` and `scaleBand` to map case counts and region names, while `axisLeft` and `axisBottom` generate the chart’s axes. Rectangles are appended via a data join, with a custom Xanh Mono and Roboto Mono font styling and dotted green outlines on each bar.

Loading thumbnail…

Untitled

This chart displays new COVID-19 cases on August 12th, 2020, for nine regions of England, using horizontal bars whose lengths encode case counts. Built with D3 v6, it loads data from a local CSV file via `d3.csv`, scales values with `scaleLinear` and `scaleBand`, and renders SVG rectangles. Axis ticks are generated using `axisLeft` and `axisBottom`. The data originates from the UK government’s coronavirus dashboard.

Loading thumbnail…

Untitled

A horizontal bar chart displays population estimates for ten countries, ranked from China to Mexico. The bars vary in length according to population values, with country names on the y-axis and population counts on the x-axis. Built with D3 v6, the chart uses `scaleLinear` and `scaleBand` for scales, `axisLeft` and `axisBottom` for axes, and SVG rectangles for bars. Data loads from a CSV file via `d3.csv`, with values multiplied by 1,000. Dotted outlines style the bars against a black background.

Loading thumbnail…

Untitled

This example shows a simple, stylized face built entirely from SVG primitives, with yellow circular head, black-outlined features, and a red background. A group element centers the face on the canvas, while nested groups position eyes and eyebrows relative to each other. The eyebrows animate vertically using two chained `transition` calls with a duration of 1000 milliseconds each, creating a continuous up-and-down motion. The code uses D3 v6’s `select`, `append`, and `attr` methods, and the mouth is generated using the `arc` shape generator with specified inner and outer radii and angle parameters.

Loading thumbnail…

SHAPES WITH SVG

This example demonstrates basic geometric shapes rendered with SVG, including circles, rectangles, lines, and paths, grouped and transformed using SVG’s `translate` and `scale` attributes. It shows how CSS classes like `.lines` style SVG elements, with stroke properties applied to lines and paths. The code uses raw SVG markup within an HTML page, complemented by a small JavaScript console log for demonstration. No external libraries are employed; rendering relies entirely on native SVG and CSS, showcasing foundational vector graphics primitives in a React-free setup.

Loading thumbnail…

Cars Report

This example demonstrates how to build a minimal HTML page that loads D3 v5 from the unpkg CDN and displays a text message extracted from a local JSON dataset. The code imports the cars dataset from a local ES6 module, parses it with JSON.parse, and updates the DOM by setting the text content of a pre element to the first car's make property. It also includes a separate ES6 module for message export and basic CSS styling to center and enlarge the displayed text.