Skip to main content
SimilarExport ZIP
100%

d3.conventions

✓ Published0🌍 Public
11wheel
Last edited Aug 22, 2016
Created on Mar 13, 2015

This example demonstrates the convenience of the d3-jetpack library for succinctly creating scatterplots. It plots the classic Iris dataset, showing sepal length versus sepal width, with points colored by species and a corresponding legend. The code uses `d3.conventions` to handle scales and axes, `d3.tsv` to load the tab-separated data, and custom `appendData` and `translate` methods to build the SVG. It also includes a tooltip for additional interaction.

AI-generated description

Succinct graphing with d3-jetpack.

Compare to the original.

Similar vizzes

Loading thumbnail…

Reusable d3 with jetpack & starterkit

This example demonstrates how to streamline D3.js code using the d3-jetpack and d3-starterkit libraries. It shows a scatter plot of Iris flower data, with sepal width and length mapped to the x and y axes. The visualization reduces repetitive JavaScript by introducing helper functions like `ƒ` for field access and composition, and a `dataAppend` method for creating and appending elements. The code also simplifies common SVG operations, such as appending elements with class names like `append("g.legend")` and using `.translate([0, height])` for positioning.

11wheel
84% match
Loading thumbnail…

D3 Example

A scatter plot of the Iris dataset displays sepal length against petal length, with point size mapped to sepal width and color mapped to species. The visualization shows how D3.js (version 3.5.5) dynamically styles axes through JavaScript, applying custom font, size, and stroke properties to tick labels, axis labels, and axis lines using `d3.selectAll` and `.style()`. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering uses `d3.scale.linear` and `d3.svg.axis` for scaling and axis generation.

AAndresAnayaIsaza
82% match
Loading thumbnail…

D3 Example

This example visualizes the classic Iris dataset as a scatter plot, encoding sepal length, petal length, and sepal width on the x-, y-, and radius scales, while color encodes species. It demonstrates a “popping effect” by using the CSS `currentColor` keyword so that each circle’s semi-transparent fill and opaque stroke share the same data-driven color, revealing overlaps between marks. Built with D3 v4 and rendered as SVG, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.csv` for data loading and scales.

CCurran Kelleher
82% match
Loading thumbnail…

D3 Scatter Plot

This example uses D3 v7 to render an interactive scatter plot of the Iris dataset, loaded via `d3.csv` from a GitHub gist. The visualization maps petal length on the x-axis and sepal length on the y-axis using `scaleLinear` and `extent`, with points colored by species via `scaleOrdinal` and `schemeCategory10`. SVG circles are bound to data with `join`, and each carries a `<title>` tooltip. Hovering triggers a CSS transition that enlarges the circle’s radius, while `axisLeft` and `axisBottom` add labeled axes.

Ddanheavern
81% match
Loading thumbnail…

d3 and scatterplot

This example displays the classic Iris dataset as a scatterplot, plotting sepal width on the x-axis and sepal length on the y-axis. The code loads the data from a CSV URL and uses d3.csv to parse it, then constructs linear scales with d3.scaleLinear to map the data to screen coordinates. It renders circular marks via SVG circle elements and adds axes using d3.axisLeft and d3.axisBottom. The visualization is built with React, though the core charting logic relies entirely on D3 v7.

Pparag776
81% match
Loading thumbnail…

d3 Starter

This example uses D3 v6 and the SVG rendering framework to display the classic Iris dataset as a scatter plot. It loads the CSV from a GitHub gist and parses numeric columns, then uses `scaleLinear` for both axes to map petal length against sepal length. The code demonstrates D3's modern `join` API to bind data to circles, and includes `axisLeft` and `axisBottom` for labeled axes with a custom font size. The plot fills the browser window, resizing with `window.innerWidth` and `window.innerHeight`.

TTsaiJie
81% match
Loading thumbnail…

D3 Example

This scatter plot of the Iris dataset maps sepal and petal measurements, encoding species with color and sepal width with point radius. It demonstrates a reactive data-joining architecture where scales and axes update automatically via D3’s data binding, with the SVG visualization responding to browser resizing through CSS-controlled dimensions.

CCurran Kelleher
81% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flowers of three species. Using D3.v4, it constructs an SVG scatter plot with labeled, ticked axes, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for coordinate mapping and axis generation. The visualization also demonstrates custom axis label styling and margin-based layout, with data loaded from a CSV file.

CCurran Kelleher
81% match