Skip to main content
Log in
A

AlxClt

@AlxClt·10 public vizzes

Loading thumbnail…

TP4

A choropleth map of France displays the cumulative seasonal count of influenza cases for each region in 2014, colored from white to green on a linear scale. The visualization loads regional data from a CSV file and geographic boundaries from a GeoJSON file, then merges them. It uses `d3.geoConicConformal` and `d3.geoPath` to draw the regions, while a D3 linear scale with an HCL interpolation maps the summed yearly values to the color range. Hovering over a region reveals its name via a tooltip.

Feb 6, 2018
Loading thumbnail…

TP4

This visualization displays the weekly incidence of flu cases across French regions throughout 2014, using a choropleth map where colors range from blue to yellow based on case counts. The map, rendered with D3 v4, employs the `d3.geoConicConformal` projection and `d3.geoPath` to draw regional boundaries from a GeoJSON file, while a linear color scale maps aggregated case data from a CSV dataset onto each region. The visualization merges tabular flu statistics with geographic shapes, providing a temporal overview of the seasonal epidemic's intensity and spread across the country.

Feb 2, 2018
Loading thumbnail…

TP4

This example displays a static GeoJSON polygon representing a geographic region, drawn as an SVG path on a 960×500 canvas. The code uses d3-geo to project and render the region’s coordinates, though no visible interaction or data-join occurs. The visualization is minimal, showing only the raw shape without additional styling or context, serving as a basic template for geographic mapping with D3 v4.

Feb 2, 2018
Loading thumbnail…

TP3

This example shows a stacked bar chart of average monthly stock prices for four companies over eleven years, with a click interaction that toggles between stacked and grouped modes. The bars animate smoothly between the two layouts using chained `transition` calls. It uses D3 v4’s `d3.nest()` to aggregate the CSV data, `d3.stack()` for stacking, and `d3.scaleBand`/`d3.scaleLinear` for positioning. The SVG rectangles transition their `x`, `y`, `width`, and `height` attributes over time.

Feb 1, 2018
Loading thumbnail…

Stacked bar chart v4 - TP3

This example shows a stacked bar chart with five series of ten random values each, rendered as vertically stacked color-coded bar segments. The chart uses D3 v4 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.stack` to map data to positions and heights, with SVG rectangles for each segment. The bars are colored via an ordinal palette, and the x-axis is a band scale with a small padding, while the y-axis domain is set to the sample count.

Jan 31, 2018
Loading thumbnail…

Grouped bar chart v4 - TP3

This example shows a grouped bar chart with ten sample categories across five series, drawn as colored vertical bars in an SVG. The data is randomly generated with `Math.random`, and the chart uses D3 v4’s `d3.scaleBand` for both the outer category scale and the inner series scale, while `d3.scaleOrdinal` assigns a categorical color palette. Bars are positioned by translating each group and placing rectangles with explicit `x` and `y` attributes, with axes formatted via the standard D3 axis components.

Jan 31, 2018
Loading thumbnail…

TP2

This example visualizes the classic Iris dataset, plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by a unique D3 symbol shape and color: crosses for setosa, stars for versicolor, and wye symbols for virginica. A green line overlays the scatterplot, representing a linear regression trend calculated from the data’s sepal dimensions. The visualization is built with D3 v4, using its SVG rendering, linear scales, axis generators, and symbol API to display the categorical data points.

Jan 23, 2018
Loading thumbnail…

D3.js TP 2

This example sets up a blank D3.js v4 visualization with a predefined margin and layout, reserving space for a chart within an 760x760 pixel area. The code establishes the SVG dimensions and margins, preparing the canvas for data rendering. It loads the classic Iris dataset from a CSV file, which contains sepal and petal measurements for three species of iris flowers. The visualization is built using the D3.js library, though the current code only initializes the basic structure without yet implementing any specific chart type or data binding.

Jan 22, 2018
Loading thumbnail…

D3.js TP 2

This example sets up a blank D3.js v4 visualization with a predefined margin and layout, reserving space for a chart within an 760x760 pixel area. The code establishes the SVG dimensions and margins, preparing the canvas for data rendering. It loads the classic Iris dataset from a CSV file, which contains sepal and petal measurements for three species of iris flowers. The visualization is built using the D3.js library, though the current code only initializes the basic structure without yet implementing any specific chart type or data binding.

Jan 22, 2018
Loading thumbnail…

fresh block

A sparse D3 visualization displays a single line of placeholder text on a plain SVG canvas. The example uses the D3.js v4 library to select the document body, create an SVG element with fixed dimensions of 960 by 500 pixels, and append a text element with a monospace font. The code, sourced from a gist, renders the static message "Edit the code below to change me!" positioned at specific x and y coordinates, demonstrating basic SVG creation through D3's selection and attribute methods without any interactive or animated features.

Jan 19, 2018