TheAnswer-Is-42

@TheAnswer-Is-42·7 public vizzes

Fork of Stylized Line Chart

This interactive line chart visualizes weekly temperature readings from San Francisco using time-series data loaded via `d3.csv` and D3’s `scaleTime` and `scaleLinear`. React components render the SVG axes and the smooth, natural curve path generated with D3’s `line()` and `curveNatural`. The visualization emphasizes a minimalist design with custom tick styling and axis labels, while the dataset source is referenced from Data Canvas Sense Your City.

Jan 12, 2022

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

This chart visualizes cumulative COVID-19 deaths over time for each country, using a logarithmic y-axis to accommodate wide ranges in death tolls. Each country’s time series is drawn as a randomly colored SVG path generated with d3.line, while d3.scaleLog and d3.scaleTime handle the axes. Data comes from the Johns Hopkins Coronavirus Dataset, loaded via d3.csv and parsed with d3.timeParse. The React component renders the SVG, with axes built using d3.axisBottom and d3.axisLeft.

Jan 7, 2022

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

A log-scale line chart tracks cumulative COVID-19 deaths over time for countries, using data from the Johns Hopkins Coronavirus Dataset. Each country appears as a separate colored path, with the y-axis transformed by `scaleLog` and the x-axis by `scaleTime`. Built with React and D3 v5, it uses `d3.line`, `axisBottom`, and `axisLeft` to render the SVG, while grouping the CSV timeseries rows by country into individual line sequences.

Jan 6, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature over time using a stylized line chart, plotting a week of San Francisco temperature data from Data Canvas’s Sense Your City dataset. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map the timestamp and temperature values onto the SVG canvas, with axes rendered via custom React components. The line path is generated with D3’s `line` and `curveNatural` functions, producing a smooth, natural curve. The visualization emphasizes clean, minimalist aesthetics with a Poppins font and muted teal color scheme, while the underlying data is loaded asynchronously via D3’s `csv` parser.

Jan 3, 2022

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as horizontal bars. The chart uses React with D3 v5 utilities, including `scaleBand` for the y-axis country categories, `scaleLinear` for the population x-axis, and `csv` to load and parse the data from a GitHub gist. Axes are rendered as separate SVG components (`AxisBottom` and `AxisLeft`), while `Marks` draws the rectangles. The visualization shows population values without numerical tick labels on the x-axis, presenting data in a clean, unlabeled bar layout.

Jan 3, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This chart displays a week of temperature measurements sampled over time, with a smooth curved line connecting the data points. The visualization uses React to render SVG elements and D3’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to draw the path. The chart includes labeled axes for time and temperature, with tick marks generated by reusable `AxisBottom` and `AxisLeft` components. The data comes from the Sense Your City Dataset, loaded via `d3.csv`, and the styling uses the Poppins font with a teal line color.

Jan 3, 2022

Loading thumbnail…

Fork of Axes with React & D3

A horizontal bar chart displays the top 10 most populous countries from the UN World Population Prospects 2019 dataset. The chart renders as an SVG using React components, with each bar’s length proportional to the 2020 population estimate. D3’s `scaleBand` and `scaleLinear` APIs position the categorical country labels and numeric population axis, respectively, while `.ticks()` generates gridlines and tick labels. A loading state is shown from React’s `useEffect` until data is fetched via D3’s `csv` parser.

Jan 2, 2022