Tina Nemati

@tinanemati·5 public vizzes

My Version of Smiley Face Part III

This example renders a smiley face as a reusable React component, demonstrating how to integrate D3’s `arc` generator with SVG elements. The face is drawn using a yellow circle for the head, two small eyes, and a mouth path created by the `arc` function with specified inner and outer radii and angular extents. The code uses React’s declarative `JSX` syntax to define the SVG structure, while D3 v5 provides the geometric calculations for the mouth shape. The component is mounted into the DOM via `ReactDOM.render`, with dimensions and offsets defined by constants.

May 29, 2023

Loading thumbnail…

Fork of Stylized Scatter Plot Working with Time and line chart

This example visualizes temperature readings over time as a smooth line chart with overlaid scatter points, using a time-based x-axis and linear y-axis. The visualization loads data from a CSV file containing weekly San Francisco temperatures, parsed via d3.csv. Built with React and rendered as SVG, the chart employs d3.scaleTime, d3.scaleLinear, and d3.line with curveNatural for the curved path, while each data point is drawn as a circle with a tooltip showing the day of the week.

May 29, 2023

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset displays petal length against sepal width, with each flower represented by a teal circle. The visualization uses React components and D3 scales to map the data, with axes generated by custom AxisBottom and AxisLeft components. The code loads data via d3.csv, applies linear scales with d3.scaleLinear, and formats tick labels using d3.format. Styling includes Poppins font and custom tick and mark colors, with a native SVG title element providing tooltips.

May 29, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a pie chart of CSS named colors, with each slice filled using its corresponding RGB hex value from the loaded dataset. The visualization uses React state and the `useEffect` hook to asynchronously fetch CSV data via `d3.csv`, then renders the chart as SVG paths. The pie layout is generated with `d3.pie()` and sectors are drawn using `d3.arc()`, with all geometry centered within a 960×500 viewport.

May 29, 2023

Loading thumbnail…

Fork of Hello HTML

A simple SVG smiley face is rendered, with yellow circular head, black outline, and black eyes and mouth. The visualization demonstrates how to combine React and D3 within a static HTML page, relying on the `arc()` path generator from D3 to draw the mouth. The SVG coordinates and dimensions are hardcoded, and ReactDOM renders the single component to the page's root element. The example uses the React and D3 libraries loaded via CDN, showcasing their integration in a minimal setup.

May 29, 2023