Raincal

@Raincal·3 public vizzes

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The React application renders an SVG with horizontal bars that use d3.scaleBand for the country axis and d3.scaleLinear for the population axis, while the d3.format utility converts large numbers into abbreviated units like "1.4B". Tooltips display the population values on hover via SVG title elements, and the chart includes styled axis labels and tick marks without a left border.

Oct 15, 2019

Loading thumbnail…

Line Chart

This line chart visualizes daily temperature readings for New York, San Francisco, and Austin from the Data Canvas Sense Your City dataset. It displays how temperatures fluctuate over time, with a single blue line representing one selected city. The visualization uses D3 v5 to parse the tab-separated data, construct time and linear scales, and render the SVG path. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line itself is created using the `d3.line` generator.

Oct 15, 2019

Loading thumbnail…

Stylized Line Chart

This chart displays temperature readings over time from the Data Canvas Sense Your City dataset, showing weekly variations in a smooth, stylized line. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, with `line()` and `curveNatural` for a curved path. The chart features labeled axes, a Poppins font, and teal color accents, rendering as pure SVG without interactive elements.

Oct 15, 2019