Fremont

@FForsberg1·14 public vizzes

Fork of Fork of Fork of Interactive Book Dataset

This interactive dashboard presents two linked views of the Top 10 Publishers dataset: a scatterplot of average rating against text review count for individual books, and a horizontal bar chart displaying the average rating for each prominent publisher. Hovering over a point or bar highlights all books sharing the same publisher, while a dropdown menu adjusts the scatterplot’s point opacity for clearer view. Built with React and D3 v6, the visualization uses d3.csv to load data, d3.scaleLinear for axes, and SVG circle and rect elements with mouseenter/mouseleave events for coordinated highlighting.

May 14, 2024

Loading thumbnail…

Fork of Fork of Interactive Book Dataset

This visualization presents two linked charts from a GoodReads dataset: a scatterplot of book ratings counts against average ratings, and a horizontal bar chart of the top 10 publishers by average rating. Hovering over a dot or bar highlights all books from that publisher across both views. A dropdown menu adjusts the opacity of the scatterplot points. The piece is built with React and D3.js (v6), using SVG elements and transitions, with data parsed via `d3.csv`.

May 14, 2024

Loading thumbnail…

Fork of Interactive Book Dataset

This visualization presents a dual-chart view of a GoodReads book dataset. The left panel is a scatterplot of average rating versus page count, with each book as a point. The right panel is a horizontal bar chart displaying the top 10 most popular publishers, with bars sorted by the number of books published and positioned along the average rating axis. Hovering over any data point or bar highlights all books sharing that publisher’s identity across both charts, while a dropdown menu adjusts circle opacity. The implementation uses D3.js v6, including scales for linear and band layouts, SVG circle and rect elements, and mouse event listeners.

May 13, 2024

Loading thumbnail…

Fork of Choropleth

A linked choropleth map and scatter plot visualize global development indicators, letting users explore relationships between attributes like life expectancy, birth rate, and urbanization. Country colors encode urban population rate, while scatter plot points are colored by continent. Hovering highlights matching countries across both views, and axis buttons toggle between linear and logarithmic scales. Built with React and D3 v6, the visualization uses `d3.scaleLinear`, `d3.scaleLog`, and SVG transitions for animated updates.

May 13, 2024

Loading thumbnail…

Book Dataset with slider

This scatterplot visualization explores a Goodreads book dataset, plotting each book as a point according to selectable axes, such as average rating, page count, and review counts. The interface includes dropdown menus to change the X and Y axis attributes, as well as a separate dropdown to control the opacity of all the circles, allowing users to see density variations in the data. Built with React and d3.v6, the visualization uses `d3.scaleLinear` and `d3.extent` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for rendering axes, and `transition().style('opacity', ...)` for smooth updates. Data is loaded from a CSV file using `d3.csv`.

May 8, 2024

Loading thumbnail…

Interactive Book Dataset

This visualization presents two linked views of a GoodReads dataset of the top 10 most popular publishers. The left panel is a scatterplot mapping book page count against average rating, while the right panel displays a horizontal bar chart of publishers sorted by rating. Both views use green circles and bars that turn red on hover via D3 mouse events. The code employs d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, rendering with SVG. Data is loaded asynchronously from a remote CSV using d3.csv.

May 8, 2024

Loading thumbnail…

Fork of Customizing Axes with books

This bar chart displays the top 10 most popular publishers by average review rating, using data from a CSV file loaded via d3.csv. The visualization customizes D3 axes with d3.axisBottom and d3.axisLeft, removing domain lines and applying tick formatting with d3.format to abbreviate large numbers. Data is rendered as SVG rectangles scaled with d3.scaleLinear and d3.scaleBand, featuring custom tick text sizes, axis labels, and a title styled through CSS.

May 2, 2024

Loading thumbnail…

Book Dataset

This scatterplot visualizes the relationship between the number of pages and average rating for a dataset of books from GoodReads. The x-axis maps page count and the y-axis maps average rating, with each semi-transparent green circle representing a single book. Built with D3 v6 in React, it loads CSV data from a GitHub repository and uses `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`axisLeft` to construct the axes. Hovering over a circle logs the corresponding data point to the console.

May 2, 2024

Loading thumbnail…

Fork of Bar Chart with Basic Hover

This example shows the top 10 most populous countries as a bar chart, highlighting the selected bar in black while graying out the others when hovered. It uses D3.js `scaleBand` and `scaleLinear` for positioning, with mouseenter and mouseleave events updating the chart’s state. The data comes from the UN population estimates, rendered in SVG with responsive axes and resizable dimensions.

May 2, 2024

Loading thumbnail…

Testing around with Chloropleth

This visualization combines a choropleth map with a scatter plot to explore global demographic data. A world map displays countries colored by birth rate, while the adjacent scatter plot shows fertility rate against life expectancy, with population mapped to circle size. The map and scatter plot are linked: hovering over a country in either view highlights the corresponding element in the other. Built with React and D3 v6, the map uses `d3.geoEqualEarth` projection with `d3.geoPath`, while both views rely on `d3.scaleLinear` and `d3.scaleOrdinal` for color and size encoding.

May 2, 2024

Loading thumbnail…

Testing Ben Scatterplot

This example shows a scatterplot of global country data, plotting birth rate against calling code, with the size of each circle encoding infant mortality. The visualization uses D3.js v6 to load CSV data from a GitHub repository, create linear scales for both axes, and render the SVG circles. Interactive mouseenter events log individual data points to the console, allowing inspection of specific country records. The chart relies on d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.axisBottom and d3.axisLeft for generating the axes.

May 1, 2024

Loading thumbnail…

Scatterplot for peng bird dataset

This scatterplot visualizes the relationship between ground living area and sale price for properties from the world-data-2023.csv dataset. Each circle represents a data point, with position determined by the d3.scaleLinear mappings for the x and y axes. The visualization uses d3.js v6 within a React framework, rendering as an SVG. The code loads data via d3.csv, creates axes with d3.axisBottom and d3.axisLeft, and appends circles with attributes for x, y, and radius.

Apr 30, 2024

Loading thumbnail…

Scatterplot

This example displays a scatterplot of penguin measurements, plotting flipper length on the x-axis against body mass on the y-axis for each individual in the dataset. The plot uses a simple grid background with an inset margin to frame the points. It is built using the Observable Plot library, with the `Plot.dot` mark generating the circles from data imported from a CSV file hosted on GitHub.

Apr 30, 2024

Loading thumbnail…

Testing out D3

This example shows a scatter of hand-placed circles in various sizes and colors rendered on a light green background. It demonstrates the D3 general update pattern with `select`, `data`, and `join` to create an SVG element and bind circle data to its attributes. The code uses `attr` to set each circle’s `cx`, `cy`, `r`, `fill`, and `opacity` values via method chaining. It also measures the container’s `clientWidth` and `clientHeight` to size the SVG responsively. The example serves as a basic introduction to data-driven SVG rendering with D3.

Apr 30, 2024