Ankush

@ankush731992·3 public vizzes

line

This line chart visualizes the relationship between cost (x-axis, labeled "Time") and category (y-axis, labeled "Temperature") from the Data Canvas Sense Your City dataset. Using React and D3 v5, the chart renders an SVG with axes and a natural cubic spline path connecting data points. The x-axis uses `scaleTime` with a time format, while the y-axis uses `scaleLinear`. While `Marks` includes code for circles with tooltips, the circles are commented out, leaving only the stroked line visible.

Feb 15, 2022

Loading thumbnail…

Test

This example shows the top 10 most populous countries as horizontal bars, with country names on the y-axis and population counts on the x-axis. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the position and size of each bar. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Hovering reveals a native tooltip, and axis ticks are formatted using D3’s `format` to abbreviate large numbers.

Feb 14, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal SVG visualization displays only a yellow circle with a black outline, rendered via React components. The example loads data from a CSV file hosted on GitHub, though the current chart area remains empty apart from the background circle. The code imports `csv` and `scaleBand` from D3 v7, and constructs the SVG using React and ReactDOM, with the circle defined in a separate `BackgroundCircle` component that takes radius and stroke width as props.

Feb 14, 2022