Daniel Vanpelt

@dvanpelt-hub·4 public vizzes

Fork of React + D3 Viz Starter

A React and D3.js starter fork displays an empty SVG canvas. The visualization uses a reusable `VizContainer` component to abstract SVG and group elements while following standard margin conventions. The code integrates React 16 and D3 v6 via CDN links, with dimensions set to 960 by 500 pixels. The container renders gray rectangles to visualize the margin structure, which can be hidden by removing the `showMargins` prop. Currently, the example only demonstrates the boilerplate layout without any data or chart elements.

Jul 7, 2021

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with positions mapped by `d3.scaleLinear` scales, and axes rendered using `d3.axisBottom` and `d3.axisLeft`. The code loads data via `d3.csv`, parses numeric fields, and appends SVG circles and text labels. Interactive video instructions are embedded via an iframe. The visualization uses D3 v5, with styling defined in external CSS for ticks, labels, and the title.

Jul 7, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot shows the relationship between fuel efficiency (mpg) and horsepower for a sample of automobiles, with color encoding by region of origin and point size encoding vehicle weight. The visualization is built using the vega-lite-api library, which programmatically constructs a Vega-Lite specification that renders as an SVG. Data is loaded asynchronously via d3.csv from the UCI Auto MPG dataset, and the resulting chart includes interactive tooltips displaying the car model name. The code customizes the visual appearance through a separate config.js file and appends the rendered visualization to the document body.

Jul 7, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a static, centered “Hello HTML” message on a plain white page. The body text is styled at 13em using CSS, and the page includes a JavaScript script that logs “Hello JavaScript!” to the browser’s developer console. It demonstrates the minimal structure of an HTML document, with basic styling via a `<style>` block and interactivity through a `<script>` tag. No external libraries or frameworks are used.

Jul 6, 2021