lnfrnzsk

@lnfrnzsk·6 public vizzes

Temperature in San Fran Liniendiagramm

The visualization displays diesel prices over one week, with time on the x-axis and price on the y-axis, rendered as a smooth line chart using d3.line with curveBasis. The chart includes labeled axes with gridlines and a title, drawing from a local CSV file. The code uses d3.csv for data loading, scaleTime and scaleLinear for scales, axisBottom and axisLeft for axes, and appends SVG paths via d3.select.

Jun 9, 2022

Loading thumbnail…

Eine Woche Tankdaten: e5

A line chart tracks the price of E5 gasoline across one week in January 2021, with time on the x-axis and price on the y-axis. The visualization highlights price fluctuations using a smooth curve generated with `d3.line` and `curveBasis`. The code loads data from a CSV file using `d3.csv`, parses dates and numeric values, and renders axes with `d3.axisBottom` and `d3.axisLeft`. SVG output is produced through D3 selections, with scales created via `scaleTime` and `scaleLinear`.

Jun 8, 2022

Loading thumbnail…

Eine Woche Tankdaten: e10

The visualization displays a single week of E10 fuel prices from three Berlin gas stations as a line chart, tracing price fluctuations over time. It plots E10 price against date, with labeled axes and a title. The implementation uses D3 version 7, specifically the `select` API to target the SVG element, `csv` for data loading, `scaleTime` and `scaleLinear` for scaling, and `line` with `curveBasis` to create the smoothed path. Data comes from the provided CSV file, and rendering uses SVG with custom axis and title styling.

Jun 8, 2022

Loading thumbnail…

Temperature in San Fran Area Chart

This visualization presents a week of temperature data for San Francisco as an area chart, where the filled region highlights the temperature range over time against a grid of axis ticks. The chart is rendered as SVG using D3 v7, with a time-based x-axis and a linear temperature scale on the y-axis. The code employs d3.area with curveBasis to generate the smooth filled path, alongside d3.axisBottom and d3.axisLeft to construct the axes. Data is loaded from a remote CSV using d3.csv, parsed for timestamps and numeric temperatures, then scaled via d3.scaleTime and d3.scaleLinear.

Jun 8, 2022

Loading thumbnail…

Cars Scatterplot

The Cars Scatterplot visualizes the relationship between horsepower and vehicle weight for a dataset of 1970s automobiles. Each red semi-transparent circle represents a car model, plotted along the x-axis for horsepower and the y-axis for weight. The visualization is rendered as an SVG using d3.v7, with linear scales from `scaleLinear` for both axes. Axis ticks and labels are generated using `axisLeft` and `axisBottom`, while the data is loaded from an external CSV file containing auto-mpg statistics.

Jun 8, 2022

Loading thumbnail…

Barchart vol. 2 / Customizing Axis

This bar chart displays the top 10 most populous countries with population values on the x-axis and country names on the y-axis. It uses D3 v7's `scaleLinear` and `scaleBand` to map data, with `axisLeft` and `axisBottom` for axis generation, including customized tick formatting via `d3.format`. The SVG rendering omits axis domains and gridlines, styling bars in steelblue. Population data from a CSV file is multiplied by 1000 before visualization, with a title and custom-styled labels.

Jun 8, 2022