Skip to main content
Log in
D

Daniel Frey

@danielfrey63·5 public vizzes

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smoothed path showing temperature fluctuations. Data is loaded via `csv` from a remote dataset and parsed into JavaScript `Date` and numeric values. The SVG output includes styled grid lines, axis labels, and a title, with the chart drawn inside a margin-based layout.

Apr 27, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The code uses d3.csv to load the data and d3.scaleLinear with d3.extent to map the values, while d3.axisBottom and d3.axisLeft render the axes with tick lines and labels. Instead of typical circles, it draws a smooth curve through the points using d3.line with a curveBasis interpolation, appending an SVG path per data element. The title and axis labels are added as SVG text elements.

Apr 26, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smoothed path showing temperature fluctuations. Data is loaded via `csv` from a remote dataset and parsed into JavaScript `Date` and numeric values. The SVG output includes styled grid lines, axis labels, and a title, with the chart drawn inside a margin-based layout.

Apr 26, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects 2017. It uses d3.scaleLinear and d3.scaleBand to map population values and country names, with d3.axisBottom and d3.axisLeft for the axes. The chart customizes tick formatting using d3.format to abbreviate numbers, replacing 'G' with 'B' for billions. Data is loaded from a CSV file via d3.csv, rendered as SVG rectangles with a steelblue fill.

Apr 24, 2020
Loading thumbnail…

Cars Schotter Plot

This scatterplot visualizes the relationship between vehicle weight and horsepower for a dataset of cars. Each point represents a car model, with its position determined by weight on the x-axis and horsepower on the y-axis, using semi-transparent turquoise circles. The visualization employs `d3.csv` to load the data, `scaleLinear` for both axes, and `axisLeft` and `axisBottom` to render labeled gridlines. Styling is applied through CSS, with tick lines highlighted in light green and axis labels in green.

Apr 18, 2020