ankolaver

@ankolaver·5 public vizzes

Fork of HTML Starter

This example demonstrates a simple React application that renders an SVG line using JSX, with a red stroke and no fill. The code imports React hooks and D3, then uses D3 selections to manipulate the SVG path’s stroke color, first changing it to blue and then to green via a class selector. It also queries the path to log its total length and a point at a specific distance using the `getTotalLength()` and `getPointAtLength()` methods. React renders the component into the DOM, while D3 v5 handles the DOM queries and attribute updates.

Mar 8, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart tracking daily temperature variations over a week in San Francisco, using a smooth natural curve to connect data points. The visualization is built with React and D3 v5, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveNatural` for the path, and SVG for rendering. Data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`. The chart includes labeled axes, tick marks, and a clean Poppins font aesthetic, with the line emphasized in teal.

Mar 8, 2021

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. The SVG is rendered using React components, with axes and scales built via d3.scaleLinear and d3.scaleOrdinal. A color legend identifies the three species, and hovering over a circle displays a tooltip with the petal length value. The data is loaded asynchronously using d3.csv from a remote source.

Mar 6, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis against sepal width on the y-axis for the first thirty observations. Built with React and D3 v5, it renders SVG marks and axes using custom components like `AxisBottom`, `AxisLeft`, and `Marks`, which leverage `d3.scaleLinear` and `d3.extent` for scaling and domains. The plot features formatted tick labels via `d3.format` and interactive tooltips through SVG `<title>` elements.

Mar 4, 2021

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This interactive visualization combines a world map with a time-series histogram to explore missing migrant incidents. Bubble symbols sized by total dead and missing are projected onto a natural Earth projection using d3.geoPath, while a d3.histogram bins reported dates by month and sums the corresponding death tolls. React manages the component hierarchy, and both views use SVG rendering with d3 scales for encoding. Data comes from a CSV of global missing migrant reports.

Mar 4, 2021