Remy-dev

@Remy-dev·7 public vizzes

Fork of Vega-Lite API Template

This example visualizes the relationship between CSS color keywords, their specifications, and RGB hex values using a scatter plot. Each point is colored by its corresponding keyword, with axes sorted by keyword frequency. The visualization is built using the Vega-Lite API, layered with d3.csv for data loading from a Gist-hosted CSV file. Custom configuration settings adjust axis styling and label fonts, while Vega Tooltip provides interactive hover details. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, adapted here for CSS color exploration.

Jan 18, 2022

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries, with each country positioned along a point scale and each population value mapped to a linear scale. The visualization uses D3 v7’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs to load the data and render circles in an SVG. Tick lines extend across the chart, and axis labels use a custom format that abbreviates numbers. The margin-based layout positions a title and axis labels within a fixed 960x500 viewport.

Jan 14, 2022

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each circle’s horizontal position corresponding to population magnitude and vertical position aligning with the country name. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scalePoint for the categorical y-axis, and d3.axisLeft and d3.axisBottom to render the axes. SVG circles are drawn via d3 selections, with margins defining the plotting area and formatted tick labels converting values from thousands to billions.

Jan 14, 2022

Loading thumbnail…

customizing axis

This example displays a horizontal bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. Using D3.v7, the code loads data from a CSV file and scales it by 1,000. It customizes the axes by removing the y-axis domain and tick lines, applying a custom tick formatter that converts values from G to B (billions), and styling grid lines and axis labels via CSS. The chart is rendered as SVG within a React-like setup, though the implementation uses direct DOM selection and appending.

Jan 14, 2022

Loading thumbnail…

Making a Bar char

This bar chart displays the population of the top 20 most populous countries, with countries on the y-axis and population on the x-axis. It uses D3 v7 with React and renders as SVG. The code employs `d3.csv` to load data, `scaleLinear` for the x-scale, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for the axes, drawing rectangles for each bar.

Jan 13, 2022

Loading thumbnail…

let's make a face with D3.js

This example renders a cartoon face in SVG using D3.js, with a yellow circular head, two eyes, and eyebrows that animate upward and back down. The code constructs the face by appending circles and rectangles to a group centered on the canvas, then uses `transition().duration()` to create a brief eyebrow-raising motion. A mouth is drawn with D3’s `arc()` generator, specifying inner and outer radii and angular range. The scene is static except for the eyebrow animation, demonstrating basic SVG shape construction and tweened transitions within a React framework.

Jan 13, 2022

Loading thumbnail…

shapes with SVG and CSS

This example visually demonstrates how CSS classes and inline presentation attributes combine to style SVG shapes such as circles, rectangles, lines, and paths. The markup uses plain SVG elements within a single `svg` container, with styling applied through both inline attributes like `fill` and `stroke-width` and a CSS class (`.lines`) that sets stroke properties. The code relies on native SVG APIs and CSS, with a minimal JavaScript file that writes "Hello world" into the page. The rendering approach is direct SVG, showing how grouped elements (`<g>`) can inherit and override visual properties.

Jan 13, 2022