TranHBach

@TranHBach·2 public vizzes

Fork of Stylized Line Chart

This example visualizes weekly temperature readings from San Francisco using a stylized line chart rendered as SVG within a React application. The chart displays temperature over time, with a smooth curve drawn using `d3.line()` and the `curveNatural` interpolation, while D3 scales (`scaleTime`, `scaleLinear`) map data to pixel coordinates. The data loads via `d3.csv()` from the Sense Your City dataset. Axes are rendered as custom React components, with tick marks and labels styled through CSS, and the line uses a teal stroke with rounded joins.

Jun 27, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example builds a scatter plot of automobile data, mapping weight and horsepower along the axes and encoding the vehicle’s country of origin by color, with point size also tied to weight. It uses the Vega-Lite API (via `vl.markCircle`) to declaratively specify the visualization, which is then rendered to SVG. The underlying data is fetched as CSV using `d3.csv` from a GitHub gist, and interactivity (like tooltips) is added through the Vega Tooltip `Handler`. Custom styling is applied through a shared config object.

Jun 18, 2022