BerengerCunillera

@BerengerCunillera·10 public vizzes

Coordinated Scatterplot Iris (d3.v4)

Two coordinated scatterplots display the classic Iris dataset, comparing sepal and petal measurements across the three species. Each circle is positioned by one pair of measurements, with point size encoding a third measurement and color encoding species. Built with D3 v4 and SVG, the plots use linked hover interactions—hovering a point in either chart highlights the corresponding point in both—by filtering all circles with matching data. Axes are automatically scaled from the data, and a tooltip is prepared for detail display, though it is not fully implemented. The two charts share the same color scale for species, facilitating cross-comparison of the dataset's four numerical variables.

Oct 17, 2017

Loading thumbnail…

scatterplot in progress

This scatterplot, titled "scatterplot in progress," visualizes the classic Iris dataset using D3.js v4. It plots sepal length on the x-axis against sepal width on the y-axis, with each point's radius mapped to petal length and color mapped to species using a categorical scale. The visualization includes axis labels generated by D3's axis components and a legend identifying the three iris species. The chart is rendered as SVG within a fixed 960x500 viewport, with black circles overlaid on a white background, and the title hints at its iterative, work-in-progress nature.

Oct 17, 2017

Loading thumbnail…

scatterplot in progress

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length and sepal width to the x- and y-axes while encoding petal length in the radius of each circle and species in color. Built with D3 v4 and rendered as SVG, the chart loads iris.csv and applies linear scales for all three variables, with the radius scale bounded between 2 and 15 pixels. The visualization uses a categorical color scheme (d3.schemeCategory20) to distinguish the three iris species, and axes are drawn on the bottom and left edges of the plotting area.

Oct 17, 2017

Loading thumbnail…

scatterplot in progress

This example visualizes the classic Iris dataset as a scatterplot, with sepal length and width mapped to the x and y axes, petal length encoded by point size, and petal width by color. Built with D3 v4 and rendered as SVG, the chart separates the three species (setosa, versicolor, virginica) using distinct colors, and includes axes, a legend, and transition-based brushing that filters points based on a selection. The visualization is a work in progress, forked from an earlier block, and uses the famous Fisher iris measurements from the bundled `data.csv`.

Oct 17, 2017

Loading thumbnail…

Scatterplot Iris (d3.v4)

This scatterplot visualizes the classic Iris dataset using D3.js v4, mapping sepal length and width to the x- and y-axes. Each flower is represented by a circle whose radius encodes petal length, while color distinguishes species (setosa, versicolor, virginica) via a categorical scale. The chart includes labeled axes, a legend, and hover tooltips that display the species of each point. Built with SVG and animation, the visualization offers an interactive overview of the dataset’s structure and species groupings.

Oct 17, 2017

Loading thumbnail…

Scatter Plot

This scatter plot displays ten randomly generated data points distributed across a two-dimensional plane, with each circle’s position determined by linear scales mapping the data range to pixel coordinates and its radius scaled proportionally. The visualization uses D3 v4 to create an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code applies `d3.scaleLinear` for both x and y positioning, `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring each circle, and a separate radius scale. The data originates from `d3.range(10).map(Math.random)`, producing a simple, uncluttered chart that highlights basic scatter plot construction without external data files.

Oct 17, 2017

Loading thumbnail…

Scatter Plot

This example creates an empty scatter plot using D3.js v4, setting up a fixed SVG canvas with defined margins and dimensions. The code establishes a scalable vector graphics (SVG) container and applies a translation transform to position a group element within the plot area. The visualization does not include any data points or axes, focusing solely on the foundational layout structure. It uses D3’s selection and attribute methods to configure the SVG’s width, height, and transform, preparing the coordinate system for future data binding. The data source is not specified in the visible code, and no rendering beyond the empty scaffold is demonstrated.

Oct 17, 2017

Loading thumbnail…

Scatter Plot

This example creates an empty scatter plot using the D3.js v4 library, rendering an SVG container with defined margins and dimensions. The visualization establishes a blank canvas with no data points or axes, focusing solely on the structural setup for future plotting. The code initializes an SVG element sized 960 by 500 pixels, appends a group element translated according to the margin values, and prepares the coordinate system. It demonstrates the foundational steps of building a scatter plot, though it does not yet include any data, scales, or visual encodings.

Oct 17, 2017

Loading thumbnail…

Line Chart

This line chart visualizes monthly values for categories A through L, showing trends over time with a thick orange line connecting circular data points. The chart includes value labels and date labels for each point. Built with D3.js v3, it uses an ordinal x-scale, a linear y-scale, and SVG rendering. Hovering over a circle triggers a smooth transition that enlarges the point to yellow, reveals its corresponding value text, and draws a vertical orange line from the baseline, using D3's selection filtering and transition methods. The data comes from a local JSON file.

Oct 17, 2017

Loading thumbnail…

ScatterPlot

This scatterplot uses D3 to display a set of points on an SVG canvas, with axes drawn via a linear scale. The code defines explicit margins and dimensions, then appends an SVG group to position the plot area. Each data point is rendered as a circle, though the dataset itself is not included in the visible code. The visualization focuses on showing the distribution of values across the x and y coordinates, with no additional encoding beyond position. The implementation relies on D3’s selection and scale APIs, following a standard margin-based layout pattern.

Oct 17, 2017