jerryren527

Fork of Polished World Map

This example displays a global map with country boundaries, a spherical backdrop, and graticule lines. It is built with React and uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render SVG paths. The data comes from the World Atlas TopoJSON, which is converted to GeoJSON via the `topojson` library’s `feature` and `mesh` functions. The visualization is styled with a teal land fill and subtle gray graticules.

Fork of Stylized Line Chart

A line chart visualizes temperature readings over one week, with time on the x-axis and degrees on the y-axis. The data comes from the Data Canvas Sense Your City dataset, loaded via d3.csv. Built with React and rendered as SVG, the chart uses d3.scaleTime, d3.scaleLinear, and d3.line with a curveNatural interpolation to create a smooth, stylized path. Axes are custom components drawing tick marks and labels, with Poppins font styling applied through CSS.

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses SVG circles to render each data point, with hover tooltips displaying formatted values. The axes are constructed via reusable components (AxisBottom, AxisLeft) that leverage D3’s scaleLinear and extent functions, while the CSS styles the marks and labels with a clean, minimal aesthetic.

Fork of Stylized Bar Chart

This example displays a horizontal bar chart of the ten most populous countries, using data from the United Nations World Population Prospects 2019. React components render SVG bars and axes, with d3’s `scaleBand` and `scaleLinear` mapping countries and population values, while `d3.format` converts tick labels from billions to compact notation. The chart includes tooltips via SVG `<title>` elements and a styled “Population” axis label.

Fork of Refactored Bar Chart

A bar chart displays the ten most populous countries, with country names on the vertical axis and population on the horizontal axis, lacking a labeled y-axis title and numeric labels on the x-axis ticks. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis. SVG rectangles represent each country’s population, with custom `AxisBottom` and `AxisLeft` components rendering tick lines and text. Data originates from the United Nations World Population Prospects 2019, loaded via `d3.csv`.

Fork of Rendering Data with React & D3

This example shows a radial burst of CSS named colors, with each color as a slice of a full circle. The visualization loads color data from a CSV file using `d3.csv`, then processes it through `d3.pie` and `d3.arc` to generate SVG path geometry. React manages the component state and renders the paths, mapping each color’s hex value to the fill attribute. The code also includes a commented manual arc calculation as an alternative to `d3.pie`.

Fork of Vega-Lite API Template

This example visualizes automobile fuel economy data by plotting engine horsepower against manufacturing year, with each point representing a car model. The visualization uses the Vega-Lite API wrapper to construct a scatterplot with a tooltip showing car names, while D3’s `csv` loader fetches the auto-mpg dataset. Custom configuration adjusts axis fonts and colors, and the chart fills the entire browser window, rendering as an SVG with a semi-transparent fill for overlapping points.

Fork of Loading and Parsing CSV Data

This example shows the parsed contents of a CSS Named Colors CSV file, displaying the raw data as text in a web page. It uses D3 v5’s `d3.csv` and `d3.csvFormat` to load and re-format the data, with the result rendered into a `pre` element. The code also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, demonstrating different approaches to handling asynchronous data loading. The visualization is minimal, focusing on data retrieval and display rather than graphical encoding.