Untitled

100%

✓ Published0🌍 Public

Last edited Sep 3, 2021

Created on Sep 3, 2021

A scatterplot maps labeled emotions (Happy, Surprised, Anger, Sadness) against a time axis (0–100), showing when each emotion occurs in the recorded sequence. The D3.js v4 code loads emotion and time data from a CSV file, scales the axes with `scaleLinear` and `scaleBand`, and renders circles with SVG. Axis titles and rotated labels are added via `axisLeft` and `axisBottom`, with margins and a title included in the React-based visualization.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Emotions vs Time

This visualization plots emotions against time using circles positioned along a linear time axis and a categorical emotion axis. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom with custom tick styling. Circles are rendered via SVG selections, with a steelblue fill, while axis labels and a title use d3.append. The data comes from a small inline CSV file.

Jjpdlourenco98

86% match

Loading thumbnail…

Fork of React & D3 Starter

This visualization maps reported emotions onto a two-dimensional space using x and y coordinates, with each emotion rendered as a point. The code uses React's `useData` hook to load data from a CSV, and D3.js `scaleLinear` scales to position the points. A density contour overlay, created with `d3.contourDensity()` and `d3.geoPath()`, highlights clusters of emotions, colored with a custom `d3.scaleLinear` color scale. The visualization leverages D3's axes module for gridlines and margins within an SVG rendered by React.

CCheng Tang

80% match

Loading thumbnail…

Fork of React & D3 Starter

This visualization presents a scatter plot of emotional states, with each point positioned by x and y coordinates derived from survey responses. The chart encodes user-reported emotions like "Desire," "Enthusiastic," and "Loved" in a 2D space, likely representing dimensions of emotional valence and arousal. Built with React and D3 v7, the code uses a `useData` hook to load CSV data and a `viz` function that constructs an SVG via D3's selection API. The project demonstrates a decoupled React-D3 integration pattern, where the `VizWrapper` component manages the SVG element and invokes the D3 rendering logic through a ref.

CCheng Tang

79% match

Loading thumbnail…

Untitled

A temporal scatterplot displays circles representing entries from a CSV file, each positioned along a time axis based on parsed dates. A draggable slider with a play button animates through the timeline, revealing circles that grow in size upon entry. The visualization uses D3 v4 with SVG rendering, leveraging d3.scaleTime, d3.drag, and d3.csv to handle date parsing, slider interaction, and data loading within a React framework.

NNathanGBIM

78% match

Loading thumbnail…

Rocket Ship

This example visualizes emotional states over time as a scatterplot, with time plotted on the x-axis (0–100) and emotion categories on the y-axis. It uses D3 v4 with an SVG rendering approach, drawing circles for each data point from a CSV file. The chart includes labeled axes for emotions and time, plus a title. The rendering is built using d3.csv to load the data, d3.scaleLinear for both scales, and d3.axisBottom/axisLeft for the axis components, all within an Angular component.

Jjpdlourenco98

78% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the emotional states recorded over time from the emotions.csv dataset, mapping time on the x-axis and emotion on the y-axis with red semi-transparent circles. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the tick marks and labels. The SVG chart is styled via CSS, with a large title and axis labels, while the y-axis domain is derived from the categorical emotion values. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, though the code plots the provided emotions file.

Jjpdlourenco98

78% match

Loading thumbnail…

Untitled

This scatter plot shows the relationship between Happiness Score and rate of depressive disorders, with each circle’s size encoding population and color distinguishing four geographic regions. The visualization uses D3.js (v3) to load a CSV file via `d3.csv`, maps data to positions with `d3.scaleLinear`, assigns categorical colors with `d3.scaleOrdinal`, and renders SVG circles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with opacity set to 0.5 for overlapping points.

Vvihaansubhash

78% match

Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini

77% match