Skip to content

Commit b23557a

Browse files
hrechthrecht
committed
new little text based on number of changes and so far 0 removals
1 parent 657ed65 commit b23557a

File tree

3 files changed

+119
-101
lines changed

3 files changed

+119
-101
lines changed

‎src/routes/+page.svelte‎

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -91,16 +91,6 @@
9191
<header>
9292
<h1>Tracking Census Dataset Changes</h1>
9393
<p class="update-time">Last checked for updates: {format_date(change_date)}</p>
94-
</header>
95-
<main>
96-
<p>
97-
The <a href="https://www.census.gov/data/developers/data-sets.html" target="_blank"
98-
>U.S. Census Bureau APIs</a
99-
>
100-
give programmers access to {endpoints.length.toLocaleString('en-US')} different dataset endpoints.
101-
This page automatically checks the list of endpoints every day and tracks when datasets are added
102-
to or removed from the APIs. <a href="#about">Read more about this project</a>.
103-
</p>
10494

10595
<div class="contact-container">
10696
<p>
@@ -113,14 +103,20 @@
113103
</a>
114104
</p>
115105
</div>
106+
</header>
107+
<main>
116108

117-
<div class="chart">
118-
<h2 class="chart-title">Recently added and removed datasets</h2>
119-
<ChangeTable />
120-
<p class="chart-note">
121-
Note: Dataset titles and descriptions were written by the Census Bureau.
122-
</p>
123-
</div>
109+
<p>
110+
The <a href="https://www.census.gov/data/developers/data-sets.html" target="_blank"
111+
>U.S. Census Bureau APIs</a
112+
>
113+
give programmers access to {endpoints.length.toLocaleString('en-US')} different dataset endpoints.
114+
This page automatically checks the list of endpoints every day and tracks when datasets are added
115+
to or removed from the APIs. <a href="#about">Read more about this project</a>.
116+
</p>
117+
118+
119+
<ChangeTable />
124120

125121
<p>
126122
The {endpoints.length.toLocaleString('en-US')} datasets in the APIs are broken down into three
@@ -308,16 +304,6 @@
308304
</div>
309305

310306
<style>
311-
.chart {
312-
padding-bottom: 20px;
313-
padding-top: 20px;
314-
}
315-
316-
.chart-container {
317-
width: 100%;
318-
height: 300px;
319-
overflow-x: hidden;
320-
}
321307
322308
h1,
323309
h2,
@@ -346,7 +332,7 @@
346332
}
347333
348334
.update-time {
349-
margin-bottom: 0px;
335+
margin-bottom: 0.5em;
350336
font-size: var(--text-xsmall);
351337
text-transform: uppercase;
352338
font-family: var(--font-mono);

‎src/routes/ChangeTable.svelte‎

Lines changed: 93 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script>
2+
import { extent, groups, rollup } from 'd3-array';
23
import data from './_data/endpoint-changes.csv';
34
45
data.forEach((d) => {
@@ -7,6 +8,11 @@
78
89
data.sort((b, a) => a.change_date - b.change_date);
910
11+
const changes = rollup(data, (D) => D.length, (d) => d.change);
12+
13+
const changes_added = changes.get("Added");
14+
const changes_removed = (changes.get("Removed") === undefined) ? 0:changes.get("Removed");
15+
1016
function format_date(myDate) {
1117
let formatted = new Intl.DateTimeFormat('en-US', {
1218
year: 'numeric',
@@ -23,99 +29,114 @@
2329
//let { data } = $props();
2430
</script>
2531

26-
<!-- Show or hide dataset descriptions (often lengthy) in table -->
27-
<div class="button-group">
28-
<button
29-
class="table-button"
30-
type="button"
31-
onclick={() => {
32-
expanded_desc = !expanded_desc;
33-
}}
34-
>
35-
{#if expanded_desc}
36-
&#8722; Hide descriptions
37-
{:else}
38-
&#43; Show descriptions
39-
{/if}</button
40-
>
41-
<!--div class="checkbox">
42-
<div class="toggle-label-text">Show dataset descriptions</div>
43-
<div class="toggle-holder">
44-
<input
45-
class="toggle-input"
46-
id="descriptions-toggle"
47-
type="checkbox"
48-
role="switch"
49-
name="descriptions-toggle"
50-
bind:checked={expanded_desc}
51-
/>
52-
<label class="toggle-label" for="descriptions-toggle"> Toggle </label>
53-
</div>
54-
</div-->
55-
</div>
56-
57-
<table id="tb" {expanded_desc} {all_rows}>
58-
<thead>
59-
<tr class="border-bottom">
60-
<th class="col-change" scope="col">Change</th>
61-
<th class="col-endpoint" scope="col">Endpoint</th>
62-
<th class="col-type" scope="col">Type</th>
63-
</tr>
64-
</thead>
65-
<tbody>
66-
{#each data as d}
67-
<tr>
68-
<td class={d.change + ' change info'}>{d.change} {format_date(d.change_date)}</td>
69-
<td class="endpoint info"
70-
><a href={d.url.replace('http://', 'https://') + '.html'} target="_blank"
71-
>{d.url.replace('http://api.census.gov/data/', '')}</a
72-
></td
73-
>
74-
<td class="type info">{d.type}</td>
75-
</tr>
76-
<tr class="border-bottom">
77-
<td colspan="3"
78-
><div class="title">{d.title}</div>
79-
<p class="description">{d.description}</p></td
80-
>
81-
</tr>
82-
{/each}
83-
</tbody>
84-
</table>
32+
<p>{changes_added} dataset endpoints have been added and {changes_removed} removed since July 2025.</p>
8533

86-
<!-- Make toggle buttons for showing all/fewer rows IF there are many rows -->
87-
{#if data.length > 8}
34+
<div class="chart">
35+
<h2 class="chart-title">
36+
{#if (changes_removed === undefined | changes_removed === 0)}
37+
Recently added datasets
38+
{:else}
39+
Recently added and removed datasets
40+
{/if}
41+
</h2>
42+
<!-- Show or hide dataset descriptions (often lengthy) in table -->
8843
<div class="button-group">
8944
<button
9045
class="table-button"
9146
type="button"
9247
onclick={() => {
93-
all_rows = !all_rows;
48+
expanded_desc = !expanded_desc;
9449
}}
9550
>
96-
{#if all_rows}
97-
&#8722; Show fewer rows
51+
{#if expanded_desc}
52+
&#8722; Hide descriptions
9853
{:else}
99-
&#43; Show all {data.length} rows
54+
&#43; Show descriptions
10055
{/if}</button
10156
>
102-
10357
<!--div class="checkbox">
104-
<div class="toggle-label-text">Show all {data.length} rows</div>
58+
<div class="toggle-label-text">Show dataset descriptions</div>
10559
<div class="toggle-holder">
10660
<input
10761
class="toggle-input"
108-
id="rows-toggle"
62+
id="descriptions-toggle"
10963
type="checkbox"
11064
role="switch"
111-
name="rows-toggle"
112-
bind:checked={all_rows}
65+
name="descriptions-toggle"
66+
bind:checked={expanded_desc}
11367
/>
114-
<label class="toggle-label" for="rows-toggle"> Toggle </label>
68+
<label class="toggle-label" for="descriptions-toggle"> Toggle </label>
11569
</div>
11670
</div-->
11771
</div>
118-
{/if}
72+
73+
<table id="tb" {expanded_desc} {all_rows}>
74+
<thead>
75+
<tr class="border-bottom">
76+
<th class="col-change" scope="col">Change</th>
77+
<th class="col-endpoint" scope="col">Endpoint</th>
78+
<th class="col-type" scope="col">Type</th>
79+
</tr>
80+
</thead>
81+
<tbody>
82+
{#each data as d}
83+
<tr>
84+
<td class={d.change + ' change info'}>{d.change} {format_date(d.change_date)}</td>
85+
<td class="endpoint info"
86+
><a href={d.url.replace('http://', 'https://') + '.html'} target="_blank"
87+
>{d.url.replace('http://api.census.gov/data/', '')}</a
88+
></td
89+
>
90+
<td class="type info">{d.type}</td>
91+
</tr>
92+
<tr class="border-bottom">
93+
<td colspan="3"
94+
><div class="title">{d.title}</div>
95+
<p class="description">{d.description}</p></td
96+
>
97+
</tr>
98+
{/each}
99+
</tbody>
100+
</table>
101+
102+
<!-- Make toggle buttons for showing all/fewer rows IF there are many rows -->
103+
{#if data.length > 8}
104+
<div class="button-group">
105+
<button
106+
class="table-button"
107+
type="button"
108+
onclick={() => {
109+
all_rows = !all_rows;
110+
}}
111+
>
112+
{#if all_rows}
113+
&#8722; Show fewer rows
114+
{:else}
115+
&#43; Show all {data.length} rows
116+
{/if}</button
117+
>
118+
119+
<!--div class="checkbox">
120+
<div class="toggle-label-text">Show all {data.length} rows</div>
121+
<div class="toggle-holder">
122+
<input
123+
class="toggle-input"
124+
id="rows-toggle"
125+
type="checkbox"
126+
role="switch"
127+
name="rows-toggle"
128+
bind:checked={all_rows}
129+
/>
130+
<label class="toggle-label" for="rows-toggle"> Toggle </label>
131+
</div>
132+
</div-->
133+
</div>
134+
{/if}
135+
136+
<p class="chart-note">
137+
Note: Dataset titles and descriptions were written by the Census Bureau.
138+
</p>
139+
</div>
119140

120141
<style>
121142
table {

‎src/styles/style.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ figcaption {
8080

8181
p {
8282
font-size: var(--text-p);
83-
margin: 0 0 15px;
83+
margin: 0 0 1em;
8484
line-height: 1.5;
8585
text-align: left;
8686
}
@@ -98,6 +98,17 @@ li {
9898
font-size: var(--text-xsmall);
9999
}
100100

101+
.chart {
102+
padding-bottom: 20px;
103+
padding-top: 20px;
104+
}
105+
106+
.chart-container {
107+
width: 100%;
108+
height: 300px;
109+
overflow-x: hidden;
110+
}
111+
101112
/* links */
102113
a {
103114
color: var(--color-highlight);

0 commit comments

Comments
 (0)