Skip to main content
Log in
V

vitoriss12

@vitoriss12·6 public vizzes

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes temperature data for San Francisco, plotting longitude against latitude from a CSV file. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while a `line` generator with `curveBasis` draws a smooth path. Data is loaded via `csv()` and converted to numbers, with the SVG output styled through CSS. The visualization includes axis labels and a title, sourced from the Data Canvas project.

Aug 3, 2020
Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor visualizes a vector field derived from a CSV dataset containing longitude, latitude, and delta values. Using D3.js v5 and React, it renders nodes positioned by geographic coordinates and edges with arrows that indicate direction and magnitude. The graph is drawn as an SVG with computed deltaX and deltaY offsets, showing how the vectors point across the spatial domain. The interface supports editing the graph structure through node and edge manipulation.

Jul 8, 2020
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between wind velocity and height, using data from a CSV file. D3.js version 5 is used to create the SVG rendering, mapping velocity to the x-axis and height to the y-axis with circle marks. The chart includes labeled axes and a title, with the x-axis formatted using a custom tick format and the y-axis using a scalePoint. The data comes from a simulated dataset of height and velocity pairs.

Jun 29, 2020
Loading thumbnail…

Line Chart

This line chart displays temperature readings over a week in San Francisco, plotting each data point as a semi-transparent circle connected by a smooth blue curve. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with gridlines. The line is generated using the `line` generator with a `curveBasis` interpolation to smooth the path. Data is loaded from a CSV file using `d3.csv`, with timestamps parsed via `new Date` and temperatures converted to numeric values.

Jun 28, 2020
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with points colored by species. An interactive color legend using React hooks highlights one species at a time while fading others, achieved through onMouseEnter and onMouseOut events on SVG circles. The visualization uses d3.scaleOrdinal for colors, d3.scaleLinear for axes, and renders via React to SVG with data loaded from a CSV using d3.csv.

May 31, 2020
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, using a sequential spectral color scale to distinguish categories. The visualization renders geographic boundaries with `d3.geoPath`, projecting the world using the Natural Earth projection and enabling zoom and pan through `d3.zoom`. The code loads world topology from TopoJSON and joins it with TSV metadata via `d3.tsv`, while a custom color legend component displays the categorical scale. Hovering highlights individual countries in red, and the map includes data from the world-atlas dataset.

May 15, 2020