Gist b716a1dc4164ed9059c7

100%

Gist b716a1dc4164ed9059c7

✓ Published0🌍 Public

Last edited Mar 18, 2015

Created on Mar 17, 2015

This visualization uses d3.forceSimulation to distribute 19 points, each labeled by Rome’s district number, across a scatterplot-like space. The underlying dataset, loaded from a gistfile1.txt, records population counts for four marital statuses—Single, Married, Widow(er), and Divorced—per district. The chart encodes each status as a separate force-directed node, with the x-position determined by district and the y-position by population value, resulting in a compact, overlapping point cloud. A simple SVG rendering with axes and district labels makes the comparative distribution across statuses and districts visible at a glance.

AI-generated description

Similar vizzes

Loading thumbnail…

Exercise: Module 5

A scatterplot displays the percentage of single and divorced residents against the percentage of married and widowed residents across Rome’s districts in 2011, with each circle representing a district and hover tooltips revealing detailed marital-status breakdowns. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.linear`, `d3.svg.axis`, and `d3.csv` to load and plot data from the Rome Municipality. Circle positions are computed from CSV columns for single, married, widowed, and divorced counts, with axes formatted as percentages and a hover effect that changes circle color to orange.

Aaimbellone

82% match

Loading thumbnail…

Exercise Module 6

A small-multiples line chart shows the percentage of single and divorced people across 19 Rome districts from 2010 to 2012, with each district represented by a steelblue line. The chart uses d3.v3 with SVG rendering, a time scale for the x-axis, and a linear scale for the percentage values, formatted with `d3.format(".0%")`. Data comes from a CSV file published by the Rome Municipality. Hovering over a line highlights it in orange via a CSS `circle:hover` rule, though the lines themselves are drawn as paths.

Aaimbellone

78% match

Loading thumbnail…

Exercise: Module 4

A bar chart shows the percentage of divorced people in each Rome district for 2011, with hover highlighting and tooltips displaying exact counts and percentages. The visualization uses d3.csv to load the dataset, d3.scale.linear for the x-axis width, d3.scale.ordinal with rangeRoundBands for the y-axis categories, and d3.svg.axis for both axes. Rectangles are rendered in SVG and colored steelblue, while the x-axis tick format is set to percentages. Data originates from the Rome Municipality and includes notes about district changes.

Aaimbellone

77% match

Loading thumbnail…

Exercise: Module 3

A bar chart shows the number of divorced people in each Rome municipality for 2011, with bars labeled by district and value. The visualization uses D3 v3 to load the CSV data and append SVG rectangles and text elements. Bar widths scale proportionally to the Divorced column, divided by 10, while labels appear in white sans-serif font above each bar. The chart also includes notes about municipality boundary changes.

Aaimbellone

77% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

73% match

Loading thumbnail…

datasetviz

This example shows a small scatterplot of nine 2D points from a gist, mapping each x/y coordinate to a circle’s position. It uses D3’s `d3.forceSimulation` to gently nudge the circles into a stable layout, with the original data values drawn as faint gray dots behind the moving nodes. The visualization highlights how a force-directed simulation can reorganize raw coordinates into a readable cluster, while preserving the dataset’s numeric origins. Rendering relies on SVG circles and D3’s update/enter/exit pattern to bind the data.

Aalvarorueda89

72% match

Loading thumbnail…

fresh block

This visualization displays the number of articles published by married, single, and divorced individuals across age brackets from 25 to 75. Each marital status is represented as a horizontal row of circles, where the circle’s size corresponds to the article count for that age range. Built with D3.js, the SVG chart uses linear scales for positioning and radius, and toggles between circles and numeric labels on mouseover. The data is loaded from a local JSON file, and the chart is styled with custom CSS for axes and labels.

MMatteoTomassetti

71% match

Loading thumbnail…

Gist 1438976

This example visualizes the spread of points across a map using a force-directed layout. It shows how simulated particles or nodes distribute themselves over geographic boundaries, revealing spatial clustering and density patterns. The code employs `d3.forceSimulation` to animate node positions and `d3.geoPath` to render map shapes, likely from a GeoJSON source. It also uses JavaScript’s Canvas API for drawing, with the simulation running in a loop to update the visualization in real time. The underlying data appears to be generated programmatically rather than sourced from an external dataset.

Aabernier

71% match