C

cocktaildata

@cocktaildata·21 public vizzes

Loading thumbnail…

MULTILINE MOOD

This multi-line chart tracks the frequency of seven different moods across the twelve months of the year. The mood categories, such as "bien" and "fatigué," are each drawn as a separate colored path, with a legend identifying each line. The visualization uses D3 version 5 to read a CSV file, with `d3.nest` organizing the data by mood. Lines are rendered with `d3.line` and a basis curve, while axes and legends are built using scale functions and custom legends to display the ordinal color scale.

Loading thumbnail…

MULTILINE MELTED

This visualization shows population trends for world regions from 1950 to 2100, with each line representing a continent and colored using a categorical scale. The chart uses a time-based x-axis and a linear y-axis for population, with the legend ordered by each line’s final value. Built with d3.scaleTime, d3.scaleLinear, and d3.line, the data is melted from UN population estimates and medium-variant projections, then rendered as SVG paths with a basis curve.

Loading thumbnail…

BAR CHART

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. Axes are customized with tick formatting that converts values to billions (e.g., replacing "G" with "B") and removed domain lines. Population data is loaded from a CSV file and multiplied by 1000.

Loading thumbnail…

SUNBURST PLOT

This zoomable sunburst plot visualizes the hierarchical flare dataset, displaying nested categories as concentric arcs whose angular width and radial distance encode each node’s relative value. Clicking an inner arc zooms into that subtree, animating the layout and updating visible labels. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and draw the geometry, with `transition.attrTween` handling the smooth zoom animation. An ordinal color scale applies a rainbow palette to top-level branches, and SVG paths render the final graphic, which supports interactive navigation through the hierarchy.

Loading thumbnail…

STACK CHART

This example displays a stacked bar chart of deaths by cause across age groups, using WHO data for women in Africa in 2012. It renders with D3.js SVG and animates transitions between counts and percentages via radio buttons, using `d3.layout.stack` with offsets "zero" and "expand" to reshape the bars. The chart also includes a categorical color legend and hover effects that reduce opacity.

Loading thumbnail…

TITRE

A linked visualization combines a multi-line chart and a pie chart to explore global population trends from 1950 to 2100. Hovering over the line chart selects a year, updating the pie chart to display the population distribution across regions for that year. The line chart, built with d3.line and axis components, shows regional populations over time, while the pie chart uses d3.pie and d3.arc. A color legend links both views. Data comes from the UN Population Estimates, split between historical estimates and medium-variant projections.

Loading thumbnail…

MULTILINE CHART

This multiline chart displays one week of temperature data across multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, while d3.nest groups readings by city and d3.line with curveBasis draws smoothed paths. An interactive color legend, built with a custom colorLegend function, identifies each city. The SVG rendering includes responsive axes with grid lines, and stroke blending via mix-blend-mode: multiply enhances line overlap.

Loading thumbnail…

SCATTER PLOT II

This scatter plot displays relationships between pairs of numeric attributes of cars, such as fuel efficiency and horsepower, from an auto-mpg dataset. Two dropdown menus let the user select which columns to plot on the x- and y-axes. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while circles animate from the center using the `.transition()` API with staggered delays. SVG output shows each point with a fixed radius and semi-transparent fill.

Loading thumbnail…

MAP - CHOROPLETH

A choropleth map visualizes county-level poverty rates across the United States, using a blue sequential color scale and a legend with percentage tick marks. County boundaries are drawn with SVG paths via `d3.geoPath`, colored by data from a CSV file, and overlaid with white state lines from a TopoJSON mesh. The implementation loads both datasets with `Promise.all`, applies the `d3.scaleThreshold` color scheme, and adds interactive tooltips on each county path.

Loading thumbnail…

MAP - CHOROPLETH

This choropleth map displays countries colored by their economy type using a sequential color scale from d3.schemeSpectral, with geographic paths rendered as SVG via d3.geoPath and the Natural Earth projection. Users can click color legend circles to highlight matching countries and dim others, with the legend and map sharing unidirectional data flow through a render function. The map loads world topology from TopoJSON and merges country names from TSV data, while d3.zoom enables pan and zoom interactions on the choropleth.

Loading thumbnail…

ANIMATION

This example demonstrates a dynamic fruit bowl where apples and lemons appear, disappear, and change type over time, governed by a series of timed state updates. It shows how D3's data-join pattern (enter, merge, exit) handles array mutations, with ordinal scales mapping fruit types to colors and radii. The code uses `d3.scaleOrdinal` for styling and SVG `circle` and `text` elements, while rendering is triggered by `setTimeout` callbacks that modify the data array and re-invoke the render function.

Loading thumbnail…

SCATTER PLOT

A scatter plot visualizes the relationship between two numeric variables from a dataset of automobile characteristics, with each circle representing a car's miles per gallon and horsepower. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and SVG circles with a light blue fill and opacity for data points. Data is loaded via `csv()` from a remote URL, with numeric fields parsed and rendered into a bounded plot area with custom axis labels.

Loading thumbnail…

LINE CHART

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.line with curveBasis to render a smooth path in SVG. Axis labels, a title, and gridlines are included via d3.axisLeft and d3.axisBottom, with margins applied to the chart group.

Loading thumbnail…

AREA CHART

This area chart displays one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses D3.js v5 to render an SVG path with a smooth curve via `d3.area` and `curveBasis`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales are set using `d3.scaleTime` and `d3.scaleLinear`. The chart includes labeled axes and a title, with the filled area styled light blue.

Loading thumbnail…

MAP - SIZED POINTS

This example displays a world map with points sized by city population, revealing geographic population clusters. The map uses an equirectangular projection with graticules and country boundaries. The visualization is built with React and D3 v5, using d3.geoNaturalEarth1 for projection, d3.geoPath for rendering geographies, and d3.scaleSqrt for encoding population values as circle radii. City data comes from a CSV with 50,000+ populated places, while country boundaries derive from the World Atlas TopoJSON. Semi-transparent circles preserve readability over dense areas.

Loading thumbnail…

RADIAL TREE

This radial tree visualization displays a hierarchical dataset of world countries, organized by continent and subregion. Built with D3 v4, it uses the `d3.cluster` layout to position leaf nodes around a circular arc, with curved `path` links connecting parent and child nodes. The SVG rendering includes size-scaled text based on node depth and supports panning and zooming via `d3.zoom`. Node labels are rotated adaptively for readability, and a glow effect is applied to non-leaf labels via CSS `text-shadow`. The data is loaded from a JSON file using `d3.json`.

Loading thumbnail…

MAP - CIRCLES

This map visualization displays global population data for 2018 using proportional circles positioned at country centroids. The geographic context uses a Natural Earth projection rendered through d3.geoPath, with countries colored gray or brown depending on data availability. Circle radii scale with population via d3.scaleSqrt, and a legend explains the size encoding. The visualization supports pan and zoom through d3.zoom, with data loaded from CSV and TopoJSON files processed via d3.csv and topojson.feature. Hover tooltips show region names and formatted population values.

Loading thumbnail…

MAP

A map of world countries renders as SVG paths, with each country colored white and outlined in dark grey, while oceans appear light blue. Hovering a country turns it light blue. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country boundaries from the world-atlas TopoJSON dataset, with `topojson.feature` converting the raw data into features. Zooming is enabled via D3’s `zoom` behavior, which applies transforms to the map group.

Loading thumbnail…

FACE

A smiling face is drawn using SVG shapes, with a light blue circle for the head, two dark eyes, and a mouth formed by a D3 arc path. The left eyebrow animates upward and downward through chained D3 transitions, while the right eyebrow remains fixed. The example uses D3 v5 selection methods and the `arc` generator, with a React framework and SVG rendering, to create a simple interactive-style visual.

Loading thumbnail…

TREE

This tree visualization displays a hierarchical dataset of world countries organized by continent and subregion, using a horizontal icicle-style layout. The D3 v5 code builds the structure with `tree()` and `hierarchy()`, renders edges as SVG paths via `linkHorizontal()`, and labels nodes with scaled text. Users can zoom and pan through the SVG canvas using the `zoom()` interaction API, with the viewport transform applied to a group element. Data comes from a JSON file, and styling uses the Maven Pro font with cyan edges.

Loading thumbnail…

AREA CHART II

This area chart displays world population by year, with a light blue filled area under a smooth curve. The data is loaded from a CSV file and rendered as an SVG. The visualization uses d3’s `scaleTime` and `scaleLinear` for the axes, along with `area` and `curveBasis` for the smoothed area path. Grid lines are drawn via `axisBottom` and `axisLeft`, with tick labels formatted using d3’s `format`.