ezzep66

@ezzep66·13 public vizzes

Let's make a map with D3.js!

This example shows a basic choropleth map of U.S. counties, rendered as solid maroon SVG paths with thin black borders. The visualization uses D3 v5’s `geoPath` and `geoMercator` to project TopoJSON county boundaries loaded from a FreeCodeCamp-hosted dataset. The map displays all counties at once without any interactivity or data-encoding choropleth coloring, serving primarily as a technical demonstration of projecting and drawing geographic features with D3 and TopoJSON.

Nov 10, 2019

Loading thumbnail…

Smiley Face Part II

A smiling face is drawn using SVG circles and a path, rendered inside a React component. The face consists of a yellow circular head with a black stroke, two black eyes, and a mouth created with the `d3.arc` API. D3 version 5 is used to generate the arc path, while React handles the SVG element structure and coordinates. The example demonstrates integrating D3’s shape generators with React’s declarative rendering for simple geometric visualizations.

Nov 9, 2019

Loading thumbnail…

Heat Map

This heat map visualizes monthly temperature variances across years for a global temperature dataset. The SVG graphic uses a color-coded grid of rectangles to represent data points, with the x-axis showing year and the y-axis displaying months. Built with React and D3 v5, the code leverages `scaleLinear` and `scaleBand` for positioning, along with `axisBottom` and `axisLeft` for the chart axes. The data comes from a JSON file loaded via `d3.json`, and hover effects are implemented with CSS styling on the rectangle elements.

Nov 5, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A color legend demonstrates the general update pattern with special cases, showing two fruit categories (apple and lemon) as colored circles with black strokes and text labels. Using d3.scaleOrdinal for color mapping, the code applies the enter-merge-exit pattern through colorLegend.js, with groups entering, merging, and exiting based on the color scale's domain. SVG rendering in d3.v5 manages reusable legend components with explicit transform and spacing values.

Nov 5, 2019

Loading thumbnail…

World Population Area Chart

This visualization presents world population growth over time using an area chart rendered as an SVG. The chart plots population values on a time-based x-axis using `scaleTime` and a linear y-axis with `scaleLinear`, filling the area beneath the curve with a maroon path generated by `d3.area` and `curveBasis`. The code imports D3 v5 utilities including `axisBottom`, `axisLeft`, and `csv` to load historical population data from a CSV file, while axis labels and tick formatting use `format`. The title "World Population" appears above the chart, and a tooltip div is prepared but not activated in the displayed behavior.

Nov 5, 2019

Loading thumbnail…

Temperature in San Fransisco Line Chart

This visualization shows one week of temperature readings in San Francisco as a filled area chart, with time on the x-axis and temperature on the y-axis. The chart renders an SVG path using a smooth curve, with labeled axes and a title, while a hidden tooltip div is prepared for future interactivity. The code uses D3 v5 functions such as `scaleTime`, `scaleLinear`, `area`, `axisBottom`, `axisLeft`, and `csv` to load and process the data from an external CSV file. The rendering is done via React, with the SVG generated through D3 selections.

Nov 5, 2019

Loading thumbnail…

Temperature in San Fransisco Line Chart

This line chart displays one week of temperature readings in San Francisco, using time on the x-axis and temperature on the y-axis. The visualization includes labeled axes and a smooth curved line connecting the data points. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `axisBottom`, and `axisLeft`, rendering with SVG. Data is loaded from a CSV file, and a tooltip div is appended to the body but remains unused.

Nov 5, 2019

Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot displays one week of San Francisco temperatures, with each point representing a temperature reading over time. The chart uses D3.js version 5 with an SVG rendering, featuring axes with tick marks and labels for time and temperature. The visualization includes interactive tooltips that appear on mouseover, showing a population value. Data is loaded from a CSV file, parsed with timestamps converted to Date objects and temperatures to numbers. The code uses `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` from D3 to construct the coordinate system and axes.

Nov 5, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models from the auto-mpg dataset. Each car is represented as a semi-transparent red circle, with its position determined by the scaled values of these two attributes. The visualization uses D3 v5 functions like `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with grid lines and labels. Tooltips are implemented by appending a div and using mouseover events. The SVG rendering includes a title and axis labels, with data loaded via the `csv` function.

Nov 5, 2019

Loading thumbnail…

Scatter Plot

This D3 v5 scatter plot displays the top ten most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. Each circle represents a country, with a tooltip showing the exact population on hover. The chart reads data from a CSV file, formats axis ticks using the `format` function, and renders axes via `axisBottom` and `axisLeft`. Circles are appended as SVG elements within a React-based visualization.

Nov 5, 2019

Loading thumbnail…

Customizing Axes

This example shows the populations of the ten most populous countries using a horizontal bar chart. D3 v5’s `scaleBand` and `scaleLinear` map countries and population counts to positions, while custom `axisBottom` and `axisLeft` axes display formatted tick labels and gridlines. The SVG renders steel-blue bars that turn navy on hover, with a tooltip displaying the exact population. Data is loaded from a CSV file and multiplied by 1000 before plotting.

Nov 5, 2019

Loading thumbnail…

Let's make a Bar Chart!

This horizontal bar chart displays the populations of ten countries, scaled by thousands, with a tooltip revealing precise values on hover. The visualization uses D3 v5's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering via SVG. Population data originates from the UN World Population Prospects, loaded from a CSV file using `csv`. A custom tooltip div appears on mouseover, positioned at the cursor using `event.pageX` and `pageY`. The chart’s axes are generated with `axisBottom` and `axisLeft`, and bars are drawn as SVG `rect` elements.

Nov 5, 2019

Loading thumbnail…

Customizing Axes

A bar chart displays population figures for ten countries using a horizontal layout, with country names on the y-axis and population counts on the x-axis. The chart uses `scaleLinear` and `scaleBand` to position bars, while `axisBottom` and `axisLeft` render the axes, with a `format("s")` tick formatter for compact number labels. A tooltip appears on hover via D3 event listeners. Data originates from the UN Population Division and is loaded as a CSV, with population values multiplied by 1,000.

Nov 5, 2019