thomaslarkin7

@thomaslarkin7·5 public vizzes

Temperature in San Fransicso Scatter Plot

This scatter plot displays a week of temperature data in San Francisco, with each point representing a temperature reading over time. The visualization uses an SVG rendering approach with D3 v5, employing `scaleTime` and `scaleLinear` to map the timestamp and temperature dimensions. The code also draws a line connecting the points via `d3.line` and includes labeled axes. Data is loaded from a remote CSV file using D3's `csv` method, with axes rendered using `axisBottom` and `axisLeft`.

Feb 5, 2020

Loading thumbnail…

Temperature in San Fransicso Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, mapping time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, `extent` to compute domains, and `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as `Date` objects and temperatures converted to numbers. The chart includes labeled axes, a title, and semi-transparent blue circles for each temperature reading.

Feb 5, 2020

Loading thumbnail…

Scatterplot

A scatterplot of professors' salaries versus years since PhD, rendering each professor as a semi-transparent blue circle in an SVG. It shows the relationship between academic seniority and compensation using data from a CSV file. The visualization uses d3.scaleLinear for both axes, with d3.axisLeft and d3.axisBottom to add labeled axes, and includes a title and axis labels. Data is parsed from CSV, with numeric fields converted to numbers before plotting.

Feb 5, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the lengths of the ten longest rivers in the world, using data attributed to World Atlas. Horizontal bars represent each river, sorted by length with the Nile as the longest. The visualization is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` for the axes. Data is loaded from a CSV file, and all elements are rendered as SVG rectangles with steel-blue fills.

Feb 4, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page. It demonstrates the minimal structure required for a web-based visualization, using only HTML and inline CSS within an `index.html` file. The page sets the body’s text alignment to center and a large font size, with no external libraries or frameworks. It serves as a starting point for building more complex visualizations, contrasting with the separate React starter that incorporates a JavaScript framework. The code relies solely on standard HTML and CSS, omitting any data sources or rendering APIs.

Feb 3, 2020