Skip to main content
SimilarExport ZIP
100%

WAEVData Scatter Plot

✓ Published0🌍 Public
Nnathan@shieldsonline.org
Last edited May 5, 2024
Created on May 5, 2024

This scatter plot visualizes the relationship between electric vehicle counts and real GDP per capita across Washington state counties. Each circle represents a county, positioned by its EV count on the x-axis and RGDP per capita on the y-axis. The visualization is built with React and D3 v6, using `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded from a GitHub-hosted CSV file, with the SVG rendering handled entirely by D3’s selection and append methods.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

WAEVData (Fork of Choropleth by bepnye)

WAEVData presents a linked scatter plot and choropleth map to explore the distribution of electric vehicles (EVs) across Washington State counties. The scatter plot positions each county by EV count against real GDP per capita, with circle size encoding population and color distinguishing rural from urban areas. The accompanying map shades counties by EV count per capita. Users can hover over either visualization to see detailed county statistics. The visualization implements brushing via `d3.brushX()` for zooming on the plot and utilizes `d3.geoPath` with a `geoMercator` projection for map rendering. Data comes from a CSV file, with SVG and animation for rendering.

Nnathan@shieldsonline.org
90% match
Loading thumbnail…

Fork of WAEVData (Fork of Choropleth by bepnye)

This visualization explores the distribution of electric vehicles (EVs) across Washington State counties, linking a choropleth map with a scatter plot of EV count versus real GDP per capita. Circles are sized by population and colored by county type (urban or rural), while the map uses a green gradient to show EV density. Users can hover for details, brush on the scatter plot to zoom, and double-click to reset. The visualization uses D3 v6 with `d3.geoPath`, `d3.scaleLinear`, brush interactions, and tooltips, reading data from a GeoJSON file and CSV source.

Ooliverkendall99@gmail.com
89% match
Loading thumbnail…

Bar Chart

This horizontal bar chart displays the number of registered electric vehicles by car make in Washington State, using data from the Department of Licensing. Bars extend from left to right, with the x-axis showing the count and the y-axis listing makes. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the count x-axis, and SVG `rect` marks. Tick labels are formatted with D3's `format` function, and hover tooltips show exact counts.

Nnghosh319
72% match
Loading thumbnail…

Some energy consumption data by type from the eia

This interactive scatter plot displays energy consumption data across U.S. states and regions, with a dropdown menu to switch between different fuel types and years from the EIA dataset. The visualization renders SVG circles whose vertical position reflects the selected consumption value while the horizontal axis shows the state or region. React handles the component state and dropdown interactions, while d3.v6 provides the scale functions (`scaleTime`, `scaleLinear`) and axis components. The underlying CSV data is loaded asynchronously via d3.csv, and each circle includes a native SVG `<title>` element for hover tooltips.

AAndre J Denais
69% match
Loading thumbnail…

Scatter

This interactive scatterplot visualizes Dutch parking garage data from the RDW Open Data API, plotting car capacity and EV charger capacity against maximum vehicle height. Users can select different data columns from a dropdown menu to change the x-axis variable, triggering smooth animated transitions of the red circles. Built with React and D3 v5, the visualization uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct axes, while SVG circles transition between positions using D3's built-in transition system over a 3-second duration.

JJordy Fronik
69% match
Loading thumbnail…

SG

A scatter plot shows the relationship between energy output and monthly users for EV charging stations. Each circle represents a station, with color encoding city and size encoding the number of charging ports. The visualization uses D3.js v7 with SVG rendering, loading data from a gist URL and parsing it with `d3.csvParse`. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while point size uses `d3.scaleSqrt` and color uses `d3.scaleOrdinal` with `d3.schemeTableau10`. A tooltip displays station details on mouseover.

Sshreelasya.bezawada@gmail.com
69% match
Loading thumbnail…

CV: Scatter Plot with US County Facts

This interactive dashboard visualizes demographic and economic indicators across US counties as a scatter plot, with dropdowns to change the X, Y, and color encodings. Points appear with staggered transitions using D3 v7, and clicking a circle displays detailed county facts in a side panel. The dark-themed interface uses React for layout and state management, with a ResizeObserver to handle responsive dimensions and D3 scales, axes, and color interpolation to render the SVG.

CCurran Kelleher
68% match
Loading thumbnail…

Scatterplot for World Dataset

This scatterplot visualizes the relationship between GDP and gasoline price across countries using a cleaned world dataset from a GitHub repository. It displays individual data points as gray circles, with GDP on the x-axis and gasoline price on the y-axis, both scaled using d3.scaleLinear. The visualization is rendered as SVG using D3 v6, with axes generated via d3.axisLeft and d3.axisBottom. The code fetches CSV data with d3.csv, applies parsing functions, and includes labeled axes plus a title, all within a React-free HTML page.

CChih-Hsin Chen
67% match