Skip to main content
Log in
J

jpdlourenco98

@jpdlourenco98·7 public 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.

Sep 8, 2021
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.

Sep 6, 2021
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.

Sep 3, 2021
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, showing the relationship between horsepower and weight for individual car models. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and `d3.csv` for data loading. Red, semi-transparent circles mark each car, with grid lines and labeled axes clarifying the quantitative values. The code parses all numeric fields and applies margins to position the chart within a 960×500 pixel SVG canvas.

Sep 3, 2021
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.

Sep 3, 2021
Loading thumbnail…

Fork of Axes with React & D3

This example visualizes the top 10 most populous countries as a horizontal bar chart, with the y-axis listing countries and the x-axis showing population counts. The chart uses React hooks (useState, useEffect) to fetch data from the United Nations World Population Prospects 2019 CSV, while D3 v5 provides the scaleBand and scaleLinear for positioning. Axes are manually constructed with D3’s tick generation and rendered as SVG elements, including vertical grid lines and text labels. The bars are simple SVG rectangles, with the chart wrapped in a React component and rendered via ReactDOM.

Sep 1, 2021
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, showing the relationship between horsepower and weight for individual car models. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and `d3.csv` for data loading. Red, semi-transparent circles mark each car, with grid lines and labeled axes clarifying the quantitative values. The code parses all numeric fields and applies margins to position the chart within a 960×500 pixel SVG canvas.

Aug 27, 2021