Lukas Schießer

@lschiesser·5 public vizzes

Area chart

This area chart visualizes world population growth over time, using a smooth filled curve to show the increasing trend. The chart is rendered with D3 v5 in SVG, pulling data from a CSV file of world population by year. The code uses `d3.area()` with a basis curve to generate the path, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. Axis labels and a title are added via SVG text elements, with tick formatting that converts large population values to billions.

Mar 15, 2020

Loading thumbnail…

Line chart

This line chart visualizes temperature changes in San Francisco over time using a smooth curved line, with time on the x-axis and temperature on the y-axis. It loads CSV data from a `vizhub.com` dataset and renders with D3 v5’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`. The SVG output includes axis labels, a title, and grid lines, with styling defined in CSS. The data is preprocessed by parsing timestamps and numeric temperature values before rendering.

Mar 15, 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 SVG rendering uses D3 v5 to map each car as a semi-transparent red circle, with a linear scale for both axes and grid lines provided by `d3.axisBottom` and `d3.axisLeft`. Axis labels and a title are added as SVG text elements, with styling applied via a linked CSS file.

Mar 15, 2020

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with customized axes. The y-axis displays country names using d3.axisLeft, while the x-axis uses d3.axisBottom with a tick formatter that converts values to abbreviations like "1.42B" and draws grid lines via tickSize. The code removes default axis domains and tick lines, and adds axis labels and a title with custom text styling. Data is loaded from a CSV file using d3.csv, with population values multiplied by 1000.

Mar 14, 2020

Loading thumbnail…

Making a Bar Chart

This example shows the populations of the ten most populous countries in 2018, based on United Nations data, as horizontal bars ordered by rank. It demonstrates custom D3 axes with a linear x-scale for population and a band y-scale for country names. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render the axes within an SVG container.

Mar 14, 2020