E

Emma Schaale

@squinja·16 public vizzes

Loading thumbnail…

O2 Monitor Chart

This chart plots oxygen level over time, filtering out zero values from a CSV dataset inspired by the Data Canvas Sense Your City project. It renders as an SVG line chart using React components and D3 v5’s `scaleLinear`, `scaleTime`, and `line` with `curveNatural`. Custom axis components generate ticks and labels, while the y-axis is fixed from 0 to 100. Data loading and parsing are handled by `useData` with D3’s `csv` function, converting time strings to Date objects and oxygen levels to numbers.

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays temperature trends over time as a stylized line chart, plotting hourly SF week temperature data from a CSV sourced from the Data Canvas Sense Your City dataset. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` to draw the path, and SVG for rendering. The chart includes labeled axes, gridlines, and a Poppins font, with marks rendered as a smooth curved line without individual data point circles.

Loading thumbnail…

Emma's O2 Data Viz

This visualization displays oxygen monitoring data over time as a scatterplot with a time-scaled x-axis. The code uses D3 v7 to load CSV data from a GitHub gist, then creates an SVG chart with `d3.scaleTime` and `d3.extent` to determine the temporal domain. An axis is rendered using `d3.axisBottom` positioned at the bottom of a 500x400 pixel SVG. The example focuses on the basic setup for importing D3 modules and processing time-series data, though it currently plots only the axis without visible data points.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that integrates D3.js within a React framework. It displays a static blue square chart area with a large centered message, showcasing basic CSS styling and JavaScript setup. The page includes a `#chart` div and loads a `script.js` file that imports the `select` function from D3, though no interactive or data-driven rendering is implemented. The code highlights the foundational structure for building more complex visualizations using D3 and React.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates foundational D3.js DOM manipulation by loading oxygen level data from a CSV file and rendering the values as SVG text elements. The code uses `d3.select`, `.data()`, `.enter()`, and `.append()` to bind the parsed data to text nodes, positioning them horizontally with a fixed vertical offset. The visualization relies on the `d3.csv` method to fetch the external dataset, while the SVG canvas is configured with a width of 960 and height of 500. Although the title suggests a smiley face with moving eyebrows, the current implementation only displays the numerical oxygen readings.

Loading thumbnail…

Fork of Video Game Critic Ratings Over Time

This scatterplot shows video game critic ratings over time, with each point representing a game released between the mid-1990s and 2010s. The visualization displays a line path connecting the data points to reveal trends in average critic scores across years. The code uses D3 v5’s `scaleTime` and `scaleLinear` to map the axes, and the `csv` method to load the Kaggle dataset. Data points are filtered and sorted chronologically before being rendered as an SVG with a maroon line, using the `line` generator and `curveBasis` for smoothing.

Loading thumbnail…

Video Game Critic Ratings Over Time

This scatterplot tracks average video game critic scores over time, plotting roughly 100 filtered games by release year and critic rating. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` axes, with data loaded via `d3.csv` from a GitHub-hosted Kaggle dataset. Points appear as semi-transparent orange circles, overlaid with a smooth maroon trend line generated using `d3.line` and `curveBasis`. The SVG rendering includes labeled axes and a title, with the data filtered to exclude missing or zero scores before sorting by year.

Loading thumbnail…

Video Game Critic Ratings Over Time

This scatterplot displays video game critic scores over time, revealing the distribution and trends of ratings across different release years. Each orange circle represents a game, plotted by its release date and critic score, with hover interactions showing the game's name and both critic and user scores. The visualization is built with D3 v5, using `select`, `csv`, `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs to render SVG elements. Data is loaded from a Kaggle-sourced CSV file, filtered to include only valid scores, and limited to 500 points for clarity.

Loading thumbnail…

Fork of Video Game Critic Ratings

This scatterplot compares critic and user scores for popular video games, plotting one point per title to reveal trends and outliers in the relationship between professional and audience ratings. The visualization loads CSV data from a GitHub gist, filters it to include only games with valid positive scores, and renders the first 1,000 points as semi-transparent circles using D3 v5’s `scaleLinear` and `axisBottom`/`axisLeft` for axes. Interactive tooltips appear on hover, displaying each game’s name and both scores via D3 event handlers, while the SVG output uses custom styling from external CSS.

Loading thumbnail…

Video Game Data Summary

This example displays a summary of a video game dataset, showing the total row count, column count, and data size in kilobytes, followed by a JSON-formatted preview of the first ten rows. The visualization reads a CSV file from a remote URL using d3.csv and presents the information as plain text elements on the page, with the summary rendered in a large preformatted block. The code relies on D3 v5 functions like select, csv, csvFormat, and scaleLinear, though no chart is drawn; it purely prints textual data summaries.

Loading thumbnail…

Video Game Critic Ratings - Scatter Plot 1

This scatter plot visualizes the relationship between video game titles and their critic ratings, ranking the first 25 games from the dataset along the y-axis while mapping their scores on the x-axis. The visualization uses D3 v5's `scalePoint` and `scaleLinear` to position circles on an SVG canvas, with the data loaded from a CSV hosted on GitHub. The chart employs gridlines and styled text elements to present the data clearly, with each circle representing a game and its horizontal position indicating the critic score. The color scheme and layout emphasize the distribution of ratings across different game titles.

Loading thumbnail…

Customizing Axes

This visualization uses a horizontal bar chart to display the critic ratings of 25 popular video games, sourced from a Kaggle dataset. The chart emphasizes custom axis styling, including formatted tick labels on the x-axis, removed y-axis gridlines, and custom labels. The code uses D3 v5 APIs, including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, to create the layout and custom axes. The SVG rendering is styled with a custom font and color scheme.

Loading thumbnail…

Video Game Data Viz

A horizontal bar chart displays the top 25 video games by critic score, using D3 v5's `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map data from a Kaggle dataset. The SVG render positions steelblue rectangles whose widths correspond to each game’s numerical `Critic_Score`, with game names on the y-axis and score values on the x-axis. The code also prints a data summary, including row count, column count, and file size, alongside the first ten rows of the dataset.

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This example animates a scatter plot of the Iris Dataset, cycling through columns as the x-axis variable (petal width, sepal width, petal length, sepal length) every three seconds. It renders as an SVG with D3’s `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and uses the `selection.join` API for efficient circle and axis updates. Transitions via `transition()` with a one-second duration and staggered delays smoothly reposition the points and axes. The chart is reusable, configured through chained methods like `.width()`, `.data()`, and `.xValue()`.

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot displays the Iris dataset, cycling through four different x-axis dimensions (petal width, sepal width, petal length, and sepal length) every three seconds while keeping sepal length on the y-axis. Built with D3 v6, the visualization uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to smoothly animate the repositioning of circles over one second. The chart is rendered as an SVG with a full-viewport layout, and each data point is a circle with a radius of 5 pixels. The code follows a reusable chart pattern with configurable width, height, margins, and data accessors.

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, loading CSV data from a GitHub Gist and plotting each observation as a circle. The x-axis represents December values and the y-axis January values, using `d3.scaleLinear` for scaling and `d3.extent` for domain calculation. The code leverages D3 v6 APIs including `d3.csv`, `d3.select`, `d3.axisLeft`, and `d3.axisBottom`, rendering the visualization as SVG circles with a 5-pixel radius, sized to fill the browser window.