E

edxiao97

@edxiao97·23 public vizzes

Loading thumbnail…

Project csv

This example visualizes the relationship between fuel efficiency (mpg) and vehicle weight from an auto-mpg dataset, plotting each car as a semi-transparent red circle. The scatter plot uses linear scales for both axes, with gridlines extending across the plotting area for readability. The code reads CSV data via d3.csv, applies d3.scaleLinear with .nice() domain normalization, and renders axes using d3.axisLeft and d3.axisBottom. Styling is applied through CSS classes for ticks, labels, and the title, with a large margin layout to accommodate the axis annotations.

Loading thumbnail…

Earthquake Choropleth Map

This choropleth map visualizes the distribution of total earthquakes across U.S. states, using a logarithmic color scale based on d3.scaleThreshold and the d3.schemeOrRd sequential color scheme. It renders each state as an SVG path via d3.geoPath with a d3.geoAlbersUsa projection, pulling geographic boundaries from TopoJSON and earthquake counts from a CSV. Hovering highlights states with a red stroke, while a d3-tip tooltip is intended to display state name, region, and earthquake count.

Loading thumbnail…

Old Faithful HeatMap

This interactive heatmap visualizes the Old Faithful dataset, showing the relationship between eruption duration and waiting time through a binned 2D grid colored by observation count. The chart updates continuously as the mouse moves horizontally, adjusting the maximum number of bins based on the cursor position. Built with Vega-Lite and embedded via `vegaEmbed`, it uses the `rect` mark with binned quantitative encodings for both axes and an aggregated count color encoding with a greens scheme. Data loads from a TSV file using `d3.tsv` from D3 v4.

Loading thumbnail…

Temperature in SF linechart

This line chart visualizes the number of earthquakes of magnitude 8.0 or higher recorded per year in San Francisco, with the x-axis representing years and the y-axis showing earthquake counts. The visualization uses D3 v5 functions such as `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth path. Data is loaded from a CSV file containing earthquake records. The chart includes labeled axes, a title "A Week in San Francisco," and a maroon line, with gridlines styled via CSS.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature trends for multiple cities over time, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. SVG rendering includes gridlines via axis tick marks, while d3.scaleOrdinal with schemeCategory10 assigns line colors.

Loading thumbnail…

Selecting a Year on Line Chart

This line chart displays population over time by region, with a vertical line marking the year 2018. The visualization uses D3 v5's scaleTime, scaleLinear, and scaleOrdinal to map temporal, quantitative, and categorical data, respectively. Lines are generated using d3.line with curveBasis smoothing, and a transparent rectangle captures mouse movement to invert x-scale coordinates for interactive exploration. Data is sourced from UN population estimates and processed via d3.csv and d3.range.

Loading thumbnail…

Old Faithful HeatMap

This interactive heatmap visualizes the Old Faithful dataset, showing the relationship between eruption duration and waiting time through a binned 2D grid colored by observation count. The chart updates continuously as the mouse moves horizontally, adjusting the maximum number of bins based on the cursor position. Built with Vega-Lite and embedded via `vegaEmbed`, it uses the `rect` mark with binned quantitative encodings for both axes and an aggregated count color encoding with a greens scheme. Data loads from a TSV file using `d3.tsv` from D3 v4.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population change over time for different world regions, with multiple lines plotted on a shared time axis to compare regional trends. The chart uses a color-coded legend to distinguish each region. The code processes a UN dataset by "melting" the data from wide to long format, using `loadAndProcessData` to combine estimates and projections. It renders with D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `curveBasis` for smooth lines, plus custom `colorLegend` and `axisBottom`/`axisLeft` helpers.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes earthquake frequencies across years, using the UCI Auto MPG dataset’s structure but mapping year to the x-axis and the count of earthquakes with magnitudes 5.0–5.9 to the y-axis. It renders an SVG line chart via D3 v5, employing `d3.csv`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to draw a red path connecting data points. The axes are labeled, and the title reads "Cars: Horsepower vs. Weight," though the data and labels reflect earthquake counts. The visualization sources its data from a CSV hosted on VizHub.

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the frequency of earthquakes by year, with circles positioned along the x-axis for year and the y-axis for the number of quakes in a magnitude range. It uses D3 v5 with SVG rendering and scales via `d3.scaleLinear` and `d3.extent`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while data loads from a CSV using `d3.csv`. The visualization highlights trends in seismic activity over time.

Loading thumbnail…

Cars Scatterplot

This scatterplot displays earthquakes over time, plotting year on the x-axis against the count of quakes in the 7.0–7.9 magnitude range on the y-axis, with each red semi-transparent circle representing a data point. The chart encodes the number of earthquakes per year in the "7_7.9" column of a CSV dataset loaded via `d3.csv`. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, while `d3.extent` sets the scales’ domains. SVG circles are bound to the parsed data, with margins and axis labels configured through D3 selections. The reversal of the y-scale places higher earthquake counts at the top.

Loading thumbnail…

Temperature in SF linechart

This visualization displays earthquake magnitudes and frequency data over time in San Francisco, rendered as a smooth line chart using D3 v5. It plots years on the x-axis against temperature values on the y-axis, with a maroon curve connecting data points. The code uses D3’s scaleTime and scaleLinear for axes, line and curveBasis to generate the smoothed path, and axisBottom and axisLeft with custom tick styling. Data is loaded via d3.csv from a VizHub dataset, with the SVG output driven by index.js and styled through external CSS.

Loading thumbnail…

Untitled

This scatter plot displays the relationship between earthquake year and estimated deaths, with red translucent circles representing individual data points. The visualization uses D3 v4 to render an SVG chart with linear scales for both axes, axis labels, and gridlines. Data comes from a CSV file of earthquake records, and the code also includes a separate line chart example using time-series data from the Auto MPG dataset, though the primary visualization focuses on the earthquake scatter plot.

Loading thumbnail…

Untitled

This scatter plot displays the relationship between earthquake year and estimated deaths, with red translucent circles representing individual data points. The visualization uses D3 v4 to render an SVG chart with linear scales for both axes, axis labels, and gridlines. Data comes from a CSV file of earthquake records, and the code also includes a separate line chart example using time-series data from the Auto MPG dataset, though the primary visualization focuses on the earthquake scatter plot.

Loading thumbnail…

Untitled

A line chart displays 21 randomly generated data points via d3.randomUniform, rendered as an amber monotone-smoothed path with circular markers in SVG. The visualization uses d3.axisBottom and d3.axisLeft for scales, with mouseover handlers logging data to the console but lacking full interactive tooltips. The line generator d3.line applies curveMonotoneX, while the chart fills the window and includes commented-out overlay code for potential focus interactions.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes earthquake data from a CSV file, displaying the number of earthquakes per year across magnitude ranges. The visualization uses D3 v5’s `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` functions to map years on the x-axis and earthquake counts on the y-axis, with circles rendered in SVG. Data is sourced from a VizHub-hosted dataset. The chart includes labeled axes, a title, and gridlines, with circles colored red and semi-transparent to show overlapping points.

Loading thumbnail…

earthquake

This scatter plot visualizes earthquake frequency by year, with each orange circle representing a data point and the y-axis labeled "nums_of_earthquake." The visualization uses d3.csv to load data from a remote earthquakes dataset, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks and gridlines. The SVG chart is generated with d3.v5, applying margin-based layouts, axis labels, and a title, while styling circles and text through external CSS.

Loading thumbnail…

Worldwide Earthquake stats 2000-2015

This visualization displays earthquake statistics from 2000 to 2015, plotting the count of magnitude 8.0+ earthquakes per year as orange circles on an SVG canvas. The data is loaded from a CSV file and rendered using D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `select` APIs, with gridlines generated via `tickSize`. Circle positions map year and earthquake count through the x and y scales, while axis labels and a title are added as SVG text elements.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes earthquake data, displaying the number of earthquakes per year as orange circles. The visualization uses D3 v5 with scaleLinear functions to map the data, along with axisBottom and axisLeft for the axes. The chart includes labeled axes for year and number of earthquakes, with data loaded from a CSV file using d3.csv. The SVG rendering approach is used, with custom styling applied through CSS classes for ticks, axis labels, and the title.

Loading thumbnail…

Line chart week temperatures

This line chart displays temperature readings in Rio de Janeiro over one week, with time on the x-axis and temperature on the y-axis. The visualization uses a smooth curve to connect data points, with orange circles marking each measurement. Data is loaded from a CSV file and parsed using d3.csv, while scales, axes, and the line path are generated with d3.scaleTime, d3.scaleLinear, and d3.line. The SVG rendering includes gridlines, axis labels, and a title, with styling defined in CSS.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a stylized face entirely from SVG shapes using D3.js v5. The face is composed of simple geometric elements—lines for the mouth and eyes, and a filled circle for the head—all positioned within a fixed 960×500 viewport. The code uses `d3.select` to target the SVG container and applies global styling through a linked CSS file, including rounded line caps and joins for a softer look. No data is loaded; instead, the visualization demonstrates fundamental SVG drawing and selection techniques with D3’s core API.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styles combine to create a static composition of circles, rectangles, lines, and a path. The code renders without any JavaScript libraries, relying directly on SVG elements and a linked stylesheet. The stylesheet applies stroke properties to the lines group, and the markup uses inline attributes like `fill`, `stroke`, and `transform` to assign colors and positions. The `g` elements demonstrate grouping and coordinate-space transformations, while a path with a `non-scaling` stroke demonstrates stroke styling independent of the parent scale.

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows population trends over time by region, with a vertical line marking the currently selected year. Moving the mouse along the chart updates the selection and redraws the visualization. The multi-line chart uses d3.line with curveBasis, while d3.nest groups data by region and d3.scaleOrdinal assigns colors. A legend, built with custom SVG code, displays color mappings. The data comes from UN population estimates processed in loadAndProcessData.js, combining medium variant projections for 2015-2100 with historical estimates.