Skip to main content
Log in
B

blanchestora@gmail.com

@bstora20·11 public vizzes

Loading thumbnail…

Shark Tank Chloropleth Deals

This example visualizes the number of Shark Tank deals per U.S. state using a chloropleth map. Each state is colored on a white-to-green scale based on deal count, with a legend showing the mapping up to 100 deals. The map uses d3.geoMercator and d3.geoPath to render state boundaries from GeoJSON data, while a tooltip displays the state name and entrepreneur count on hover. The code employs d3.scaleLinear for color encoding and transitions to animate fill changes on mouseleave.

May 13, 2024
Loading thumbnail…

Shark Tank Chloropleth

This choropleth map visualizes the number of entrepreneurs per U.S. state, with color intensity ranging from white (zero) to blue (high values). The map uses d3.geoMercator projection and d3.geoPath to render state boundaries from GeoJSON data, while a d3.scaleLinear maps state counts to fill colors. Interactive tooltips display the state name and entrepreneur count on mouseover, with highlighted states transitioning to red. The visualization includes a legend quantifying the color scale, and data is loaded from a CSV file via d3.csv.

May 13, 2024
Loading thumbnail…

Fork of Chloropleth

This visualization displays a choropleth map of the United States using a hexgrid projection, with each state's fill color corresponding to a numerical value from the `StateFile.csv` data (ranging from 0 to 221, likely representing counts or frequencies). The map is rendered as an SVG using `d3.geoPath` with a `d3.geoEqualEarth` projection fitted to the canvas. The code loads GeoJSON map data and CSV statistics via `d3.json` and `d3.csv`, then maps state codes (ISO 3166-2) to values using a linear color scale that transitions from white to blue. Interactive mouseover effects are present but commented out.

May 13, 2024
Loading thumbnail…

Test Chloropleth

This visualization displays the number of data points across U.S. states in a hexagon tile grid choropleth. The color scale uses a threshold encoding with d3.scaleThreshold and d3.schemeBlues to represent counts from the StateFile.csv dataset. The map is rendered using d3.geoPath and TopoJSON, loading US state hexgrid geometry from a GitHub-hosted GeoJSON file. A legend with an axis provides reference for interpreting the color values.

May 10, 2024
Loading thumbnail…

Fork of Simple Bar Chart

This fork of the simple bar chart displays the ten most populous countries as of January 1, 2024, with country names on the x-axis and population in thousands on the y-axis. It uses D3’s `scaleBand` and `scaleLinear` to position bars, along with `axisLeft` and the `@curran/axis-labels` helper for axis rendering and labels. The data is loaded from a GitHub-hosted CSV file, filtered to countries, and sorted in descending order to select the top ten.

May 4, 2024
Loading thumbnail…

Fork of Choropleth

This example presents a dual-panel visualization of global country data: a choropleth map colored by urbanization rate and an adjacent scatter plot showing life expectancy against GDP per capita, with point size encoding population and color encoding continent. Hovering reveals a tooltip. Built with React and D3 v6, it uses `d3.geoEqualEarth` and `d3.geoPath` for map projection, alongside `d3.scaleLinear`, `d3.scaleOrdinal`, and SVG rendering for both panels.

May 4, 2024
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The horizontal bars are rendered as SVG rectangles, with country names on the y-axis and population values on the x-axis, formatted in billions. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for custom axes. A video tutorial is embedded in the README to demonstrate the chart’s construction.

May 4, 2024
Loading thumbnail…

Fork of Food Production Stacked Bar Chart

This stacked bar chart breaks down estimated food production by tonnage across the seven continents for 2021, based on data from the World Food Production dataset. Hovering over a food category in the color legend highlights that segment across all bars while dimming others. The visualization uses d3.stack, scaleBand, scaleLinear, and scaleOrdinal to structure the bars, with the colorLegend module managing interactive highlighting and fade effects.

May 4, 2024
Loading thumbnail…

Fork of Stylized Scatter plot

This scatter plot visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis. Each flower is represented as a circle, with a tooltip showing the x-value on hover and using a fixed radius of 7 pixels. The visualization is built with React and rendered as SVG, using D3’s `csv` loader to fetch data and `scaleLinear` with `extent` and `nice` to compute scales. Axis ticks and labels are generated via custom `AxisBottom` and `AxisLeft` components, styled with a Poppins font and custom colors.

Apr 30, 2024
Loading thumbnail…

Fork of Stylized Scatter plot

This scatter plot visualizes the iris dataset, showing sepal length versus sepal width for individual flowers. Built with React and D3 v5, it renders as an SVG using the `csv` function for data loading, `scaleLinear` for axis scaling, and `extent` for domain calculation. The chart includes axis labels, tick marks with formatted values, and circular data points with tooltips, all styled with the Poppins font.

Apr 30, 2024
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes penguin data, showing the relationship between flipper length and body mass for three penguin species, each color-coded via a custom marker function. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for axes. Circles are rendered as SVG elements with attributes set via d3.selectAll and .join, and they include a mouseover handler that logs data to the console. The chart includes custom labels for title, x-axis, and y-axis.

Apr 30, 2024