MULTILINE MOOD

100%

MULTILINE MOOD

✓ Published2🌍 Public

Last edited Mar 30, 2020

Created on Mar 30, 2020

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.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

MULTILINE MOOD

This example shows three profit trends across time, one line for each customer segment, with an ordinal color scale distinguishing consumer, corporate, and home office data. A color legend at the right identifies each category. The visualization uses d3.csv to load the data, d3.nest to group records by segment, and d3.line with curveBasis to smooth the paths, while d3.scaleLinear and d3.axisBottom/axisLeft handle the axes.

Ssafdarawan

78% match

Loading thumbnail…

MULTILINE MOOD

This visualization displays profit trends across product sub-categories, with each line representing a different region. The chart uses a basis curve to smooth the multi-line paths, and a color legend identifies each region. Built with D3 v5 and Vue, the code employs `d3.nest()` to group data by region and `d3.scaleOrdinal` for color mapping. The SVG rendering includes axes with gridlines, and the data comes from a CSV file containing sales records.

Pprincit

77% match

Loading thumbnail…

simple line chart from dataset

This simple line chart visualizes a small dataset of monthly values across seven categories, showing the trend of a metric over time. The chart encodes each data point as a grey circle on a black polyline, with the x-axis using an ordinal scale for category names and the y-axis using a linear scale for values. The code, built with D3 v3, parses dates from the dataset and renders the SVG with a fixed size. On mouseover, circles turn red, a dynamic value label appears, and a dashed guide line drops to the baseline; the final value is labeled at the line’s end.

FFrancoisDEAVEIRO

72% match

Loading thumbnail…

Simple line chart

A simple line chart displays twelve months of numeric values, with a black polyline connecting evenly spaced points and a large label showing the final value. The chart includes interactive circles that turn red on hover, revealing the corresponding value and a dashed vertical guide line using SVG transitions. Built with D3.js v3, it uses ordinal and linear scales, SVG paths for the line, and JSON data loaded via `d3.json`.

JJulesSauvinet

72% match

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.

BBerengerCunillera

72% match

Loading thumbnail…

Multiline chart

This multiline chart displays profit trends across regions over time, with each line representing a region and colored via a categorical scale. Built with D3 v5, the visualization uses `d3.nest` to group data by region, `d3.line` with `d3.curveBasis` for smooth paths, and custom axis and legend components. The data, sourced from Data Canvas - Sense Your City, is loaded from a CSV and rendered as SVG.

Ii202081

71% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016, showing a trend with peaks in May and dips in March and June. The chart uses an SVG canvas, with time parsed via `d3.timeParse` and formatted with `d3.timeFormat`, while an ordinal time scale on the x-axis and a linear scale on the y-axis map the data. The line path is generated by `d3.line`, and circles represent each data point. Hovering a circle highlights it in red, draws a dashed vertical guide line, and displays the value in bold text, all implemented with D3 v4 event handlers. The data comes from the included `dataset.json` file.

CChaf1A

71% match

Loading thumbnail…

mouli line chart

This example visualizes daily temperature changes over time using a simple line chart. It renders a blue path with a 2-pixel stroke across an 800x400 SVG, with date on the x-axis and temperature in degrees Celsius on the y-axis. The code loads CSV data from a remote URL, parses dates and numeric values, then uses d3.scaleTime, d3.scaleLinear, and d3.line to map the data points. Axes are added using d3.axisBottom and d3.axisLeft, with axis labels indicating the variables.

Ddmouli369@gmail.com

71% match