aparnasj-sj

line chart

A line chart displays temperature over time, with time on the x-axis and temperature on the y-axis. The chart uses React to render SVG elements, with D3 v5 providing scales, axis generation, and the line path via `d3.line()`. Data is loaded from a CSV file using `d3.csv`, and the x-axis is formatted with `timeFormat`. The visualization includes labeled axes, tick marks, and a smooth stroke line without individual data point circles.

Oct 12, 2023

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis using d3.scaleLinear. The React-based visualization renders circles as marks via SVG, with styled axes built through d3.ticks. The code uses d3.csv to load and parse the data, while custom React components (AxisBottom, AxisLeft, and Marks) handle the rendering, applying a Poppins font and a teal color scheme to the circular data points.

stylized bar chart

This stylized bar chart displays the 2020 population estimates for the top 10 countries, using horizontal bars sorted by country name from the UN Population 2019 dataset. React renders the SVG visualization, while d3.scaleBand and d3.scaleLinear handle the categorical and numeric axes respectively. The chart applies custom tick formatting with d3.format to abbreviate large population values into billions, and includes interactive tooltips showing the full formatted value on bar hover.

refactor bar chart

This example shows a horizontal bar chart of the 2020 population estimates for the top 10 countries, using D3.js scales and React components to render the visualization. D3 functions like `scaleBand`, `scaleLinear`, and `max` compute the chart’s layout, while the React code splits the rendering into reusable components for the axes and bars. The `Marks` component draws the rectangles, and the `AxisBottom` and `AxisLeft` components generate the tick labels using D3’s `ticks()` and `domain()` methods. The chart renders as an SVG, and the data is loaded from a remote CSV file using D3’s `csv` parser.

The margin convention

A bar chart displays the ten most populous countries in 2020, using data from the UN Population 2019 dataset. The visualization demonstrates the margin convention by placing scales and axes inside a translated SVG group, separating the plot area from the chart edges. React manages the component state and renders the SVG, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions handle data loading, scaling, and axis generation. Tick marks and labels for both axes are generated from the scale domains, with bars sized by population values.

visualize with react Bar chart

This bar chart uses React to render a horizontal bar chart of the top 10 countries by projected 2020 population, sourced from the UN Population 2019 dataset. The visualization shows population values as bar lengths on an SVG canvas. The code uses React's `useEffect` and `useState` hooks to asynchronously load and parse the CSV data with `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` map the categorical country names and numeric populations to pixel coordinates. React DOM (`ReactDOM.render`) mounts the component into the HTML root element.

visualize with react

This example uses React to render a radial burst visualization from a CSV of color data loaded via D3’s `d3.csv`. The React component manages state with hooks, creating a pie layout via `d3.pie()` and generating SVG paths with `d3.arc()`. Each slice’s fill color comes directly from the row’s `RGB hex value` field, producing a sunburst-like pattern centered on the SVG canvas. The visualization displays while the data loads, using a simple loading prompt before rendering the interactive-free, static graphic.

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle weight, horsepower, and model name from the auto-mpg dataset. The Vega-Lite API constructs a circle plot where weight determines both the x-axis position and the color and size of each mark, while horsepower is mapped to the y-axis. The visualization uses a custom dark theme with styled guide labels and titles to improve readability, and renders interactively with tooltips displaying the car model name.

Load data wiht react & d3

This example demonstrates how to load and summarize a CSV dataset using React and D3. It fetches a CSV file of CSS named colors via `d3.csv` and stores the parsed data in React state with the `useState` and `useEffect` hooks. Once loaded, a custom `message` utility computes the file size in kilobytes, row count, and column count using `d3.csvFormat`, displaying these statistics in a large `<pre>` element. The interface shows “Loading...” until the asynchronous data request resolves, highlighting the integration of D3’s data-loading utilities with React’s component lifecycle.

EXERCISE 2

This example loads a CSV file of CSS named colors and displays a simple text summary of the dataset’s size, row count, and column count using d3.csv. It then renders an SVG circle that follows the mouse cursor within a React component, updating its position via React state and the onMouseMove event. The visualization uses d3.v5 for data parsing and React 16.9 for interactive UI updates, with the circle drawn using SVG elements.

Smiley Face Part II

A grid of randomly generated smiley faces is rendered in SVG, with each face varying in eye and mouth size. The faces are drawn using React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which wraps the SVG with a translated group. The mouth shape is created using `d3.arc`, while `range` from D3 generates the grid of six by three faces.