Skip to main content
SimilarExport ZIP
100%

maple oak scatterplot

✓ Published0🌍 Public
Mma-jacobs
Last edited May 23, 2023
Created on May 23, 2023

This scatterplot uses leaf-shaped SVG symbols to compare the distribution of maple and oak observations across two numeric coordinates. The visualization loads external maple and oak illustration SVGs from an Amazon S3 bucket, converts them into reusable patterns via `d3.xml`, and applies them as fill patterns using D3 v5’s selection and scale APIs. Points are plotted with the `d3.symbolSquare` marker, while axes and titles are generated through `d3.axisBottom`, `d3.axisLeft`, and a custom text element. The chart’s data consists of nine labeled coordinate pairs representing the two tree species.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE06 2 part

This scatter plot visualizes the relationship between trunk diameter and height for three tree species—Maple, Oak, and Pine—using a CSV dataset. The chart encodes species through colored circles (green, brown, darkgreen) with a legend, while axes display height on the y-axis and trunk diameter on the x-axis. The visualization uses D3 v5 to load and parse the data, create linear scales with `scaleLinear`, and render SVG circles via `selectAll` and `join`. Axis labels and titles are added using `axisLeft` and `axisBottom`, with styling applied through CSS classes.

Sshreyasribearelly@gmail.com
75% match
Loading thumbnail…

Trees

Three linked scatterplots display 100 simulated trees, comparing height by age, location on a map of the woods, and annual growth by distance from a spring. A shared brush highlights the same tree across all charts simultaneously. Built with D3 v3 and SVG, the example loads tree measurements from a CSV and uses `d3.svg.brush` to coordinate selections, while `d3.scale.linear` and `d3.svg.axis` render axes. A green field rect marks the mapped area.

JJustinGOSSES
72% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays tree measurements—leaf width, trunk diameter, leaf length, and height—as colored circles, with species mapped to blue, red, green, or yellow. Built with D3 v6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. Every two seconds, the plot cycles the x-axis variable among the four measurement columns, animating the data points’ positions. The data is loaded from a CSV file via `d3.csv` and parses numeric fields before plotting.

Sshreyasribearelly@gmail.com
72% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This scatter plot displays iris flower measurements, mapping petal width against sepal length and encoding species with distinct symbols. It uses a reusable D3 module pattern with `scaleLinear`, `scaleOrdinal`, and D3’s symbol generators to render SVG paths. Data is loaded from a CSV via `d3.csv`, parsed into numeric values, and plotted with axes generated by `axisLeft` and `axisBottom`. The chart fills the viewport and uses a margin-based layout for responsive positioning.

JJustin Roberts
71% match
Loading thumbnail…

Reusable D3 Scatterplot w/ symbols

This example shows a reusable scatterplot rendered with SVG that maps iris flower measurements—petal length against sepal length—using distinct D3 symbols to differentiate species. The chart includes axes, labels, and a legend-free encoding of the categorical species variable through symbol shapes. Built with React and D3 v3, the code defines a configurable `scatterPlot` function using `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate paths. Data is loaded asynchronously from a CSV using `d3.csv`, with numeric parsing applied to the measurement columns.

Ccardoza-IPH
71% match
Loading thumbnail…

Scatterplot with Shapes

This scatterplot displays five data points from a small CSV file, plotting x and y values on linearly scaled axes. The points are rendered as triangle-up SVG symbols, drawn with a steelblue fill and black stroke. Built with D3 v3, the code loads the CSV, coerces values to numbers, computes domains with `d3.extent`, and uses `d3.svg.axis` for the axes and `d3.svg.symbol` for the point shapes, positioning them via SVG `transform` attributes.

Mmbostock
70% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

A four-by-four scatter plot matrix compares every pair of numeric measurements in the iris dataset, with points colored by species using the `d3.scaleOrdinal` schemeSet1 palette. Each cell renders an SVG with `d3.axisLeft` and `d3.axisBottom` scales, while diagonal panels label their corresponding feature. The code fetches the CSV via `d3.csv`, parses numeric fields, and loops through all combinations to append individual SVGs sized to a quarter of the window. D3 v6 is loaded from a CDN and used as a browser global.

Aadventuresenglish.info@gmail.com
70% match
Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization shows a 4x4 scatter plot matrix comparing all numeric fields of the iris dataset, with points colored by species using `d3.scaleOrdinal` and `schemeSet1`. Each cell pairs two variables, with axes drawn via `d3.axisLeft` and `d3.axisBottom`, and diagonal cells display variable titles. The code loads CSV data from a GitHub gist, parses it with `d3.csv`, calculates extents with `d3.extent`, and renders the matrix across the full window using multiple SVGs sized to a quarter of the viewport. It relies solely on D3 v6 in vanilla JavaScript.

Aadventuresenglish.info@gmail.com
70% match