kkkk

@katecpen·9 public vizzes

Interactive pie and bar

This interactive dashboard combines a histogram and pie chart to explore categorical data. The bar chart displays frequencies for each state, and hovering over a bar updates the pie chart to show the low, mid, and high breakdown for that state. Both visualizations use D3 v3’s `d3.svg.axis` and ordinal/linear scales, with smooth transitions via `transition().duration()`. The bar chart is rendered in SVG, and hovering also updates a linked legend showing frequencies and percentages.

Feb 14, 2020

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes San Francisco weekly temperature trends over time from the Data Canvas Sense Your City dataset. React components build the visualization, with separate AxisBottom, AxisLeft, and Marks components using the d3 line and curveNatural functions to render a smooth, curving path. The chart displays temperature values against timestamps, using the Poppins font and muted color scheme with teal strokes. Axis ticks are generated through xScale.ticks and yScale.ticks methods, while data is loaded asynchronously via d3.csv from a GitHub gist.

Jan 31, 2020

Loading thumbnail…

Learning CSV

A cheerful face with animated eyebrows is drawn using SVG shapes, and its eyebrows move vertically in a looping transition. The visualization is built with D3 v5, using `select` to target the SVG element, and `append` to construct the circle, rectangles, and a pie-shaped arc for the mouth. The animation relies on the `transition` API with a 2-second duration to shift the eyebrow group’s transform attribute.

Jan 29, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays the prize money for the US Open women’s singles champion by year, with time on the x-axis and the dollar amount on the y-axis. The visualization uses the D3 v5 library’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth, maroon path. Data is loaded from a remote CSV via D3’s `csv` function, and axes are drawn with gridlines, while the chart is generated as an SVG with a 960×500 viewport.

Jan 29, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length, with circle radius encoding sepal width. The data is loaded via d3.csv from a remote gist and rendered as SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom with grid lines, and custom axis labels and a title. Points are semi-transparent red circles, with axes styled through CSS.

Jan 29, 2020

Loading thumbnail…

Test Bar chart

This bar chart visualizes water withdrawal amounts for a selection of countries, sorted in descending order from largest to smallest. The chart is rendered as an SVG using D3 v5, with the data loaded from a CSV file via `d3.csv` and laid out using `scaleLinear` and `scaleBand`. The visualization uses `Promise.all` to load two datasets simultaneously, though only the water withdrawal data is displayed. Axes are generated with `axisLeft` and `axisBottom`, while `d3.descending` handles the sort order.

Jan 29, 2020

Loading thumbnail…

HTML Starter

A bare minimum HTML page displays the text "Hello HTML" in large, centered type. The code uses plain HTML and CSS, with no JavaScript libraries or external dependencies. The page demonstrates the simplest possible starting point for web-based visualization projects.

Jan 28, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to bind data from a CSV file to SVG rectangles, with customized axes that include formatted tick labels and grid lines. The chart is rendered in an SVG container, with each bar filled in steel blue, and the axis customization demonstrates how to tailor D3’s scale and axis functions for a clean, readable presentation.

Jan 28, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It demonstrates axis customization using d3.axisBottom and d3.axisLeft, with a formatted tick label that abbreviates large numbers from billions to "B". The chart loads data from data.csv via d3.csv, scales the population values, and renders steelblue rectangles on an SVG canvas with margin-based layout.

Jan 28, 2020