1pixelzz

@1pixelzz·6 public vizzes

AUnited States and World Earthquakes

This visualization compares earthquake activity in the United States with the rest of the world from 1970 to 2012, using two overlapping area charts rendered as SVG paths. The gray area represents global earthquake totals, while the green area shows U.S. earthquakes, with a hover effect turning circles green. It uses D3 v3 with the `d3.svg.area()` generator, `d3.time.scale()` for the year axis, and `d3.svg.axis()` for axes. Data comes from two CSV files loaded via `d3.csv`, sourced from the USGS Earthquake Hazards Program.

Apr 28, 2015

Loading thumbnail…

City Park Acreage

A scatterplot shows the relationship between acreage and the number of features for Madison city parks, with each circle representing a park; hovering highlights a circle in green. The visualization uses D3 v3 to load the `Map_Parks.csv` file and render an SVG with linear scales for both axes, an x-axis positioned at the bottom, and a y-axis formatted with percentages, applying a staggered transition to animate circle radii from 0.1 to 10 pixels.

Apr 24, 2015

Loading thumbnail…

City Park Acreage

This visualization displays the total acreage of city parks as a horizontal bar chart, with each park's name labeled to the left and the bar length scaled proportionally to its area. Sorted in descending order by acreage, the chart uses data from a CSV file containing park attributes and locations. Built with D3.js (v3), it maps the data to SVG rectangles and text elements via `d3.csv` and `d3.selectAll`, while the numeric sort relies on `d3.descending` with unary plus operators to convert string values to numbers.

Apr 10, 2015

Loading thumbnail…

Loading CSV Data with D3

This example shows a static SVG composition of colored rectangles and circles on a grid of axes, built with D3.js v3. The code loads park data from a CSV file using `d3.csv`, which converts the rows into an array of JSON objects, then logs the result to the console. The rendering uses raw SVG elements defined directly in the HTML, not generated by D3. The data source is the external `Map_Parks.csv` file, and the visualization itself is a fixed geometric layout rather than a data-driven chart.

Apr 4, 2015

Loading thumbnail…

Gist 7c445469b8bbc80c1047

This visualization plots commercial land sales in Madison, Wisconsin, as points on a map, with each sale’s location derived from latitude and longitude coordinates embedded in the CSV’s address field. It uses D3.js with `d3.geoPath` to render the map and `d3.forceSimulation` to position and jitter overlapping points for legibility. Hovering reveals the sale price and property details, while dot size encodes the sale amount. The underlying dataset is the provided `Map__Commercial_Land_Sales.csv`, parsed client-side to drive the interactive scatter-map.

Mar 28, 2015

Loading thumbnail…

Gist e5accfd5c404e44ded12

This example maps the locations of parks from a CSV of city park attributes, encoding facility types with colored dots overlaid on a blank canvas. The visualization reads latitude/longitude coordinates from the data and uses a custom projection to plot each park, with legend markers indicating amenities like playgrounds or beaches. It relies on the D3 library for CSV parsing and SVG element creation, while the rendering itself is driven by plain JavaScript loops rather than a dedicated geographic mapping API.

Mar 28, 2015