gotyou007

@gotyou007·9 public vizzes

mmehta63

This choropleth map of U.S. counties visualizes education statistics, with each county shaded on a purple scale according to its percentage of educated residents. Hovering over a county reveals a tooltip with its name, education rate, and counts of qualified professionals, high-school graduates, and middle-school-or-lower graduates. The visualization combines `d3.geo.albersUsa` and `d3.geo.path` for map projection and rendering, uses `d3.csv` and `d3.json` to load education and geographic data, and employs `d3.tip` for interactive tooltips.

Feb 24, 2020

Loading thumbnail…

bar chart

This bar chart displays earthquake counts across U.S. states for the Western region in 2011, sorting states from highest to lowest frequency. The visualization uses D3 v5’s `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `axisBottom` for tick marks, rendering as SVG. Data is loaded from a CSV file and filtered for the specific region and year, with bars sized proportionally to earthquake counts.

Feb 22, 2020

Loading thumbnail…

Choropleth Tutorial - Leaflet

This example shows a choropleth map of US population density by state, built with the Leaflet JavaScript library. It colors each state according to its population density using a custom color scale and provides interactive features: hovering highlights a state and displays its name and density in an info panel, while clicking zooms in on that state. The map also includes a legend showing the density ranges and their corresponding colors. The visualization uses GeoJSON state boundaries and population data from the US Census Bureau, rendered as vector layers with Leaflet’s `L.geoJson` and `L.control` for the legend and info.

Feb 22, 2020

Loading thumbnail…

Earthquake Choropleth Map

This choropleth map visualizes the number of earthquakes recorded in U.S. states, using a logarithmic color scale to represent data from a CSV dataset of state earthquake counts. The map renders U.S. state boundaries via `d3.geoPath` with a `d3.geoAlbersUsa` projection, using TopoJSON data for the geographic shapes and `d3.scaleThreshold` with the `d3.schemeOrRd` color scheme. Hover interactions are implemented through a d3-tip tooltip, while state styling changes on mouseover through CSS-based `:hover` rules.

Feb 21, 2020

Loading thumbnail…

d3-simple-slider

This example demonstrates a variety of interactive slider configurations using the d3-simple-slider library, built on D3 v5. It showcases simple, stepped, time-based, filled, ranged, and vertical sliders, along with alternative handles and transitions, with each slider updating a displayed value. The page includes extended examples inspired by a New York Times article and a color picker, all rendered as SVG elements within a Bootstrap layout. The sliders are created using `d3.sliderBottom` and `d3.sliderTop` APIs, with options for tick formatting, step values, and fill colors, and respond to user input via the `onchange` event.

Feb 21, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius across multiple cities, using data from Data Canvas – Sense Your City. Each city appears as a separate colored line, with a color legend on the right. The visualization is built with D3 v5, using scales like `scaleTime` and `scaleLinear`, axes via `axisBottom` and `axisLeft`, and a line generator with `curveBasis` for smoothing. The data is loaded from a CSV file and rendered as SVG.

Feb 18, 2020

Loading thumbnail…

MAKING BARS

This example visualizes the cumulative number of Lego sets produced by Rebrickable from 1949 to 2019, displaying the running total as vertical bars over time. The chart uses an SVG rendering with a time-based x-axis and a linear y-axis. Built with React and D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, while bars are drawn via `g.selectAll('rect')`. Data is loaded from a CSV file using `dsv`, and the visualization updates each year’s cumulative count.

Jan 30, 2020

Loading thumbnail…

jasplund3

This bar chart displays the cumulative running total of a dataset from 1949 to 2019, showing steady growth over time. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleBand` for the x-axis to position bars by year and `d3.scaleLinear` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the x-axis tick labels are filtered to show every third year. Data is loaded from a CSV file using `d3.csv`.

Jan 24, 2020

Loading thumbnail…

Let's Make a Face Part I

A static SVG face takes shape: a yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The markup uses raw SVG elements within an HTML file, positioning the head at the center of a 960 by 500 viewport and placing the eyes symmetrically on either side of the vertical axis. The code comments highlight the coordinate calculations for centering and eye offsets, though no animation or interaction is present. The example demonstrates a simple, handmade approach to geometric drawing with basic SVG shapes.

Jan 21, 2020