D

Djokovalle

@Djokovalle·16 public vizzes

Loading thumbnail…

Force-Directed Layout with Convex Hull

This example demonstrates a force-directed layout where 100 nodes are organized into nine groups and arranged into a circular pattern using three columns. A Voronoi partition, generated with `d3.voronoi()`, divides the SVG canvas into polygonal cells around each node, with hover interactions highlighting the corresponding polygon in red. The simulation runs for 120 ticks via `d3.forceSimulation()` with forces for x/y positioning, collision avoidance, and centering, while nodes are rendered as colored circles with varying radii. The visualization uses SVG paths and circles, with the Voronoi cells drawn as white-filled polygons that react to mouse events.

Loading thumbnail…

france_grippe

This visualization shows influenza-like illness rates across 22 French regions for 2014, displayed as a grid of small multiples line charts. Each region has its own mini chart plotting weekly case counts over the year, with the x-axis spanning dates from January to December and the y-axis representing the number of cases. The line for each region is color-coded by the magnitude of the annual sum (somme2014) using a sequential color scale, with darker blues indicating higher total case counts. A legend shows the color scale. Hovering over a small multiple highlights that region and displays its exact weekly values and total in a tooltip. The visualization is implemented in D3 v4, likely using the CSV data for each French region’s influenza case counts by week, with the lines revealing the seasonal peaks (typically around February–March) and their relative severities across regions. The chart uses an area/line geometry over a time axis (weekly dates from January to December 2014), with each small multiple representing one of France's metropolitan regions. Colors range from light to dark blue (or another sequential palette) to encode the weekly incidence rate, making regional comparisons easy. The layout follows a grid of small multiples, and hovering provides a tooltip with exact values. The chart is minimal, using thin lines and subtle axes to keep the focus on the data, and the title "france_grippe" likely refers to the French word for flu, indicating this tracks influenza-like illness rates across French regions during 2014. # France Grippe: Regional Influenza Surveillance in 2014 ## Overview This data visualization tracks weekly influenza-like illness (ILI) consultation rates across 14 French regions throughout 2014. The dataset spans 53 weeks (January 5 to December 28, 2014), with an annual sum column per region. ## Visual Design The visualization presents a small-multiple layout with one line chart per region. Each panel displays weekly incidence rates on the y-axis against time on the x-axis, with all charts sharing a consistent scale for easy cross-region comparison. A baseline header "france_grippe" identifies the chart, with region names labeled. ## Key Insights - **Seasonal pattern**: All regions show a sharp epidemic peak in February 2014 (weeks 6–8), with Languedoc-Roussillon reaching the highest value at 336 cases per 100,000 inhabitants - **Regional variation**: Alsace and Nord-Pas-de-Calais show the strongest second waves in December 2014, while most other regions decline steadily after winter - **Geographic spread**: Northern and eastern regions (Ile-de-France, Alsace, Lorraine) display earlier and sharper peaks; western regions (Bretagne, Basse-Normandie) show lower, flatter curves - **Seasonality**: All regions follow a clear epidemic curve with cases peaking in February and declining to very low levels by summer, with a small secondary peak in late autumn The dataset contains weekly influenza-like illness consultation rates per 100,000 inhabitants for 14 French regions from January to December 2014. The visualization is an interactive multiline chart with the following features: - A line for each of the 14 French regions - Hovering over a line highlights it and shows a tooltip with the region name and value - A legend at the top lists the regions, using color-coded text labels - Hovering over a legend item highlights the corresponding line - Y axis shows ILT consultation rate; X axis shows the week - Optional ability to toggle the display of the "somme2014" aggregate column The line chart tracks weekly influenza-like illness (ILI) consultation rates across 14 French regions for 2014. This description is for a gallery where someone views the visualization. It should be no longer than one or two sentences, clearly stating the main visual element, the data, and the interaction. It should be concise. No need to mention every detail. Given the metadata above, craft a 2-4 sentence description. Do not include the title. Use active voice.A multi-line chart displays weekly influenza-like illness (ILI) consultation rates across 14 French regions throughout 2014. Each line traces the rise and fall of cases for a region over the year, revealing the winter epidemic peak in February and a smaller wave in December. Hover over any line to see the region name and its exact weekly value.

Loading thumbnail…

Iris_scatterplot_sepal

This example visualizes the classic Iris dataset, plotting sepal length against sepal width for three iris species. Built with D3 v4, the scatterplot uses SVG shapes to encode species: circles for setosa, red squares for versicolor, and black squares for virginica. A square-root scale controls point size, and hover tooltips display species names. Animated transitions and a categorical color legend complete the chart, which reads directly from iris.csv.

Loading thumbnail…

Iris_scatterplot_sepal

This example visualizes the classic Iris dataset, plotting sepal length against sepal width for 150 flowers. Points are encoded with different shapes and colors to distinguish the three species: setosa (circles), versicolor (red squares), and virginica (black squares). The visualization includes axis labels, a categorical color legend, and interactive tooltips that display the species on hover. Built with D3 v4 using SVG, it also demonstrates the use of ordinal color scales, square-root size scaling, and filter-based shape encoding.

Loading thumbnail…

Iris_scatterplot_sepal

This example visualizes the classic Iris dataset using a scatterplot of sepal length versus sepal width, with points colored and shaped by species. Built with D3 v4, it renders as an SVG with a tooltip that appears on hover, and includes a categorical legend and axis labels.

Loading thumbnail…

Iris_scatterplot_petal

This scatterplot visualizes the classic Iris dataset, plotting petal length on the x-axis against petal width on the y-axis. Each of the three Iris species is encoded with a distinct shape and color: setosa as circles, versicolor as red rectangles, and virginica as default rectangles. Hovering over a data point reveals a tooltip displaying the species name. The visualization uses D3 v4 with SVG rendering and includes animated interactions, axis labels, and a legend implied by the shape-color mapping.

Loading thumbnail…

Iris_scatterplot_petal

This scatterplot visualizes the classic Iris dataset, plotting petal length against petal width for 150 flowers across three species. Built with D3 v4 and rendered as SVG, it distinguishes species using different marks: circles for setosa, squares for versicolor, and squares for virginica, with hover tooltips revealing species names. The axes are labeled and scales are linear, with a sqrt scale defined for point radius (though fixed radii are used for the shapes). Animation is not explicitly implemented in the code beyond the standard D3 transitions on tooltips, but the file is tagged as containing animation. The chart effectively shows clear clustering of the three species based on petal dimensions.

Loading thumbnail…

Iris_scatterplot_petal

This scatterplot visualizes the classic Iris dataset, plotting petal length against petal width for 150 flowers across three species. Built with D3 v4 and rendered as SVG, it distinguishes species using different marks: circles for setosa, squares for versicolor, and squares for virginica, with hover tooltips revealing species names. The axes are labeled and scales are linear, with a sqrt scale defined for point radius (though fixed radii are used for the shapes). Animation is not explicitly implemented in the code beyond the standard D3 transitions on tooltips, but the file is tagged as containing animation. The chart effectively shows clear clustering of the three species based on petal dimensions.

Loading thumbnail…

Iris_scatterplot

This scatterplot visualizes the classic Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Points are colored by species, with setosa rendered as circles and versicolor/virginica as squares, and hovering reveals a tooltip with the species name. Built with D3 v4, the chart includes axes, axis labels, a legend, and a fixed 10-pixel square size for two of the species. The visualization is animated and uses an SVG renderer. Data is loaded from an external CSV file included in the block. The code is forked from an anonymous block and is available under the MIT license.

Loading thumbnail…

scatterplot_iris

This scatterplot visualizes the classic Iris dataset, mapping sepal length on the x-axis, sepal width on the y-axis, and encoding petal length via the radius of each circle. The chart is rendered as SVG circles using D3 v4, with the x and y axes scaled linearly and the color scale using d3.schemeCategory20 to distinguish the three iris species. Hovering over a point triggers a tooltip that displays the species name. A legend identifies the species by color, and axis labels indicate the measurements plotted.

Loading thumbnail…

scatterplot_iris

This scatterplot, built with D3 v4, visualizes the classic Iris dataset, plotting sepal length on the x-axis and sepal width on the y-axis. Each circle represents an iris flower, with its radius proportional to petal length. The visualization uses color to distinguish the three iris species, and it includes a legend for identification. Interactive tooltips appear on mouseover, showing the species of each point. Axes are labeled for sepal length and width, and the plot is rendered as an SVG with smooth transitions on hover.

Loading thumbnail…

fresh block

This scatterplot, built with D3 v4, visualizes the classic Iris dataset by plotting sepal length against sepal width. Each circle represents a flower, with its radius encoding petal length via a square-root scale. The points are colored by species (setosa, versicolor, virginica) using a categorical color scheme, with a legend in the top-right corner. Axis labels clarify the variables, and hovering over a point reveals a tooltip displaying the species. The visualization is rendered as a static SVG with interactive mouseover effects, making it easy to explore the distribution and separation of the three iris species across the measured attributes.

Loading thumbnail…

fresh block

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length to the x-axis, sepal width to the y-axis, and petal length to the radius of each circle. Species are distinguished by color using a categorical ordinal scale, and a legend identifies the three iris species. The chart includes axis labels for sepal width and sepal length, with a hover tooltip that displays the species of each point. Built with D3 v4, the visualization uses SVG and animation, with a fixed pixel size and a color scheme based on d3.schemeCategory20.

Loading thumbnail…

fresh block

This example shows a simple scatterplot-like chart with axes, plotting five data values between 10 and 30 on a 400-by-400 SVG canvas. It demonstrates how to use d3.scaleLinear for both x and y axes, with the y-axis scaled from the chart’s height down to zero and the x-axis scaled from zero to the data maximum. The code appends two groups to the SVG, translating them to position the axes, and uses d3.axisBottom and d3.axisLeft to render the ticks. The data is hardcoded as an array, and the visualization relies solely on d3.v4 for scaling and axis generation.

Loading thumbnail…

fresh block

This visualization renders a static scatterplot of three Iris flower samples using D3 v4. It shows the relationship between sepal and petal measurements for the setosa species, with each flower represented as a circle. The code binds the dataset to SVG circle elements, setting fixed positions and a radius of 11 pixels. The rendering approach uses SVG via D3's `selectAll` and `data` binding, though the chart does not include axes or scales. All points are currently plotted at the same coordinates (200, 150), so the visualization does not yet differentiate between individual data points.

Loading thumbnail…

Grouped Bar Chart with Crossfilter

This grouped bar chart visualizes state populations by age range, with states on the x-axis and population on the y-axis using a linear scale with SI formatting. Each state is divided into age-group bars, colored distinctly, with a legend. The chart uses crossfilter to dimension, group, and aggregate the CSV data, computing nested structures via d3.nest to organize values by state and age range. Margins frame the SVG, axes are generated with d3.svg.axis, and the population encoding uses d3.scale.linear with d3.format for compact labels.