Romersims

@Romersims·9 public vizzes

Fork of dataset

This example displays a time-series line chart of temperature readings from San Francisco, using an SVG rendering with D3.js v5. It demonstrates data loading via `d3.csv`, scales with `scaleTime` and `scaleLinear`, and axes created with `axisBottom` and `axisLeft`. The chart shows a single path generated by `d3.line`, with a grid of tick lines and labeled axes. The code also imports local ES6 modules and uses `d3.select` to manage the SVG, illustrating key D3 workflows in a VizHub environment.

Apr 12, 2022

Loading thumbnail…

dataset

This example displays a horizontal bar chart of the top 20 most traded stocks on the Brazilian B3 exchange, using data from a local CSV file. It loads D3 v5 from UNPKG and imports `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to parse the data, map quantities to bar widths, and render axes with a `.3s` tick format. The SVG renders steelblue rectangles, with labels and a title, while a separate ES6 module attempts to handle a button click but contains incomplete syntax.

Mar 10, 2022

Loading thumbnail…

b3estudo02

A horizontal bar chart displays the top trading volumes on the Brazilian B3 exchange, using a linear scale for the volume axis and a band scale for stock codes. The viz loads D3 via UNPKG, imports `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 module, and renders SVG rectangles after parsing the CSV data. Axis labels and tick styling use custom CSS classes.

Mar 9, 2022

Loading thumbnail…

scatterplot

This scatterplot displays the top 20 traded volumes on the B3 stock exchange, using a categorical y-axis for stock codes and a quantitative x-axis for volume. The code loads D3 v5 via UNPKG and uses `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG. Data values are parsed and multiplied by 1000 before plotting, with formatted tick labels using `format('.3s')`.

Feb 27, 2022

Loading thumbnail…

canvasteste

This example demonstrates basic canvas drawing and animation within a VizHub page. It uses a D3 selection to set the text of a message div, then draws a red rectangle and a series of horizontal lines on a 600x300 canvas via the Canvas 2D API. A button triggers a `myMove` function that animates the canvas element by incrementing its CSS `top` and `left` positions with `setInterval`. The code imports `select` from D3 and a local ES6 module for the message text.

Feb 15, 2022

Loading thumbnail…

Three JS Starter

This example demonstrates a minimal setup for integrating D3 version 7 with a WebGL-powered Three.js scene. It renders a blank canvas element positioned through CSS, while the JavaScript imports D3’s `select` function to insert the text “Hello D3 version 7” into the page body, alongside the `dat.gui` library for potential controls. The code shows how to load D3 from a CDN and combine it with external libraries, though it performs no data visualization or simulation. The rendering approach is purely static, outputting to the DOM and a WebGL canvas without any drawing logic.

Feb 11, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal Three.js scene featuring a rotating green cube rendered with WebGL. The code sets up a perspective camera, a box geometry with basic mesh material, and an animation loop that updates the cube’s rotation each frame. It uses Three.js’s `Scene`, `PerspectiveCamera`, `WebGLRenderer`, and `requestAnimationFrame` to create the 3D visualization. The page also includes a static HTML message styled with CSS, while the JavaScript for the cube is embedded directly in the document.

Feb 11, 2022

Loading thumbnail…

testejs

This example demonstrates a minimal web page that combines HTML, CSS, and JavaScript with canvas rendering. It displays a large “Hello HTML!” message while also drawing a red rectangle and a series of horizontal grid lines on a canvas element using the Canvas 2D API. A separate “Hello world!” text is injected into a div via `document.getElementById` and `textContent`. The source code uses vanilla JavaScript with no external libraries, showing basic canvas drawing commands like `fillRect` and `stroke`.

Jan 19, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static web page that combines styled HTML text with inline SVG shapes. A red circle and a blue outlined rectangle are drawn directly within the SVG markup, while a styled header and paragraph provide context. The code utilizes core HTML, CSS, and JavaScript, with CSS transitions applied to the circle’s font-size property, though no animation is triggered without additional scripting. The page is a minimal starter template for experimenting with D3.js and web visualization, rendering entirely through the browser’s native SVG and CSS capabilities.

Jan 19, 2022