Jefferson Abreu

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

Jul 25, 2019

Hello VizHub

This example displays a horizontal bar chart of Overwatch team match times, with each bar’s length proportional to its numeric difficulty value. Hovering a bar highlights it with a black stroke and logs the team name to the console. It uses d3.scaleLinear and d3.scaleBand for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.csv to load the dataset. The SVG renders through d3 selections, with mouseover and mouseout events triggering an onHover callback that updates the chart state.

Bowl Fruit - Hover to select

Five pieces of fruit in a bowl animate between apples and lemons while responding to hover. D3 v5’s `scaleOrdinal` maps fruit types to colors and radii, and `selection.join` patterns with `transition` handle enter, update, and exit states. Circle elements grow from radius zero and shrink on removal, with an animated swap from apple to lemon. A black stroke highlights the selected fruit via mouseover events that update a `selectedFruit` variable, triggering a re-render. The example uses plain SVG circles and D3 transitions over one second.

Bowl Fruit - Click to select

A bowl of fruit shows five apples as colored circles, with a click selecting a fruit and highlighting it with a black stroke. The visualization animates changes: after two seconds one apple is eaten, after three seconds an apple becomes a lemon, and after four seconds another apple disappears. Using d3.v5, the fruitBowl function manages enter, update, and exit selections, applying `transition.attr` to animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes.

Bowl Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins in D3, showing how circles representing fruit transition when data changes over time. The visualization uses `selection.data()`, `enter()`, `merge()`, and `exit()` to handle adding, updating, and removing elements, with `transition()` animating position and radius changes. D3 v5 and SVG circles render apples and lemons with distinct colors and sizes, while automatic timed updates remove, replace, and filter fruits to illustrate enter, update, and exit behavior.

Bowl Fruit - bowl for fruits

A D3.js simulation shows a bowl of apples and lemons that changes over time. Five fruits sit in a rounded rectangle container; elements disappear, transform, and are removed through sequential animations. The visualization uses SVG shapes with ordinal color and radius scales mapping apple and lemon types to distinct hues and sizes. D3 transitions animate position, circle radius, and fill over one-second durations as the dataset is modified, demonstrating dynamic updates to a static chart.

my scatter plot

This scatter plot visualizes the relationship between weight and height for 500 individuals, with points colored by gender (orange for female, teal for male) based on data from a Kaggle CSV file. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to map the quantitative axes, rendering SVG circles with a radius of 5 pixels. Axis grid lines and text labels are styled via CSS, while the chart displays “PESO (g)” on the x-axis and “ALTURA (cm)” on the y-axis.

Jul 23, 2019

line chart

A line chart plots the win-difference values of eight Overwatch teams over time, with each team labeled on the x-axis and the numeric difference on the y-axis. The chart uses a black, five-pixel-wide stroke to connect the data points, which are loaded from a CSV file. The visualization is built with d3.v5, using `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `line` to generate the path, with axes added via `axisBottom` and `axisLeft`.

Jul 23, 2019

Temperature in San Francisco Line Chart

This line chart shows temperature in San Francisco over a week, plotting temperature values in Celsius against time. The visualization uses D3 v5 to load CSV data from an external URL, parse timestamps and numeric temperatures, and render an SVG output. The code employs d3.scaleTime and d3.scaleLinear for axis scaling, d3.line with curveBasis for the smoothed path, and d3.axisLeft and d3.axisBottom to generate axes with gridlines. Custom styling through CSS defines tick fonts, axis labels, and the maroon line stroke.

Jul 18, 2019

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with a customized axis layout and formatting. It uses D3 v5 with `csv`, `scaleLinear`, and `scaleBand` to map population values and country names, while `axisBottom` and `axisLeft` render the axes. Axis ticks are formatted with `format(".3s")` to abbreviate numbers, and grid lines are styled via CSS. The SVG is drawn with `select` and appended `rect` elements, and the legend titles are added as text elements.

World Population Area Chart

This area chart displays the total world population over time, using data from a World Nations dataset spanning multiple years. The visualization employs D3 v5 to construct the chart, with a time-scaled x-axis and a linear y-axis representing population counts, formatted in billions. The area beneath the population curve is filled with a maroon color, and the chart includes labeled axes and a title. The SVG rendering uses a line generator to create the filled area path, while axis ticks and labels are styled via CSS.

Scatter Plot Test

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via `d3.csv`. The SVG rendering uses `d3.scaleLinear` for both axes, with `d3.axisBottom` and `d3.axisLeft` to create gridlines and tick marks. Circles are appended with semi-transparent cyan fill to show data density. Axis labels and a title are added as SVG text elements, demonstrating a clear, labeled comparison of vehicle performance metrics.

Temperature in San Francisco Area Chart

This area chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The area under the curve is filled in maroon, and axis labels are rotated for clarity. The visualization loads CSV data from an external URL and employs D3 v5 APIs like `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to render the smooth area path and axes as SVG elements.

Temperature in San Francisco Scatter Plot

This scatter plot displays temperature readings in degrees Celsius from San Francisco over a week, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 APIs including `select`, `csv`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to map the data to SVG circles. The chart is rendered as an SVG with axes featuring grid lines, tick labels, and custom axis titles, all styled via an external CSS file. Data is loaded from a CSV file provided by the Data Canvas - Sense your City initiative.

Scatter Plot Test

This scatter plot displays the ten most populous countries, with population on the x-axis and country names on the y-axis. Using D3 v5, the code loads CSV data, scales the population values, and renders circles via SVG. It employs `scaleLinear` and `scalePoint` for axes, `axisBottom` and `axisLeft` for ticks, and custom formatting to abbreviate numbers. The chart includes axis labels and a titled heading, with margins and styles applied through separate CSS.

Jul 15, 2019

Teste de Bar char

This example displays a horizontal bar chart comparing the populations of ten countries, using a bar for each nation. The chart renders as an SVG using D3 v5, with a linear scale for the population axis and a band scale for the categorical country labels. The code employs D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to construct the visualization. Data is loaded from a CSV file, with population values multiplied by 1000, and the resulting bars are drawn as SVG rectangles.

Jul 12, 2019