judeluka

@judeluka·4 public vizzes

Fork of Stylized Line Chart

This example visualizes temperature readings over time as a smooth, stylized line chart. The data comes from the Data Canvas Sense Your City dataset, specifically weekly temperature measurements for San Francisco. Time is plotted on the x-axis and temperature on the y-axis, with the line rendered using `d3.line()` with `curveNatural` to create a flowing curve. The chart is built with React components for the axes and marks, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.extent` for scaling and domain computation, with all elements drawn as SVG.

Jun 30, 2021

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time for various world regions, with a vertical line marking a selected year, which users can adjust by moving the mouse across the chart. Using D3 v5, the visualization employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `axisBottom` and `axisLeft` for axes, and `line` with `curveBasis` for smooth paths. Data is loaded from UN population estimate CSV files. The SVG rendering updates dynamically through a selection state, and a separate color legend uses `scaleOrdinal` with a category 10 scheme to identify regions.

Jun 29, 2021

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5’s `line`, `curveBasis`, and `nest` functions to draw smooth, multi-line paths, with a categorical color scale and custom color legend. SVG rendering includes grid lines via `axisLeft` and `axisBottom`, and the chart is sorted by each city’s last temperature value.

Jun 29, 2021

Loading thumbnail…

Fork of Temperture in San Francicso Linechart

This line chart visualizes temperature in San Francisco over time, with a smooth curved line connecting data points and labeled axes for Time and Temperature. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as dates and temperatures as numbers. The chart includes a title, tick marks, and a styled line with a steel-blue stroke.

Jun 29, 2021