Skip to main content
Log in
A

amnicpo

@amnicpo·7 public vizzes

Loading thumbnail…

Untitled

This interactive scatter plot displays two measured variables, Spe_1 and Spe_2, as semi-transparent circular points on Cartesian axes. Users can zoom and pan the chart using the mouse. The visualization uses d3.zoom to handle user interactions, rescaling the linear scales with d3.event.transform. Axes update through d3.axisBottom and d3.axisLeft, while a clipPath prevents points from rendering outside the plot area. Data loads from a CSV file hosted on GitHub, and the chart is rendered in SVG within a React-based page using d3.v4.

Mar 1, 2022
Loading thumbnail…

Untitled

This interactive scatterplot displays Iris flower measurements, plotting sepal length against petal length for individual specimens. The visualization supports panning and zooming through a d3.zoom behavior, which rescales both the x and y axes and repositions the circles accordingly. Using D3 v4 with an SVG rendering approach, the chart loads data from a CSV file containing the classic Iris dataset. A clipPath restricts the points to the plotting area, while an invisible overlay rectangle captures pointer events to initiate zoom transformations.

Mar 1, 2022
Loading thumbnail…

Untitled

This example shows a scatterplot of data points colored by alignment (yes/no) that can be zoomed along the x-axis using a brush. The visualization loads CSV data and renders circles with an SVG, using d3.brushX to let users select a horizontal range, which then updates the x-axis domain and repositions the circles with a transition. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and a clipPath to confine the brush and points to the plotting area. Data comes from a remote GitHub CSV file.

Mar 1, 2022
Loading thumbnail…

Untitled

This example shows an interactive scatterplot of the Iris dataset, plotting sepal length against petal length with points colored by species. A horizontal brush (d3.brushX) lets the user select a range along the x-axis; upon release, the chart zooms in by updating the x-scale domain and animating the axis and circle positions over one second using transitions. The data loads from a CSV via d3.csv, and all rendering uses SVG with d3.v4.

Feb 28, 2022
Loading thumbnail…

Zoomable #4

This interactive scatter plot visualizes the Iris dataset, encoding multiple quantitative attributes via dropdown menus that switch the X and Y axes. D3 v6 scales (scaleLinear and scalePoint) map values to positions, while categorical variables use point scales. The reusable chart pattern uses selection.join with transitions, animating circles and axes over 1 second when data mappings change. SVG rendering displays semi-transparent circles that grow on entry, with axes drawn using d3.axisLeft and d3.axisBottom.

Feb 28, 2022
Loading thumbnail…

Example Zoomable #3

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting miles per gallon against horsepower as a scatter plot. Each point’s size encodes vehicle weight, while its color represents the region of origin, and hovering reveals the model name. The visualization is built with the vega-lite-api library, which compiles specifications into Vega-Lite and renders them via Vega, with d3.csv used to load the data. The chart is configured for full-window sizing and uses a custom dark theme for improved readability.

Feb 28, 2022
Loading thumbnail…

Untitled

This example shows an interactive scatterplot of the Iris dataset, plotting sepal length against petal length with points colored by species. A horizontal brush (d3.brushX) lets the user select a range along the x-axis; upon release, the chart zooms in by updating the x-scale domain and animating the axis and circle positions over one second using transitions. The data loads from a CSV via d3.csv, and all rendering uses SVG with d3.v4.

Feb 24, 2022