Apriori

100%

✓ Published0🌍 Public

Last edited May 7, 2020

Created on May 7, 2020

This visualization displays sentiment scores for each day of the week as individual points in an SVG scatterplot. The code loads tab-separated data from a GitHub repository and maps days to ordinal x-axis positions while sentiment scores are scaled linearly on the y-axis. Hovering over a circle reveals a tooltip showing the associated itemset and score, highlighting the point in orange. The implementation uses d3.scale.ordinal and d3.scale.linear with d3.svg.axis for the chart’s axes and event handlers for the interactive tooltip.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Point scale

A small set of orange circles demonstrates D3's `d3.scalePoint()`, which maps categorical weekday names to x-coordinates. Each circle is placed along a horizontal line based on its associated day, with a fixed radius of 4 pixels, while the y-position is constant. The data, a simple array of weekday/value pairs, is bound to circles using `selectAll().data().enter().append()`. The visualization uses static SVG rendering within an HTML page, with all styling defined in CSS and the scale’s range set to 200 pixels.

AAlark Joshi

72% match

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

70% match

Loading thumbnail…

Working with time

This visualization displays a week of temperature readings in San Francisco using a scatter plot. It shows the relationship between time on the x-axis and temperature on the y-axis, with a tooltip on each point that reveals the day of the week. Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` to map data, `AxisBottom` and `AxisLeft` for axes, and SVG circles for marks. Data comes from a CSV file loaded via D3's `csv` function.

Llaplantalaplanta

70% 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

69% 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

69% match

Loading thumbnail…

Timeseries Plot

This example visualizes a week of San Francisco temperature data as a scatterplot, with time on the x-axis and temperature on the y-axis. Each data point is rendered as a circle, and hovering over a circle displays a tooltip with the corresponding day of the week. The code uses `scaleTime` and `scaleLinear` from D3 v5 to map data to pixel coordinates, while React handles the SVG rendering. The data is loaded as CSV via `d3.csv` and transformed with date parsing and numeric conversion. Axis components are custom-built using React, and the overall layout leverages D3’s `extent` and `nice` functions for domain adjustments.

Ffjvoris

68% match

Loading thumbnail…

A week in San Francisco - Scatter plot

This scatter plot visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each circle represents a data point, rendered in SVG with a steelblue fill and opacity. The code uses D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and grid lines. Data is loaded as CSV from a remote dataset, parsed into JavaScript Date objects and numeric values, then bound to circles via `selectAll` and `enter`. A rotated y-axis label and title are included for clarity.

YYedrup

68% match

Loading thumbnail…

Sentiment Scores of Tweets

A scatterplot displays sentiment scores for a sequence of tweets, indexed along the x-axis with AFINN-based scores on the y-axis. The visualization reveals that most tweets cluster around a neutral score of zero, with sporadic positive and negative outliers. The chart is built with D3 v3, using SVG circles, linear scales, and axes to map tweet index and sentiment score. Data is loaded from a CSV file containing tweet indices and their corresponding sentiment values.

JJverma

68% match