SnipeShoot

@SnipeShoot·3 public vizzes

Hello VizHub

This example demonstrates a bar chart visualization that displays categorical data from a default table, with bar heights scaled to the maximum metric value. The chart is rendered on a Canvas element, where the dimensions and metrics are drawn as filled rectangles and text labels. The code uses the Canvas API for drawing, `dscc.subscribeToData` for data subscriptions, and `dscc.objectTransform` for data transformation, while the styling is controlled by a custom color property and an external stylesheet.

Sep 5, 2019

Loading thumbnail…

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 its position determined by the car’s horsepower on the x-axis and weight on the y-axis. The visualization uses d3.csv to load the data, then leverages d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to construct the axes and scales. The SVG rendering includes grid lines and labeled axes, with the chart drawn within specified margins using D3’s selection and data-join methods.

Sep 4, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The chart uses D3 v5’s `scaleLinear` and `extent` functions to map data to coordinates, with axes generated via `axisLeft` and `axisBottom`. Each car is represented as a red semi-transparent circle, rendered as SVG. The visualization includes labeled axes and a title, with data loaded asynchronously from a CSV file.

Sep 4, 2019