Skip to main content
Log in
M

MathReynaud

@MathReynaud·14 public vizzes

Loading thumbnail…

fresh block

This example demonstrates how to parse a date string containing a timezone offset and extract its local time components using D3’s time parsing utilities. It converts an ISO-like timestamp with a UTC offset into a JavaScript Date object via `d3.timeParse`, then reassembles the hours and minutes into a new string with a different format. The code uses `d3.timeParse` twice, first with a format that includes the offset and second without it, but does not render any visualization.

Feb 7, 2018
Loading thumbnail…

France

This map of France uses a conic conformal projection to display the country’s administrative regions. The visualization renders each geographic feature as a separate SVG path, with the projection centered on the country’s coordinates. Built with D3 v4, the code relies on `d3.geoConicConformal()` and `d3.geoPath()` to transform GeoJSON data into the final map. The geographic data is loaded from a local file named “France.json,” and the resulting paths are drawn without additional styling or interactivity.

Feb 2, 2018
Loading thumbnail…

D3: Removing values from a chart

Clicking the text removes the first value from a static D3 bar chart, shifting the remaining bars left and recalculating their heights. The example demonstrates the enter, update, and exit pattern with `dataset.shift()`, re-binding data to SVG `rect` and `text` elements, and updating ordinal `xScale` and linear `yScale` domains. Transitions animate the bars sliding to new positions or exiting off the right edge.

Jan 30, 2018
Loading thumbnail…

D3: Removing values from a chart

Clicking the text removes the first value from a static D3 bar chart, shifting the remaining bars left and recalculating their heights. The example demonstrates the enter, update, and exit pattern with `dataset.shift()`, re-binding data to SVG `rect` and `text` elements, and updating ordinal `xScale` and linear `yScale` domains. Transitions animate the bars sliding to new positions or exiting off the right edge.

Jan 30, 2018
Loading thumbnail…

Stacked bar chart v4

This stacked bar chart shows ten samples across five series, with each series rendered as a color-coded segment. The visualization begins as a standard stacked bar layout, then animates the rectangles into a grouped arrangement, shifting the bars horizontally and adjusting their heights. Built with D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to compute the stacked values and transitions. The SVG output is animated using the `d3-transition` library, with random data generated on the fly. The chart highlights how the same data can be represented in both stacked and grouped forms.

Jan 26, 2018
Loading thumbnail…

td3

This visualization displays two side-by-side scatterplots of the Iris dataset, plotting sepal length against sepal width. Each point is encoded with a symbol and color representing the flower species, while point size reflects petal length. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate distinct patterns for setosa, versicolor, and virginica. The SVG renderings are created by appending paths to separate chart divs, with scales computed from the CSV data using `d3.extent` and `d3.axisBottom`/`d3.axisLeft` for axes.

Jan 26, 2018
Loading thumbnail…

Scatterplot Iris using different marks

This scatterplot of the Iris dataset uses geometric symbols to encode the flower species, with sepal length and width mapped to the x and y axes. The size of each symbol additionally encodes petal length. Rendered using D3.js v4 with SVG, the visualization employs `d3.scaleOrdinal` to assign both colors from the `d3.schemeCategory20` palette and distinct symbol types via `d3.symbols`. An interactive legend allows users to isolate a single species by clicking its label, which filters the displayed marks by toggling their opacity.

Jan 26, 2018
Loading thumbnail…

Mathilde_TD2

A D3.js scatterplot maps sepal length against sepal width for the classic Iris dataset, with each of the three species distinguished by a unique marker shape (triangle, cross, star) and color (red, orange, blue). The visualization also overlays per-species least-squares regression lines, computed from the CSV data, using `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.symbol` for the custom point glyphs. SVG rendering is used throughout.

Jan 23, 2018
Loading thumbnail…

Mathilde_TD2

This visualization displays the classic Iris dataset, plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by a unique symbol and color (red triangles for setosa, orange crosses for virginica, and blue stars for versicolor) on an SVG scatterplot. The view also overlays a least-squares regression line for each species, computed from the plotted data. The visualization is built with D3 v4, using `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.symbol` to define the custom point shapes.

Jan 23, 2018
Loading thumbnail…

Mathilde_TD2

This example visualizes the classic Iris dataset, plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by both color (red, orange, blue) and symbol shape (triangle, cross, star), with a separate least-squares regression line overlaid for each group to show the linear relationship between the variables. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.symbol` for the categorical point markers, and custom regression calculations to draw the trend lines.

Jan 23, 2018
Loading thumbnail…

Mathilde_TD2

This visualization displays the classic Iris dataset, plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by a unique symbol and color (red triangles for setosa, orange crosses for virginica, and blue stars for versicolor) on an SVG scatterplot. The view also overlays a least-squares regression line for each species, computed from the plotted data. The visualization is built with D3 v4, using `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.symbol` to define the custom point shapes.

Jan 23, 2018
Loading thumbnail…

D3: Drawing with iris data

This example visualizes the classic Iris dataset as a scatter plot, showing sepal length against sepal width. Each data point is rendered as a distinct SVG symbol (triangle, cross, or star) and color-coded by species: red for setosa, orange for virginica, and blue for versicolor. The visualization also includes linear regression lines for each species, calculated using a custom `leastSquaresequation` function, to highlight trends within the groups. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.symbol`, and `d3.axisBottom`/`d3.axisLeft` to construct axes and symbols, with data loaded from an external CSV file.

Jan 23, 2018
Loading thumbnail…

D3: Drawing with iris data

This example visualizes the classic Iris dataset by plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by a unique symbol shape and color: red triangles for setosa, orange crosses for virginica, and blue stars for versicolor. The visualization also overlays a least-squares regression line for each species, computed from the data, to show trends in the relationship. Built with D3 v4, the code loads the CSV data and uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` to render the SVG scatterplot and its axes.

Jan 21, 2018
Loading thumbnail…

D3: Drawing with iris data

This example visualizes the classic Iris dataset by plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by a unique symbol shape and color: red triangles for setosa, orange crosses for virginica, and blue stars for versicolor. The visualization also overlays a least-squares regression line for each species, computed from the data, to show trends in the relationship. Built with D3 v4, the code loads the CSV data and uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` to render the SVG scatterplot and its axes.

Jan 21, 2018