State Grid of Dogs

100%

State Grid of Dogs

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Dec 9, 2016

This visualization shows a tessellated grid of U.S. state abbreviations, with nine states highlighted in purple to represent a hypothetical dog-related dataset. The states are arranged in a stylized map-like layout, each rendered as an irregular organic blob created from a closed path built with `d3.line()` and `d3.curveBasis`. The code parses a plain-text grid to position each state, applies `d3.v4` selections for rendering, and adds small circles as decorative markers. The design is inspired by an Allison McCann graphic, adapting a state grid into a context-rich tessellation example.

AI-generated description

While I was playing with tessellation, I was asking myself: How the hell can tessellation be used in data viz?

This block (forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/29cc3cc4078091fd2115'>State Grid</a>, itself inspired by an Allison McCann graphic) is my first attempt to respond to my question: it adds some kind of context to the vizualisation.

This map would greatly suit a viz dealing with dogs in US. Unfortunately, I didn't find any data set yet. Purple states are thoose starting with an 'M', plus the 'FL' state because these are my initials ;-)

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v.4)
<a href='http://blockbuilder.org'>blockbuilder.org</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

State Grid

This example arranges US state abbreviations into a compact ASCII-art grid, with eight states highlighted in a contrasting color. It shows a static map-like layout where each state is a labeled square, and the selected states are visually emphasized. The visualization is implemented with D3 v3, parsing the embedded ASCII grid from a script tag to position SVG rectangles and text elements. State data is hardcoded in the HTML, and d3 selections are used to append and style each grid cell.

Mmbostock

82% match

Loading thumbnail…

State Icons

State Icons displays every U.S. state as a compact 48×48 pixel SVG icon, with each state’s name shown above its clipped silhouette. The visualization uses a single TopoJSON file, pre-processed from USGS data, where each state is projected with its own local coordinate system and simplified via topojson. The code applies `d3.geo.path` with a null projection to render the pre-transformed geometries, and loads the combined data through `d3.json`. This approach preserves recognizable state shapes while fitting them uniformly into the small grid.

Mmbostock

72% match

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays U.S. states as a choropleth map, highlighting a subset of selected state IDs in orange while rendering all others in gray. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw SVG paths from TopoJSON data loaded from `us-10m.v1.json`. The code filters state features against a predefined set and applies the `.selected` CSS class, though the commented-out section means the highlighting is not rendered in the final output.

Jjons288

71% match

Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85

71% match

Loading thumbnail…

US State Map

This example shows a choropleth-style interactive map of the United States built with D3 v3. Each state is drawn as an SVG path from the included `uStates.js` GeoJSON-like data, and its fill color is determined by randomized sample data generated on the fly. Hovering over a state triggers a custom tooltip that displays low, average, and high values for that state, with hover effects changing fill opacity. The map is rendered in an SVG container with a fixed size, and the tooltip follows the cursor using absolute positioning. The dataset is based on West Nile virus case reports, though the visualization itself uses synthetic data for demonstration. The project is forked from a series of related blocks and is released under the GPL-3.0 license.# US State Map This interactive choropleth visualization presents a color-coded map of the United States, with each state shaded to represent data values and displaying detailed information on hover. ## Visualization Description The visualization displays a complete map of the contiguous United States, Alaska, and Hawaii, with each state colored using a yellow-to-dark-red sequential color scale (interpolated from "#ffffcc" to "#800026") based on sample data values. States appear as outlined gray polygons that respond to user interaction. **Interaction:** When users hover over a state, it becomes semi-transparent and a dark tooltip appears, showing the state's abbreviation and a small table with three statistics: Low, Average, and High values. **Data:** The map visualizes sample data for each US state, with low, average, and high values used to encode the color intensity. While the current implementation uses randomly generated data, the accompanying WestNile.csv dataset suggests the visualization could display West Nile virus statistics—including neuroinvasive and non-neuroinvasive disease cases, total cases, deaths, and presumptive viremic blood donors per state. **Design:** The visualization encodes data through a sequential color scale interpolated from light yellow ("#ffffcc") to dark red ("#800026"), where the color intensity represents the average value. The geographic layout uses the standard US state map with state boundaries drawn in grey. Hovering over a state triggers a tooltip that displays the state name along with low, average, and high values for the selected metric. Animated transitions provide visual feedback during state selection. The implementation is built with D3 v3, reading state path data from a JavaScript file, and the tooltip is implemented as an HTML overlay that appears on mouseover. Files: index.html, uStates.js, WestNile.csv </body> </html> (this text was cut off, and additional files may be needed to fully reproduce the visualization) Please describe the full URL (path) to the data file(s) used in this example. The final answer should just be a data path, with no additional prose.WestNile.csv

HHeywhoyou22

71% match

Loading thumbnail…

Force-Directed States of America

This interactive visualization displays the lower 48 U.S. states as a force-directed graph. Each state is a filled polygon node, and the links connecting them are derived from the Delaunay triangulation of state centroids. Users can click and drag states to rearrange the map, with the layout physics responding in real time. The code uses D3 v3 with the `d3.layout.force` API for simulation, `d3.geo.path` for rendering state shapes, and `d3.geom.voronoi` to compute the links. The map data comes from a JSON file of U.S. states, with Alaska, Hawaii, and Puerto Rico excluded.

Mmbostock

70% match

Loading thumbnail…

Hex Map

This animated visualization presents a hexagon-based map of the contiguous United States, with each state rendered as a cluster of individual hexagons. The TopoJSON data (Hex1000Topo.json) contains a grid of 1,000 hexagons, and D3.js v3 projects and renders these as SVG polygons. On load, the hexagons assemble into place with an animation, building the map from a central point outward. Each hexagon is color-coded to represent the state it belongs to, creating a mosaic-like representation of U.S. state boundaries. The hover interaction could be used to reveal additional information, though the core visualization emphasizes the hexagonal tiling of geographic regions through smooth, animated transitions.

BBrideau

70% match

Loading thumbnail…

Gist 08d3bc545278d6a3b2d22df875392612

This example visualizes U.S. state boundaries using D3 v4’s geoAlbersUsa projection and d3.geoPath to render geographic features from a local us-states.json file. The SVG canvas, sized 700x580, is appended to the body, and each state’s polygon is drawn as a path element with a default fill and stroke. The map is centered using a translate of [width/2, height/2], and the simple code demonstrates how to load and project GeoJSON data for display. No interactions or styling are applied, keeping the focus on the map layout.

JJoymangulJensen

70% match