Franz Krah

@FranzKrah·5 public vizzes

Temperature in San Franisco Line Chart

This line chart visualizes a week of temperature readings in San Francisco, plotting temperature against time. The data is loaded from a CSV file and rendered as a smooth curve using d3.line with curveBasis. Axes are generated with d3.axisBottom and d3.axisLeft, while scales employ d3.scaleTime and d3.scaleLinear. The SVG output includes grid lines, axis labels, and a title, with styling applied via CSS classes like .line-path and .axis-label.

Jan 20, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The axes are labeled and scaled linearly using d3.scaleLinear, and the chart includes a title and axis labels. Data is loaded from a CSV file via d3.csv, then parsed and rendered as SVG circles with d3.axisBottom, d3.axisLeft, and d3.extent. Grid lines and styling are applied through tick settings and CSS classes.

Jan 20, 2020

Loading thumbnail…

MAKING BARS

This visualization displays population data for several countries as a bar chart. The bars are created using SVG rectangles, with a linear scale for the y-axis and a band scale for the x-axis. The code uses D3 v5 functions such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The data is loaded from a CSV file and the population values are multiplied by 1000 during preprocessing. The chart is rendered within a React framework, though the D3 code directly manipulates the SVG.

Jan 20, 2020

Loading thumbnail…

HTML Starter

This example displays a blank SVG canvas with a red background, demonstrating the minimal setup required for a D3 visualization in an HTML page. The code uses the D3 v5 `select` function to target the SVG element and applies the background color via the style method. The page loads D3 from a CDN and references a bundled JavaScript file, showing the basic structure for integrating D3 with a React framework.

Jan 20, 2020

Loading thumbnail…

Lets make a face!

This example demonstrates how a simple face can be constructed using React and D3.js, with the visual output rendered as scalable vector graphics. It shows a set of pre-defined facial features—such as eyes, a nose, and a mouth—positioned on the canvas. The code leverages React for component-based UI management and D3’s selection and data-join methods to draw the shapes dynamically. The rendering approach relies on SVG elements, and the example serves as a playful introduction to combining declarative React components with D3’s data-driven visualization techniques.

Jan 20, 2020