Skip to main content
SimilarExport ZIP
100%

Rocket Ship

✓ Published0🌍 Public
Jjpdlourenco98
Last edited Sep 3, 2021
Created on Sep 2, 2021
Forked from D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

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.

Jjpdlourenco98
78% match
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
75% 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
75% 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
73% match
Loading thumbnail…

Rocket League Interactive Scatter Plot - CJKraenzle

This interactive scatter plot visualizes Rocket League statistics from top players across the first three competitive seasons, plotting win percentage against miscellaneous score per game. Users can select continuous statistics for the x-axis, y-axis, and circle radius, as well as a nominal attribute for color, via dropdown menus. The visualization is built with D3 v4, Redux, and d3-component, using SVG with smooth transitions and animations for an engaging exploration of player performance data.

CCJKraenzle
72% 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
70% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes life satisfaction data by plotting year on the x-axis against happiness rank on the y-axis, using circles with partial opacity to show individual data points. The visualization is built with D3 v5, employing scaleTime and scaleLinear for axes, with axisBottom and axisLeft generating the ticks. The data is loaded from a CSV file hosted on VizHub, and the SVG rendering includes labeled axes and a title. The code uses d3.csv to fetch and parse the dataset, with Date.parse converting year values.

CChooo4u
68% match
Loading thumbnail…

Scatter Plot

This example plots temperature readings from a CSV file over time, showing the daily temperature cycle in San Francisco. The visualization uses D3 v5 with React, rendering an SVG scatter plot where each circle represents an hourly observation. The code employs D3’s `scaleTime` and `scaleLinear` to map timestamps and temperatures to coordinates, with `axisBottom` and `axisLeft` for labeled axes. The data is loaded via `d3.csv`, and circles are appended to the SVG with a fixed radius and red fill at reduced opacity.

Ggregosaure
68% match