ralevine

@ralevine·4 public vizzes

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository. Users can choose which data columns to plot on the X and Y axes via dropdown menus, which trigger re-renders using the `dropdownMenu` custom module. The chart uses `d3.csv` to load data, `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circles with animated transitions (`transition().duration(2000)`) to smoothly move points when selections change.

Dec 11, 2019

Loading thumbnail…

Shapes with SVG

This example uses D3 v5 to draw a simple, cheerful face entirely with SVG shapes. It creates a yellow circle for the head, two smaller black circles for eyes, and a semi-circular path for a mouth, all positioned precisely within the SVG canvas. The code directly uses the D3 `select` API to append shapes to the SVG and the `d3.arc` function to generate the mouth's path data. The visualization demonstrates fundamental SVG drawing capabilities with D3.

Dec 11, 2019

Loading thumbnail…

Shapes with SVG

This example demonstrates SVG shape rendering within a web page using D3 version 5.14.2. The code selects the SVG element and applies a red background, while CSS classes define stroke styles for line shapes. The visualization is built on a fixed 960x500 canvas, with the D3 library handling element selection and styling through the `select` and `style` methods. The page includes external dependencies for JavaScript and Google Fonts, though the primary focus is on showing basic SVG container setup rather than complex data mapping.

Dec 11, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to combine D3.js with standard JavaScript to display text on a webpage. It uses D3's select function to set the content of a div element, while a separate div is updated using the native document.getElementById method. The code imports a message from an ES6 module and relies on d3.v5 as the primary library. The page features a dark background with Ubuntu font styling, showing basic DOM manipulation and module imports within the VizHub framework.

Dec 10, 2019