Isar Ramses

@rammsesgit·2 public vizzes

d3 react Line Chart

This example shows a line chart of weekly temperature readings over time, using the Data Canvas Sense Your City dataset. The chart renders an SVG path with a natural curve, displaying temperature trends across the week. React components encapsulate the axes and marks, while d3.scaleTime and d3.scaleLinear map the data to screen coordinates. The visualization uses d3.line with curveNatural for the path, d3.csv for data loading, and d3.timeFormat for the time axis labels.

Jul 7, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of automotive data from the UCI Auto MPG dataset, graphing miles per gallon against horsepower. Each circle’s size encodes acceleration, while tooltips reveal the car’s name. The example demonstrates the Vega-Lite API workflow, using `vl.markCircle` with field encodings for quantitative axes and an opacity adjustment for overlapping points. The code builds the chart by processing CSV data via `d3.csv`, configuring axis styling through Vega-Lite’s `config`, and rendering with the vega-lite-api library alongside vega-tooltip for interactive hover details.

Jul 7, 2021